@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Noto+Sans+JP:wght@300;400&family=Noto+Serif+JP:wght@500&display=swap&family=Noto+Sans+JP:wght@300;400&family=Noto+Serif+JP:wght@500&display=swap');


#ch  {
    padding: 0;
    font-family:"noto serif jp",YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    margin: 0 auto;
    line-height: 2.0;
    font-size: 12px;
    letter-spacing: 1px;
    box-sizing: border-box;
    color: #000;
    -webkit-text-size-adjust: 100%;
}

*:focus {
outline: none;
}

#ch ul,#ch li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#ch a {
    text-decoration: none;
    color: #000;
}

#ch img {
    width: 100%;
    vertical-align: bottom;
    line-height: 0;
    z-index: 0;
    outline: none;
    border: none;
}

#ch .sp-non{
    display: none;
}
#ch .pc-non{
    display: block;
}

@media only screen and (max-width: 768px)  {
    #ch .pc-non{
        display: none;
    }
    #ch .sp-non{
        display: block;
    }
    #ch .pc-br{
        display: none;
    }
}

#ch{

}

/************************************************************
                header 
************************************************************/

#ch .header{
    max-width: 1000px;
    margin: 3% auto 0;
    padding-bottom: 3%;
    border-bottom: solid #222222 0.5px;
}
#ch .header .blog{
    width: 24%;
    line-height: 0;
    min-width: 200px;
}
#ch .header .txt{
    margin-top: 7%;
    line-height: 2.1;
    font-weight: bold;
    font-size: 13px;
}
#ch .header .date{
    margin-top: 1%;
    line-height: 1.6;
    font-size: 13px;
}
@media only screen and (max-width: 1020px)  {
    #ch .header .blog{
        margin: 0 auto 0 2%;
    }
    #ch .header .txt{
        margin: 5% auto 0 2%;
    }
    #ch .header .date{
        margin: 1% auto 0 2%;
    }
}
@media only screen and (max-width: 768px)  {
    #ch .header{
        margin: 8% auto 0;
        padding-bottom: 6%;
    }
    #ch .header .txt{
        margin: 10% auto 0 2%;
    }
    #ch .header .date{
        margin: 5% auto 0 2%;
    }
}


/************************************************************
                contents 
************************************************************/
#ch .contents {
    max-width: 1000px;
    margin: 0 auto;
}
@media only screen and (max-width: 1020px)  {
    #ch .contents {
        padding: 2%;
        box-sizing: border-box;
    }
}
@media only screen and (max-width: 768px)  {
    #ch .contents {
        padding: 5%;
    }
}
#ch .contents .txt{
    line-height: 2.4;
} 
#ch .contents .txt.top{
    margin-top: 8%;
} 
#ch .contents .flex {
    display: flex;
}
#ch .contents .flex .box .sub-txt {
    line-height: 1.8;
    margin-top: 5px;
}
#ch .contents .flex .box .sub-txt a{
    display: inline-block;
    transition: all 0.5s;
    border-bottom: solid 1px rgba(0,0,0,0);
}
#ch .contents .flex .box .sub-txt a:hover {
    border-bottom: solid 1px #000;
}
@media only screen and (max-width: 1020px)  {
    #ch .contents .flex {
        display: block;
    }
    #ch .contents .txt.top{
        margin-top: 15%;
    } 
}
/************* .flex.cnt *****************/
#ch .contents .flex.cnt {
    align-items: center;
    justify-content: space-between;
    width: 70%;
    margin-top: 8%;
}
#ch .contents .flex.cnt .box:nth-of-type(1) {
    width: 35%;
}
#ch .contents .flex.cnt .box:nth-of-type(2) {
    width: 60%;
}
#ch .contents .flex.cnt .box .sub-txt{
    line-height: 2;
}
#ch .contents .flex.cnt .box .link{
    margin-top: 5%;
    display: flex;
    align-items: center;
}

#ch .contents .flex.cnt .box .link a:nth-of-type(1){
    display: block;
    width: 35%;
    min-width: 150px;
}
#ch .contents .flex.cnt .box .link a:nth-of-type(2){
    display: block;
    width: 40%;
}
#ch .contents .flex.cnt .box .link a{
    transition: all 0.5s;
}
#ch .contents .flex.cnt .box .link a:hover{
    scale: 0.98;
}
#ch .contents .flex.cnt .box .link a span{
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
    font-weight: bold;
}
#ch .contents .flex.cnt .box .link a span.ig{
    width: 28px;
    padding-right: 10px;
}
#ch .contents .flex.cnt .box .link a span.stb{
    display: inline-block;
    line-height: 0;
    width: 120px;
    margin-top: -10px;
}
#ch .contents .txt.top2{
    margin-top: 3%;
} 
@media only screen and (max-width: 1020px)  {
    #ch .contents .flex {
        display: block;
    }
    #ch .contents .flex.cnt {
        width: 100%;
        /* margin-top: 8%; */
    }
    #ch .contents .flex.cnt .box:nth-of-type(1) {
        width: 50%;
        margin: 0 auto;
    }
    #ch .contents .flex.cnt .box:nth-of-type(2) {
        width: 90%;
        margin: 5% auto 0;
    }
    #ch .contents .flex.cnt .box .sub-txt{
        text-align: center;
    }

    #ch .contents .flex.cnt .box .link{
       margin: 3% auto 0;
       width: 80%;
    }
    #ch .contents .flex.cnt .box .link a:nth-of-type(1){
        width: 50%;
    }
    #ch .contents .flex.cnt .box .link a span.ig{
        width: 24px;
    }
    #ch .contents .flex.cnt .box .link a:nth-of-type(2){
        width: 50%;
    }
    #ch .contents .flex.cnt .box .link a span.stb{
        display: block;
        margin: -8px auto 0;
    }
}
@media only screen and (max-width: 768px)  {
    #ch .contents .flex.cnt {
        margin-top: 15%;
    }
    #ch .contents .txt.top2{
        margin-top: 5%;
    } 
}
/************* .flex.base *****************/
#ch .contents .flex.base {
    align-items:end;
    justify-content: space-between;
    width: 80%;
    margin-top: 8%;
}
#ch .contents .flex.base .box .img{
    line-height: 0;
    width: 100%;
}
#ch .contents .flex.base .box .img.wi70{
    width: 70%;
}
#ch .contents .flex.base .box:nth-of-type(1) {
    width: 49%;
}
#ch .contents .flex.base .box:nth-of-type(2) {
    width: 49%;
}
#ch .contents .flex.base .box .sub-txt {
    font-size: 10px;
}
@media only screen and (max-width: 768px)  {
    #ch .contents .flex.base {
        width: 100%;
        margin-top: 25%;
    }
    #ch .contents .flex.base .box:nth-of-type(1) {
        width: 100%;
    }
    #ch .contents .flex.base .box:nth-of-type(2) {
        width: 100%;
    }
    #ch .contents .flex.base .box:nth-of-type(2) .img{
        width: 80%;
        margin-left: 10%;
        margin-top: 10%;
    }
}

/************* .flex.irre *****************/

#ch .contents .flex.irre {
    justify-content: space-around;
    width: 70%;
    margin-top: 8%;
}
#ch .contents .flex.irre .box:nth-of-type(1){
    width: 40%;
    padding-top: 5%;
}
#ch .contents .flex.irre .box:nth-of-type(2){
    width: 50%;
}
@media only screen and (max-width: 768px)  {
    #ch .contents .flex.irre {
        width: 100%;
        margin-top: 20%;
    }
    #ch .contents .flex.irre .box:nth-of-type(1){
        width: 100%;
        padding-top: 5%;
    }
    #ch .contents .flex.irre .box:nth-of-type(2){
        width: 60%;
        margin: 5% 0 0 auto;
    }
}
/************* .flex.irre2 *****************/
#ch .contents .flex.irre2 {
    align-items: end;
    justify-content: space-between;
    width: 70%;
    margin-top: -5%;
}
#ch .contents .flex.irre2 .box:nth-of-type(1){
    width: 45%;
}
#ch .contents .flex.irre2 .box:nth-of-type(1) img{
    width: 80%;
    margin-left: 20%;
}
#ch .contents .flex.irre2 .box:nth-of-type(2){
    width: 52%;
}
#ch .contents .flex.irre2 .box .sub-txt {
    font-size: 10px;
}

@media only screen and (max-width: 768px)  {
    #ch .contents .flex.irre2 {
        align-items: end;
        justify-content: space-between;
        width: 100%;
        margin-top: -30%;
        display: flex;
    }
    #ch .contents .flex.irre2 .box:nth-of-type(1){
        width: 50%;
    }
    #ch .contents .flex.irre2 .box:nth-of-type(1) img{
        width: 100%;
        margin-left: 0%;
    }
    #ch .contents .flex.irre2 .box:nth-of-type(2){
        width: 48%;
    }
}

/************************************************************
                footer 
************************************************************/
#ch .footer{
    background-color: #000;
    width: 100%;
    margin-top: 5%;
    padding: 2% 0;
}

#ch .footer .logo{
    width: 10%;
    margin: 0 auto;
    min-width: 80px;
}
#ch .footer .co{
    text-align: center;
    font-size: 10px;
    margin-top:1%;
    color: #fff;
}
@media only screen and (max-width: 768px)  {
    #ch .footer {
        margin-top: 15%;
        padding: 5% 0;
    }
    #ch .footer .co{
        margin-top:2%;
        scale: 0.9;
    }
}


/************************************************************
                動き
************************************************************/
/* 
.lo{
    opacity: 0;
    transition: 1.6s all 0s ease;
}
.lo.sr{
    opacity: 1;
} */


#ch .line {
    width: 50%;
    margin: 5% auto;
}
@media only screen and (max-width: 768px)  {
    #ch .line {
    width: 100%;
    }
}