/*FIRSTVIEW START*/
.firstView{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.firstView__container{
    width: 350px;
    height: 550px;
}

.large__container{
    height: auto;
}

    /*SHOPLIST START*/
    .shopList__container__outer{
        width: 100%;
        height: auto;
    }

        .shopList__container__inner{
            width: 100%;
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .fifthRow{
            height: auto;
            flex-direction: column;
            height: auto;
        }

            .fifthRow h2{
                font-family: "Noto Sans JP", sans-serif;
                font-optical-sizing: auto;
                font-weight: 700;
                font-style: normal;
                font-size: 20px;
                line-height: 1.3rem;
                text-align: center;
                width: 24rem;
                padding-top: 20px;
            }

            .fifthRow .fifthRow__repos{
                width: 22rem;
                color: #945E8D;
            }

            .fifthRow .fifthRow__taoyaka{
                width: 18rem;
            }

            .fifthRow .fifthRow__okoto{
                width: 19rem;
            }

            .fifthRow .fifthRow__hakoniwa{
                width: 21rem;
            }

            .fifthRow__large{
                font-size: 24px;
                color: #009944;
            }

            .fifthRow__large__color{
                color: #BCBACE;
            }

            .fifthRow__large__orchid{
                color: #AF0082;
                font-size: 24px;
            }

            .fifthRow__large__lightgreen{
                color: #C7DC68;
            }

            .fifthRow__large__green{
                color:  #009944;
            }

            .fifthRow__large__coffee{
                color: #562E00;
                font-size: 24px;
            }

            .fifthRow__large__pink{
                color: #feb6dc;
                font-size: 24px;
            }

            .fifthRow p{
                font-family: "Noto Sans JP", sans-serif;
                font-optical-sizing: auto;
                font-weight: 200;
                font-style: normal;
                font-size: 16px;
                line-height: 1.3rem;
            }

                .shopList__container__inner__shop{
                    width: 110px;
                    height: 110px;
                    background-size: cover;
                    background-position: center;
                }

    @media(min-width: 768px){
        .fifthRow__large{
            font-size: 28px;
        }

        .fifthRow .fifthRow__okoto, .fifthRow .fifthRow__hakoniwa{
            width: 100%;
        }

        .fifthRow .fifthRow__taoyaka{
            width: 100%;
        }

        .fifthRow h2{
            width: 100%;
        }

        .fifthRow{
            margin-top: 10px;
        }

        .shopList__container__inner__shop{
            width: 160px;
            height: 160px;
        }

        .shopList__container__inner{
            flex-direction: column;
            height: auto;
        }

        .shopList__container__outer{
            display: flex;
            height: auto;
        }

        .firstView__container{
            width: 768px;
            max-width: 1280px;
        }
    }

/*SHOPLIST END*/

/*INFORMATION START*/
.information{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
}

.information__container{
    width: 350px;
    height: auto;
    margin-top: 50px;
}

    .information__container__heading{
        width: 100%;
        height: 40px;
        display: grid;
        place-items: center;
    }

        .information__container__heading h2{
            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 20px;
            border-bottom: solid 5px #FADBDA;
            width: 100%;
        }
    
    .information__container__contents{
        width: 100%;
        height: auto;
        margin-top: 10px;
        display: flex;
    }

        .information__container__contents__label{
            width: 150px;
            height: auto;
            border-bottom: dashed 0.5px #d9d9d9;
            text-align: right;
        }

        .taoyaka__label__ver{
            width: 100px;
        }

            .information__container__contents__label p, .information__container__contents__overview p{
                font-family: "Noto Sans JP", sans-serif;
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;
                font-size: 16px;
            }

            .information__container__contents__overview p a:hover{
                cursor: pointer;
                color: #0000ff;
            }

        .information__container__contents__overview{
            width: 200px;
            height: auto;
            border-bottom: dashed 0.5px #d9d9d9;
        }

        .taoyaka__overview__ver{
            width: 250px;
        }


@media(min-width: 768px){
    .information__container__contents__label p, .information__container__contents__overview p{
        font-size: 20px;
    }

    .information__container__contents__label{
        width: 250px;
    }

    .information__container__contents__overview{
        width: 100%;
    }
    
    .information__container{
        width: 768px;
    }
}

/*INFORMATION END*/

/*RECOMMEND START*/
.recommend{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
}

.recommend__container{
    width: 350px;
    height: auto;
    margin-top: 50px;
}

    .recommend__container__heading{
        width: 100%;
        height: 40px;
        display: grid;
        place-items: center;
    }

        .recommend__container__heading h2{
            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 20px;
            border-bottom: solid 5px #FADBDA;
            width: 100%;
        }

    .recommend__container__contents{
        width: 100%;
        height: auto;
    }

        .recommend__container__contents__inner{
            display: flex;
            flex-direction: column;
        }

            .recommend__container__contents__inner p{
                font-family: "Noto Sans JP", sans-serif;
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;
                font-size: 20px;
                margin-top: 10px;
                line-height: 2rem;
                display: inline-block;
            }

        .recommend__container__contents p{
            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 20px;
            margin-top: 10px;
            line-height: 2rem;
        }

            .recommend__text__large{
                font-size: 24px;
                font-weight: 700;
            }

    .recommend__container__under{
        width: 100%;
        height: auto;
        margin-top: 50px;
    }

        .recommend__container__under p{
            font-family: "Sawarabi Mincho", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 16px;
            line-height: 1.5rem;
        }

@media(min-width: 768px){
    .recommend__container__contents__inner{
        flex-direction: row;
    }

    .recommend__container__contents{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .recommend__container{
        width: 768px;
    }
}
/*RECOMMEND END*/

/*ARTICLE START*/
.article{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
}

.article__container{
    width: 350px;
    height: auto;
    margin-top: 50px;
}

    .article__container__heading{
        width: 100%;
        height: auto;
        display: grid;
        place-items: center;
    }

        .article__container__heading h2, .article__container__heading p{
            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 20px;
            border-bottom: solid 5px #FADBDA;
            width: 100%;
        }

        .article__container__heading p{
            font-size: 16px;
            border: none;
            margin-top: 10px;
            margin-bottom: 10px;
        }

    .article__container__contents{
        width: 100%;
        height: 700px;
    }

        .article__container__contents__image, .article__container__contents__text{
            width: 350px;
            height: 350px;
        }

            .article__container__contents__image img{
                width: 350px;
                height: 350px;
            }

            .article__container__contents__text article h3, .article__container__contents__text article p{
                font-family: "Noto Sans JP", sans-serif;
                font-optical-sizing: auto;
                font-weight: 700;
                font-style: normal;
                font-size: 20px;
                margin-top: 10px;
            }

            .article__container__contents__text article p{
                font-size: 16px;
                font-weight: 400;
                line-height: 1.2rem;
            }
    
@media(min-width: 768px){
    .article__reverse{
        flex-direction: row-reverse;
    }

    .article__container__contents{
        display: flex;
        gap: 20px;
        justify-content: center;
        height: 370px;
    }

    .article__container{
        width: 768px;
    }
}

/*ARTICLE END*/

/*PROFILE START*/
.profile{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
}

.profile__container{
    width: 350px;
    height: auto;
    margin-top: 50px;
    box-shadow: 3px 3px 3px 2px rgba(0, 0, 0, 0.5);
}

    .profile__container__heading{
         width: 100%;
        height: auto;
        display: grid;
        place-items: center;
        padding-top: 10px;
    }

        .profile__container__heading h2{
            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 20px;
            border-bottom: solid 5px #FADBDA;
            width: 100%;
        }

    .profile__container__contents{
        width: 100%;
        height: 700px;
    }

        .profile__container__contents__left, .profile__container__contents__right{
            width: 350px;
            height: 350px;
        }

@media(min-width: 768px){
    .profile__container__contents__left, .profile__container__contents__right{
        width: 374px;
    }

    .profile__container__contents{
        display: flex;
        gap: 20px;
        height: auto;
    }

    .profile__container{
        width: 768px;
    }
}

            .profile__container__contents__left__image{
                width: 100%;
                height: 200px;
                display: grid;
                place-items: center;
            }

                .profile__container__contents__left__image img{
                    width: 170px;
                    height: 170px;
                }

            .profile__container__contents__left h3, .profile__container__contents__left p, .profile__container__contents__right p{
                font-family: "Noto Sans JP", sans-serif;
                font-optical-sizing: auto;
                font-weight: 700;
                font-style: normal;
                font-size: 16px;
            }

            .profile__container__contents__left h3{
                text-align: center;
            }

            .profile__container__contents__left p{
                font-weight: 400;
                margin-top: 10px;
            }

            .profile__container__contents__right p{
                font-weight: 400;
                line-height: 1.3rem;
            }
/*PROFILE END*/

/*CTA START*/
.cta{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
}

.cta__container{
    width: 350px;
    height: auto;
    margin-top: 50px;
}

    .cta__container__left, .cta__container__right{
        width: 350px;
        height: 150px;
    }

    .cta__container__left{
        background-color: #FEECD2;
    }

        .cta__container__left p, .cta__container__left h3{
            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 16px;
            line-height: 1.5rem;
            margin-top: 10px;
        }

        .cta__container__left h3{
            font-weight: 700;
        }

        .cta__container__right p{
            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: 700;
            font-style: normal;
            font-size: 20px;
            text-align: center;
            margin-top: 10px;
        }

        .cta__container__right .cta__large{
            font-size: 24px;
        }

        .cta__container__right__image{
            width: 100%;
            height: 90px;
            display: grid;
            place-items: center;
        }

            .cta__container__right__image img{
                width: auto;
                height: 90px;
            }


@media(min-width: 768px){
    .cta__container__left h3{
        text-align: center;
    }

    .cta__container__left, .cta__container__right{
        width: 374px;
    }

    .cta__container{
        width: 768px;
        display: flex;
        gap: 20px;
    }
}
/*CTA END*/