@import url('https://fonts.googleapis.com/css2?family=Murecho:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');



 pc-only {
        display: block;
    }
    .sp-only {
        display: none;
    }
/** タブレット */
@media screen and (max-width: 1024px){
}
/** sp **/
@media screen and (max-width: 500px){
    .sp-only {
        display: block;
    }
    .pc-only {
        display: none;
    }
}

body{
    /*background: url(/images/gray-bg.jpg)*/
}

/*section{
    background-image: url("../images/back.png");
    background-repeat: repeat;
    
}*/
/** kv **/
.kv{
   width: 100%;
}
.kv img{
    width: 100%;
    height: auto;
    vertical-align: top;
}
.main img{
     width: 100%;
    height: auto;
    vertical-align: top;
}


/*.main {
        font-family: "Shippori Mincho B1", serif;
}*/

.main__inner{
    background-color: #f46724;
}
.main__inner.green {
    
    background-color: #0EB48D;
}
.s-block{
    /*background-color: #fff;*/
    width: 90%;
    max-width: 1300px;
    /*margin: 60px auto 0;*/
    margin: 30px auto 0;
    padding: 60px 80px 84px;
    /*border-radius: 20px;*/
    color: #fff;
}
.s-block.green {
    margin-top: 0;
}
/** 紹介 **/
.intro{
    display: grid;
    grid-template-columns: 150px 1fr;
    gap:35px;
    background-color: #f46724;
    padding: 24px 16px;
    border-radius: 10px;
}
.intro.green {
    background-color: #0EB48D;
}
.intro .intro__txt {
    height: fit-content;
    margin: auto 0;
}
.intro .intro__txt p{
    font-size: 80px;
    /*color: #de2126;*/
    color: #fff;
    font-weight: 900;
  /*font-family: "Murecho", sans-serif;*/
  font-family: "Noto Sans JP", sans-serif;

}
.intro .intro__txt.green p{
    color: #0EB48D;
}
.intro .intro__txt p:nth-of-type(2){
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 4.8px;
}


/** 説明 **/
.des{
    margin-top: 55px;
    
}
.des .des__title p{
    font-size: 25px;
    display: flex;
    align-items: center;
    font-weight: bold;    
    line-height: calc(30 / 20);
}
.des .des__title p:before{
    content: "";
    margin-right: 20px;
    background: url("../images/icon_tv_w.png");
    width:33px;
    height: 33px;
    background-size: contain;
    background-repeat: no-repeat;
}
.des .des__txt {
    margin-top: 40px;
}
.des .des__txt p{
    font-size: 16px;
    line-height: calc(30 / 16);
    font-weight: bold;
}

/** プロフィール **/
.prof{
    margin-top: 50px;
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: 60px;
}
.prof .prof__txt > p:nth-of-type(1){
    font-size: 24px;
    font-weight: bold;
}
.prof .prof__txt > ul {
    margin-top: 17px;
}
.prof .prof__txt > ul li{
    display: grid;
    grid-template-columns: 100px 1fr;
    padding: 13px 0;
    border-bottom: dotted #ddd 3px;
}
.prof .prof__txt > ul li > div > p,
.prof .prof__txt > ul li > p{
    font-size: 16px;
    line-height: calc(30 / 16);
}
.prof .prof__txt > ul li > div > p,
.prof .prof__txt > ul li > p:nth-of-type(2){
    font-weight: bold;    
}
.prof .prof__map{
    height: fit-content;
    margin: auto 0;
}



/** 特集 **/
.topic{
    margin-top: 55px;
}
.topic > p:nth-of-type(1){
    font-size: 24px;
    font-weight: bold;
}
.topic .topic__list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}
.topic .topic__list li div{
    padding: 15px;
    /*border-radius: 5px;*/
    border-radius: 40px;
    /*border: 2px solid #F5BCB8;*/
    border: 2px solid #fff;
}
/*.topic .topic__list li:nth-child(1) div{
    background: #F5BCB8;
    border-color: #F5BCB8;
}

.topic .topic__list li:nth-child(2) div{
    background:#C6BFDE;
    border-color: #C6BFDE;
}
.topic .topic__list li:nth-child(3) div{
    background:#ABDDF7;
    border-color: #ABDDF7;
}
.topic .topic__list li:nth-child(4) div{
    background:#C0DB8C;
    border-color: #C0DB8C;
}
.topic .topic__list li:nth-child(5) div{
    background:#F7B980;
    border-color: #F7B980;
}
.topic .topic__list li:nth-child(6) div{
    background:#FCD475;
    border-color: #FCD475;
}
.topic .topic__list li:nth-child(7) div{
    background:#fff;
    border-color: #ddd;
}
.topic .topic__list li:nth-child(8) div{
    background:#F5BCB8;
    border-color: #F5BCB8;
}

.topic .topic__list.makino li:nth-child(1) div{
    background:#66D5C3;
    border-color: #66D5C3;    
}
.topic .topic__list.makino li:nth-child(2) div{
    background:#C9E8A4;
    border-color: #C9E8A4;    
}
.topic .topic__list.makino li:nth-child(3) div{
    background:#9DDCF8;
    border-color: #9DDCF8;    
}*/
.topic .topic__list.makino li:hover div,
.topic .topic__list li:hover div{
    background: #fff;
}





.topic .topic__list li div p{
    font-weight: bold;
    position: relative;
    color: #fff; 
    /*color: #000;*/ 
    /*padding-right: 30px;*/
    line-height: 1.3;
    text-align: center;
}
/*.topic .topic__list li div p:after{
    content: "";
    width: 16px;
    height: 16px;
    background: url("../images/arrow.png");
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}*/

.topic .topic__list li:hover div p{
    color: #f46724;
}
.topic .topic__list.makino li:hover div p{
    color: #0EB48D;
}



/** footer **/
footer{
    /*margin-top: 100px;*/
}


/** tb版 **/
@media screen and (max-width: 1024px){
    .intro .intro__txt p{
        font-size: 60px;
    }
    .intro .intro__txt p:nth-of-type(2){
        font-size: 20px;
    }
}
@media screen and (max-width: 768px){
    .s-block{
        padding: 60px 60px 84px;
    }
    .intro{
        grid-template-columns: 105px 1fr;
        gap: 20px;
    }
    .intro .intro__txt p{
        font-size: 50px;
    }
    .intro .intro__txt p:nth-of-type(2){
        font-size: 18px;
    }
    
    .des{
        margin-top: 30px;
    }
    .des .des__txt{
        margin-top: 25px;
    }
    
    
    
    .prof{
        grid-template-columns: 1fr;
        gap: 20px;
    }
/*    .prof .prof__txt > ul{
        margin-top: 0px;
    }*/
    .prof .prof__txt > ul li{
        padding: 10px 0;
    }
    .topic .topic__list{
        grid-template-columns: 1fr 1fr;
    }
    .topic .topic__list li div{
        padding: 15px 10px;
    }
}


/**** sp版 ****/
@media screen and (max-width: 500px) {
    
    .s-block{
        padding: 30px 20px 54px;        
    }
    
    
    .intro{
        grid-template-columns: 1fr;
        gap: 5px;
    }
    .intro .intro__image{
        width: 100px;
        margin: 0 auto;
    }
    .intro .intro__txt p{
        font-size: 43px;
        text-align: center;
    }
    .intro .intro__txt p:nth-of-type(2){
        font-size: 12px;
    }
    
    .des{
        margin-top: 25px;
    }
    .des .des__title p{
        flex-direction: column;
        font-size: 19px;
        text-align: center;
    }
    .des .des__title p:before{
        margin: 0 0 10px 0;
    }
    .des .des__txt{
        margin-top: 35px;
    }
    .des .des__txt p{
        text-align: center;
    }
    
    
    
    
    .prof .prof__txt > p:nth-of-type(1){
        font-size: 22px;
        text-align: center;
    }
    .prof .prof__txt > ul li{
        border-bottom: none;
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }
    .prof .prof__txt > ul li > p:nth-of-type(1){
        /*background-color: #EDEDED;*/
        background-color: #E31B22;
        border-radius: 5px;
        padding: 6px 15px;
    }
    .prof.makino .prof__txt > ul li > p:nth-of-type(1){
        background-color: #2484D5;
    }
    .prof .prof__txt > ul li > div,
    .prof .prof__txt > ul li > p:nth-of-type(2){
        margin-top: 15px;
        padding: 0 15px;
    }
    
    
    
    .topic{
        margin-top: 40px;
    }
    .topic > p:nth-of-type(1){
        font-size: 22px;
        text-align: center;
    }
    .topic .topic__list{
        grid-template-columns: 1fr;
        margin-top: 20px;
    }
}