@charset "utf-8";
/* CSS Document */
/*共通*/
body {
  font-family: 'Noto Sans JP', sans-serif;
}
a{
    text-decoration: none;
    color: rgb(82, 81, 81);
}
img{
    width: 100%;
}
body{
    margin: 0px;
}
@media screen and (min-width: 1025px){

/* トップメニュー */
.top-container{
    margin: 0px;
    background-color: rgb(253, 253, 253);
    width: 100%;
 }
.top{
    margin: 0px auto 5px auto;
    width: 80%;
    max-width: 1300px;
    display: grid;
    grid-template-columns: 1fr 5fr;
}
.logo{
    width: 5%;
    min-width: 85px;
    margin: 20px auto 10px auto;
}
.main-link{
    width: 95%;
    display: grid;
    grid-template-columns:auto 1px 115px 1px 100px 1px; 
    gap: 20px;
}
.link {
    align-self: end;    /* 垂直方向：下 */
    justify-self: end;  /* 水平方向：右 */
    font-size: 0.85rem;
}

.link-bar{
    background-color: rgb(158, 156, 156);
    height: 30%;
    align-self: end;
}

.link p{
    margin: 50px auto 0px auto;
    text-align: center;
    font-weight: 500;
}
.top-list{
    width: 100%;
    margin: 0px;
    background-color: rgb(248, 248, 248);
}
.top-list-content{
    width: 80%;
    max-width: 1300px;
    display:flex;
    flex-flow: row wrap;
    margin: 0px auto 0px auto;
    column-gap: 10px;
    font-size: 0.8rem;
}
hr{
    margin-bottom: 0px;
}
/*メインコンテンツ*/
.main-container{
    width: 100%;
    background-color: white;
}
.main{
    margin: 50px auto;
    width: 70%;
    max-width: 1300px;
    display: grid;
    grid-template-columns: 2fr 4fr;
    grid-template-rows: auto;
    grid-template-areas:
    "main-image title"
    "main-image main-text"
    ;
}
.title{
    grid-area:title ;
}
.series{
    font-size :1.4rem;
    padding-left: 30px;
}
.main-image{
    grid-area: main-image;
    width: 80%;
    margin: auto;
}
.main-text{
    grid-area: main-text;
    padding: 10px 50px 10px 50px;
}
.main-text li{
    margin: 0px 0px 0px 20px;
}
.function{
    margin: 50px auto;
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
}
.function-icon{
    width: 60px;
}
/*対応フィルタ・吸収缶*/
.filter-container{
    margin: 0px;
    width: 100%;
}
.filter-content{
    margin: 50px auto;
    width: 70%;
    max-width: 1300px;
}
.filter-item{
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap:30px;
}
.filter-text{
    padding: 10px 50px 10px 50px;
}
.filter-text li{
    margin: 0px 0px 0px 20px;
}
/*対象商品*/
.product-container{
    margin: 0px;
    width: 100%;
}
.product-content{
    margin: 50px auto;
    width: 70%;
    max-width: 1300px;
}
.product-content h2{
    background-color: rgb(249, 249, 254);
    padding-left: 50px;
}
.product-item {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap:50px;
}
.product-card {
    width: 15%;
    min-width: 150px;
    gap: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgb(226, 226, 226);
}
/* もどる*/
.back{
    width: 400px;
    margin: 50px auto;
    text-align: center;
}
.back p{
    font-size: 1.0rem;
    color: rgb(82, 81, 81);
    border-radius: 10px;
    background-color: rgb(244, 248, 252);
    width: 400px;
    margin: auto;
    padding: 10px 20px;
}
.back p:hover{
    background-color: rgb(183, 183, 183);
    color: white;
}
/* フッター */
.footer-container{
    margin: 0px;
    width: 100%;
    background-color: rgb(240, 239, 239);
}
.footer-content{
    width: 80%;
    max-width: 1300px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.footer-container p{
    font-size: 0.8rem;
    text-align: center;
}
.footer-logo{
    width: 100%;
    max-width: 100px;
    padding: 50px 150px;
}
.footer-link{
    width: 100%;
    display: grid;
    grid-template-columns:auto 150px 150px 120px 100px;
    align-items: center;
    justify-items: end;
}
.footer-link-item{
    width: 100%;
}
}
/* ===== タブレット ===== */
@media screen and (min-width: 481px) and (max-width: 1024px){
/* トップメニュー */
.top-container{
    margin: 0px;
    background-color: rgb(253, 253, 253);
    width: 100%;
 }
.top{
    margin: 0px auto 5px auto;
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 5fr;
}
.logo{
    width: 5%;
    min-width: 85px;
    margin: 20px auto 10px auto;
}
.main-link{
    width: 80%;
    display: grid;
    grid-template-columns:auto 1px 115px 1px 100px 1px; 
    gap: 20px;
}
.link {
    align-self: end;    /* 垂直方向：下 */
    justify-self: end;  /* 水平方向：右 */
    font-size: 0.85rem;
}

.link-bar{
    background-color: rgb(158, 156, 156);
    height: 30%;
    align-self: end;
}

.link p{
    margin: 50px auto 0px auto;
    text-align: center;
    font-weight: 500;
}
.top-list{
    width: 100%;
    margin: 0px;
    background-color: rgb(248, 248, 248);
}
.top-list-content{
    width: 80%;
    display:flex;
    flex-flow: row wrap;
    margin: 0px auto 0px auto;
    column-gap: 10px;
    font-size: 0.8rem;
}
hr{
    margin-bottom: 0px;
}
/*メインコンテンツ*/
.main-container{
    width: 100%;
    background-color: white;
}
.main{
    margin: 50px auto;
    width: 90%;
    display: grid;
    grid-template-columns: 2fr 4fr;
    grid-template-rows: auto;
    grid-template-areas:
    "main-image title"
    "main-image main-text"
    ;
}
.title{
    grid-area:title ;
}
.series{
    font-size :1.4rem;
    padding-left: 30px;
}
.main-image{
    grid-area: main-image;
    width: 80%;
    margin: auto;
}
.main-text{
    grid-area: main-text;
    padding: 10px 50px 10px 50px;
}
.main-text li{
    margin: 0px 0px 0px 20px;
}
.function{
    margin: 50px auto;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
}
.function-icon{
    width: 60px;
}
/*対応フィルタ・吸収缶*/
.filter-container{
    margin: 0px;
    width: 100%;
}
.filter-content{
    margin: 50px auto;
    width: 90%;
}
.filter-item{
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap:30px;
}
.filter-text li{
    margin: 0px 0px 0px 20px;
}
/*対象商品*/
.product-container{
    margin: 0px;
    width: 100%;
}
.product-content{
    margin: 50px auto;
    width: 90%;
}
.product-content h2{
    background-color: rgb(249, 249, 254);
    padding-left: 50px;
}
.product-item {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap:50px;
}
.product-card {
    width: 15%;
    min-width: 150px;
    gap: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgb(226, 226, 226);
}
/* もどる*/
.back{
    width: 400px;
    margin: 50px auto;
    text-align: center;
}
.back p{
    font-size: 1.0rem;
    color: rgb(82, 81, 81);
    border-radius: 10px;
    background-color: rgb(216, 216, 216);
    width: 400px;
    margin: auto;
    padding: 10px 20px;
}
.back p:hover{
    background-color: rgb(183, 183, 183);
    color: white;
}
/* フッター */
.footer-container{
    margin: 0px;
    width: 100%;
    background-color: rgb(240, 239, 239);
}
.footer-content{
    width: 90%;
    margin: auto;;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 50px 0px;
    gap: 20px;
}
.footer-container p{
    font-size: 0.8rem;
    text-align: center;
}
.footer-logo{
    width: 80%;
    max-width: 80px;
    margin:auto;
}
.footer-link{
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    gap: 20px;
    align-items: center;
    justify-content: end;
}
.footer-link-item{
    width: 50%;
}
.footer-link-item li{
    font-size: 0.9rem;
}
}
/* ===== スマホ ===== */
@media screen and (max-width: 480px){
/* トップメニュー */
.top-container{
    margin: 0px;
    background-color: rgb(253, 253, 253);
    width: 100%;
 }
.top{
    margin: 0px auto 0px auto;
    width: 80%;
    display: flex;
    flex-flow: column;
}
.logo{
    width: 5%;
    min-width: 85px;
    margin: 20px auto 10px auto;
}
.main-link{
    width: 80%;
    display: grid;
    grid-template-columns:auto 1px 115px 1px 100px 1px; 
    gap: 20px;
}
.link {
    align-self: end;    /* 垂直方向：下 */
    justify-self: end;  /* 水平方向：右 */
    font-size: 0.85rem;
}

.link-bar{
    background-color: rgb(158, 156, 156);
    height: 30%;
    align-self: end;
}

.link p{
    margin: 50px auto 0px auto;
    text-align: center;
    font-weight: 500;
}
.top-list{
    width: 100%;
    margin: 0px;
    background-color: rgb(248, 248, 248);
}
.top-list-content{
    width: 80%;
    display:flex;
    flex-flow: row wrap;
    margin: 0px auto 0px auto;
    gap: 10px;
    font-size: 0.8rem;
}
hr{
    margin-bottom: 0px;
}
/*メインコンテンツ*/
.main-container{
    width: 100%;
    background-color: white;
}
.main{
    margin: 50px auto;
    width: 94%;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
    "title"
    "main-image"
    "main-text"
    ;
}
.title{
    grid-area:title ;
}
.series{
    font-size :1.4rem;
    padding-left: 30px;
}
.main-image{
    grid-area: main-image;
    width: 80%;
    margin: auto;
}
.main-text{
    grid-area: main-text;
    padding: 10px 10px 10px 10px;
}
.main-text li{
    margin: 0px 0px 0px 20px;
}
.function{
    margin: 50px auto;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
}
.function-icon{
    width: 60px;
}
/*対応フィルタ・吸収缶*/
.filter-container{
    margin: 0px;
    width: 100%;
}
.filter-content{
    margin: 50px auto;
    width: 90%;
}
.filter-item{
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    gap:30px;
}
.filter-text li{
    margin: 0px 0px 0px 20px;
}

/*対象商品*/
.product-container{
    margin: 0px;
    width: 100%;
}
.product-content{
    margin: 50px auto;
    width: 90%;
}
.product-content h2{
    background-color: rgb(249, 249, 254);
    padding-left: 10px;
}
.product-item {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap:20px;
}
.product-card {
    width: calc(33.33% - 15px);
    /*min-width: 150px;*/
    gap: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgb(226, 226, 226);
}
/* もどる*/
.back{
    width: 350px;
    margin: 50px auto;
    text-align: center;
}
.back p{
    font-size: 0.9rem;
    color: rgb(82, 81, 81);
    border-radius: 10px;
    background-color: rgb(216, 216, 216);
    width: 100%;
    margin: auto;
    padding: 10px 5px;
}
/* フッター */
.footer-container{
    margin: 0px;
    width: 100%;
    background-color: rgb(240, 239, 239);
}
.footer-content{
    width: 90%;
    margin: auto;;
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 50px 0px;
    gap: 20px;
}
.footer-container p{
    font-size: 0.8rem;
    text-align: center;
}
.footer-logo{
    width: 80%;
    max-width: 80px;
    margin:auto;
}
.footer-link{
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    gap: 20px;
    align-items: center;
    justify-content: end;
}
.footer-link-item{
    width: 50%;
}
.footer-link-item li{
    font-size: 0.9rem;
}
}