/* コシノツヨシ オフィシャルサイト */


/* PCレイアウト */
/*-------------------------------------------------------------------------------------------*/

body {
    font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    text-align:center;
}

.ovr:hover {
    opacity: 0.7;
}

/* main image */
#main {
    position:relative;
    width:100%;
    max-width:950px;
    height:417px;
    background-repeat:no-repeat;
    background-position:center top;
    background-image:url("../images/main_pc.png");
    background-size:contain;
    margin:0 auto;
    padding-bottom:60px;
}
#main h1 {
    position:absolute;
    top:22.54%;
    right:12.21%;
    width:41.05%;
}
#main .anime {
    position:absolute;
    left:20.84%;
    bottom:40px;
    width:26.315%;
}
#main img {
    max-width:100%;
    height:auto;
}

section {
    width:100%;
    margin:0 auto;
}
.section-inner {
    width:100%;
    max-width:950px;
    margin:0 auto;
}

section img {
    max-width:100%;
    height:auto;
}
section .pc {}
section .sp {display:none;}



/* topics */
section.topics {
    margin-bottom:80px;
    padding-top:35px;
}
section.topics  .section-inner {
    position:relative;
}
section.topics .balloon {
    width:62.5%;
    height:0;
    background-repeat:no-repeat;
    background-position:center top;
    background-image:url("../images/topics_balloon.png");
    background-size:contain;
    margin-left:8.4%;
    padding-top:16.25%;
    text-indent:-9999px;
}
section.topics .anime {
    position:absolute;
    top:-40px;
    right:4%;
    width:26.315%;
}



/* menu */
section.menu {
    position:relative;
    margin-bottom:60px;
    padding-bottom:40px;
}
section.menu .menu-block {
    position:relative;
    float:left;
    width:50%;
    height:0;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:contain;
    padding-top:31.5789%;
    box-sizing:border-box;
}
section.menu .menu-block a {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
}
section.menu .menu-block a:hover {
    background-color:rgba(255,255,255,0.3);
}

section.menu .menu-block.menu01 {
    background-image:url("../images/menu01_pc.png");
    z-index:4;
}
section.menu .menu-block.menu02 {
    background-image:url("../images/menu02_pc.png");
    z-index:2;
}
section.menu .menu-block.menu03 {
    background-image:url("../images/menu03_pc.png");
    z-index:1;
}
section.menu .menu-block.menu04 {
    background-image:url("../images/menu04_pc.png");
    z-index:3;
}
section.menu .menu-block .new {
    position:absolute;
    width:23.157%;
    z-index:2;
}
section.menu .menu-block .anime {
    position:absolute;
    z-index:2;
}

section.menu .menu-block.menu01 .new {
    top:-7%;
    right:5%;
}
section.menu .menu-block.menu01 .anime {
    right:1.5%;
    bottom:-8%;
    width:52.36%;
}
section.menu .menu-block.menu02 .anime {
    right:1.5%;
    bottom:0;
    width:52.36%;
}
section.menu .menu-block.menu03 .anime {
    left:34.5%;
    bottom:-16%;
    width:45.5%;
}
section.menu .menu-block.menu04 .new {
    top:-7%;
    left:34.5%;
}
section.menu .menu-block.menu04 .anime {
    right:24.5%;
    bottom:-20%;
    width:36.5%;
}


/* なるほどクイズ 2021/04 */
section.menu .menu-block.menu05 {
    float:none;
    width:100%;
    background-image:url("../images/menu05_pc.png");
    padding-top:31.5789%;
}
section.menu .menu-block.menu05 .new {
    top:-18%;
    left:-1%;
}


/* profile */
section.profile {
    max-width:inherit;
    background-color:#f8b73d;
    margin-bottom:55px;
    padding:4% 0;
}
section.profile .section-inner {
    position:relative;
}

section.profile .title {
    float:left;
    width:27.0%;
    margin-top:12%;
}
section.profile h2 {
    display:block;
    width:100%;
    height:0;
    background-repeat:no-repeat;
    background-position:center top;
    background-image:url("../images/profile_title_pc.png");
    background-size:contain;
    padding-top:51.1923%;
    text-indent:-9999px;
}
section.profile .content {
    float:left;
    width:58%;
}

section.profile .balloon {
    position:absolute;
    top:19%;
    left:59%;
    width:9.5%;
}
section.profile .anime {
    position:absolute;
    top:-9%;
    right:-3.5%;
    width:27.158%;
}


/* twitter */
section.tw {
    background-color:#1da1f2;
    margin-bottom:55px;
    padding:4% 0;
}
section.tw .section-inner {
    position:relative;
}

section.tw .title {
    float:left;
    width:27.0%;
    margin-top:6%;
    margin-right:4%;
}
section.tw h2 {
    display:block;
    width:100%;
    height:0;
    background-repeat:no-repeat;
    background-position:center top;
    background-image:url("../images/twitter_title_pc.png");
    background-size:contain;
    padding-top:104%;
    text-indent:-9999px;
}
section.tw .tw_tl {
    float:left;
    width:58%;
    max-width:430px;
    margin:0 auto;
}

section.tw .balloon {
    position:absolute;
    top:-6%;
    right:0;
}
section.tw .anime {
    position:absolute;
    bottom:-3%;
    right:-2%;
}


/* banner */
section.banner {
}
section.banner ul {
    padding-bottom:8%;
}
section.banner ul li {
    width:84%;
    max-width:680px;
    margin:0 auto 2%;
}


/* 950px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 950px) {

/* main image */
#main {
    height:0;
    padding-top:43.894%;
}

/* profile */
section.profile .title {
    width:22.0%;
}
section.profile .content {
    width:62%;
}
section.profile .balloon {
    top:19%;
    left:56%;
}
section.profile .anime {
    top:-4%;
    right:0;
    width:23%;
}


/* twitter */
section.tw .title {
    width:22.0%;
}
section.tw .tw_tl {
    width:58%;
}
section.tw .balloon {
    top:-6%;
    right:3%;
}
section.tw .anime {
    bottom:-3%;
    right:0;
    width:26%;
}






}
/*-------------------------------------------------------------------------------------------*/
/* 950px以下 END */



/* 750px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 750px) {

section .pc {display:none;}
section .sp {display:block;}

/* main image */
#main {
    background-image:url("../images/main_sp.png");
    padding-top:53.3333%;
}
#main h1 {
    top:26.5%;
    right:10.5%;
    width:49.33%;
}
#main .anime {
    left:4%;
    bottom:30px;
    width:34%;
}



/* topics */
section.topics {
    margin-bottom:12%;
    padding-top:8%;
}
section.topics .balloon {
    width:61.5%;
    margin-left:6.5%;
    padding-top:16.25%;
}
section.topics .anime {
    top:-60%;
    right:2%;
    width:34%;
}



/* menu */
section.menu {
    margin-bottom:6%;
    padding-bottom:4%;
}
section.menu .menu-block {
    width:100%;
    height:0;
    margin-bottom:4%;
    padding-top:29.333%;
}
section.menu .menu-block a:hover {
    background-color:rgba(255,255,255,0.3);
}

section.menu .menu-block.menu01 {
    background-image:url("../images/menu01_sp.png");
}
section.menu .menu-block.menu02 {
    background-image:url("../images/menu02_sp.png");
}
section.menu .menu-block.menu03 {
    background-image:url("../images/menu03_sp.png");
}
section.menu .menu-block.menu04 {
    background-image:url("../images/menu04_sp.png");
}
section.menu .menu-block .new {
    width:12.5%;
}


section.menu .menu-block.menu01 .new {
    top:-25%;
    left:8%;
    right:inherit;
}
section.menu .menu-block.menu01 .anime {
    right:5.5%;
    bottom:-12%;
    width:34%;
}
section.menu .menu-block.menu02 .anime {
    right:1.5%;
    bottom:0;
    width:52.36%;
}
section.menu .menu-block.menu03 .anime {
    left:54.5%;
    bottom:-21%;
    width:27.5%;
}
section.menu .menu-block.menu04 .new {
    top:-25%;
    left:8%;
}
section.menu .menu-block.menu04 .anime {
    right:28.5%;
    bottom:-22%;
    width:23.5%;
}


/* なるほどクイズ 2021/04 */
section.menu .menu-block.menu05 {
    background-image:url("../images/menu05_sp.png");
    padding-top:30.8%;
}
section.menu .menu-block.menu05 .new {
    top:-22%;
    left:5%;
}



/* profile */
section.profile {
    margin-bottom:4%;
    padding:4% 0;
}

section.profile .title {
    float:none;
    width:27.0%;
    margin:0 auto 3%;
}
section.profile h2 {
}
section.profile .content {
    float:none;
    width:87.2%;
    margin:0 auto;
}

section.profile .balloon {
    top:40%;
    left:46%;
    width:12.5%;
}
section.profile .anime {
    position:absolute;
    top:2%;
    right:1.5%;
    width:27.5%;
}


/* twitter */
section.tw {
    margin-bottom:4%;
    padding:4% 0;
}

section.tw .title {
    float:none;
    width:27.0%;
    margin:0 auto 3%;
}
section.tw h2 {
}
section.tw .tw_tl {
    float:none;
    width:80%;
    margin:0 auto;
}

section.tw .balloon {
    top:6.5%;
    right:4%;
    width:28.5%;
}
section.tw .anime {
    top:0%;
    left:2%;
    bottom:inherit;
    right:inherit;
    width:32%;
}

iframe.twitter-timeline-rendered {
    width:430px !important;
    margin:0 auto;
}





}
/*-------------------------------------------------------------------------------------------*/
/* 750px以下 END */



/* 320px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 320px) {


iframe.twitter-timeline-rendered {
    width:300px !important;
}


}
/*-------------------------------------------------------------------------------------------*/
/* 320px以下 END */