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

/*PC*/
@media screen and (min-width:481px) {

/*目次*/
#sdgs .select_p {
    padding: 30px 0;
    border-top: 1px solid #D1D1D1;
    border-bottom: 1px solid #D1D1D1;
}
#sdgs .select_p ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#sdgs .select_p ul li {
    max-width: 80px;
}
#sdgs .select_p ul img {
    width: 100%;
}
/*アイコン*/
#sdgs .talk .penta {
    background-image: url(https://araitai.itembox.design/item/item_images/campaign/sdgs/icon01.jpg);
    background-repeat: no-repeat;
    background-size: 12% auto;
    padding-left: 16%;
    padding-top: 10px;
    margin-bottom: 30px;
}
#sdgs .talk .panko {
    background-image: url(https://araitai.itembox.design/item/item_images/campaign/sdgs/icon02.jpg);
    background-repeat: no-repeat;
    background-size: 12% auto;
    padding-left: 16%;
    padding-top: 10px;
    margin-bottom: 30px;
}
#sdgs .talk .nekomi {
    background-image: url(https://araitai.itembox.design/item/item_images/campaign/sdgs/icon03.jpg);
    background-repeat: no-repeat;
    background-size: 12% auto;
    padding-left: 16%;
    padding-top: 10px;
    margin-bottom: 30px;
}
#sdgs .talk .kaba {
    background-image: url(https://araitai.itembox.design/item/item_images/campaign/sdgs/icon04.jpg);
    background-repeat: no-repeat;
    background-size: 12% auto;
    padding-left: 16%;
    padding-top: 10px;
    margin-bottom: 30px;
}
/*おさらい*/
#sdgs #check dl dd {
    font-size: 20px;
    line-height: 1.5em;
    margin-bottom: 30px;
}
#sdgs #check dl dd i {
    font-size: 130%;
    vertical-align: middle;
    color: #8BD529;
    margin-right: 10px;
}
/*他のアイテム*/
#sdgs .item_list {
    margin: 0 calc(50% - 50vw);/*サイドぶちぬき*/
    width: 100vw;/*サイドぶちぬき*/
    background-color: #F4F4F4;
    padding: 50px 15% 10px;
}
#sdgs .item_list nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#sdgs .item_list nav a {
    max-width: 32%;
    border-bottom: 50px solid #F4F4F4;
    font-size: 16px;
    line-height: 1.5em;
    padding-left:initial;
    padding-right:initial;
}
#sdgs .item_list nav a img {
    width: 100%;
    margin-bottom: 10px;
}
#sdgs .item_list nav a {
    color: #333;
}
#sdgs .item_list nav a:hover {
    text-decoration: underline;
}
/*サステナブルアイコン位置*/
#sdgs .bag, #sdgs .bag_l {
    position: relative;
}
#sdgs .bag i {
  position: absolute;
  top: -6%;
  left: 75%;
  right: -10px;
  margin:0;/*余計な隙間を除く*/
  padding:0;/*余計な隙間を除く*/
}
#sdgs .bag_l i {
  position: absolute;
  top: -6%;
  right: -10px;
  margin:0;/*余計な隙間を除く*/
  padding:0;/*余計な隙間を除く*/
}
#sdgs .item_list .bag i img, #sdgs .item_list .bag_l i img {
  width: 120px;
}

}



/*タブレット対応*/
@media screen and (min-width: 600px) {
#sdgs .item_list {
    margin: 0 calc(50% - 50vw);/*サイドぶちぬき*/
    width: 100vw;/*サイドぶちぬき*/
    background-color: #F4F4F4;
    padding: 50px 5% 10px;
}
#sdgs .item_list nav a {
    max-width: 32%;
    border-bottom: 50px solid #F4F4F4;
    font-size: 16px;
    line-height: 1.5em;
    padding-left:initial;
    padding-right:initial;
}
}

/*スマホ*/
@media screen and (max-width:480px) {

/*目次*/
#sdgs .select_p {
    padding: 20px 0;
    border-top: 1px solid #D1D1D1;
    border-bottom: 1px solid #D1D1D1;
}
#sdgs .select_p ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#sdgs .select_p ul li {
    width: 18%;
}
/*アイコン*/
#sdgs .talk .penta {
    background-image: url(https://araitai.itembox.design/item/item_images/campaign/sdgs/icon01.jpg);
    background-repeat: no-repeat;
    background-size: 17% auto;
    padding-left: 20%;
    margin-bottom: 30px;
}
#sdgs .talk .panko {
    background-image: url(https://araitai.itembox.design/item/item_images/campaign/sdgs/icon02.jpg);
    background-repeat: no-repeat;
    background-size: 17% auto;
    padding-left: 20%;
    margin-bottom: 30px;
}
#sdgs .talk .nekomi {
    background-image: url(https://araitai.itembox.design/item/item_images/campaign/sdgs/icon03.jpg);
    background-repeat: no-repeat;
    background-size: 17% auto;
    padding-left: 20%;
    margin-bottom: 30px;
}
#sdgs .talk .kaba {
    background-image: url(https://araitai.itembox.design/item/item_images/campaign/sdgs/icon04.jpg);
    background-repeat: no-repeat;
    background-size: 17% auto;
    padding-left: 20%;
    margin-bottom: 30px;
}
/*おさらい*/
#sdgs #check dl dd {
    font-size: 16px;
    line-height: 1.5em;
    margin-bottom: 30px;
}
#sdgs #check dl dd i {
    font-size: 16px;
    vertical-align: middle;
    color: #8BD529;
    margin-right: 10px;
}
/*他のアイテム*/
#sdgs .item_list {
    background-color: #F4F4F4;
    padding: 30px 20px 10px;
}
#sdgs .item_list p {
    font-size: 16px;
    line-height: 1.5em;
}
#sdgs .item_list nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#sdgs .item_list nav a {
    width: 47%;
    border-bottom: 20px solid #F4F4F4;
    font-size: 140%;
    line-height: 1.5em;
}
#sdgs .item_list nav a img {
    margin-bottom: 10px;
}
/*サステナブルアイコン位置*/
#sdgs .bag, #sdgs .bag_l {
    position: relative;
}
#sdgs .bag i {
  position: absolute;
  top: -10%;
  left: 70%;
  right: -3%;
  margin:0;/*余計な隙間を除く*/
  padding:0;/*余計な隙間を除く*/
}
#sdgs .bag_l i {
  position: absolute;
  top: -10%;
  right: 70%;
  margin:0;/*余計な隙間を除く*/
  padding:0;/*余計な隙間を除く*/
}
#sdgs .item_list .bag i img, #sdgs .item_list .bag_l i img {
  width: 80px;
}

}