@charset "utf-8";

/*------------------------------------------------------------
[SP]
------------------------------------------------------------ */
@media screen and (max-width:767px){

/*------------------------------------------------------------
[SP] main_visual
------------------------------------------------------------ */
#suntory_contents .main_visual {
  margin: 8vw 0;
  display:flex;
    flex-flow: column nowrap;
}
#suntory_contents .main_visual h1 {
  margin: 0 4vw 8vw;
  font-size: 5.6vw;
  font-weight: normal;
  text-align: center;
order: 1;
}
#suntory_contents .main_visual .lead {
  font-size: 3.466666666666667vw;
  line-height: 1.8;
  order: 3;
    margin: 0 4vw;
}
#suntory_contents .main_visual picture {
  margin: 0 0 8vw;
  width: 100vw;
  height: 44.635417vw;
  order: 2;
}
#suntory_contents .main_visual picture img {
  width: 100%;
}


/*------------------------------------------------------------
[SP] collection_contents
------------------------------------------------------------ */
#suntory_contents .collection_contents  {
  margin: 0 4vw;
  padding: 0 0 16vw;
}

/*------------------------------------------------------------
[SP] menu
------------------------------------------------------------ */
#suntory_contents ul.menu {
  list-style: none;
  display:block;
}
#suntory_contents .menu li {
  display: block;
margin: 0 auto;
  width: 76vw;
}
#suntory_contents .menu li + li {
  margin-top: 6.4vw;
}
#suntory_contents .menu li a {
  box-sizing: border-box;
  position: relative;
  display: block;
  padding: 5.6vw 0 4vw 5.6vw;
  text-decoration: none;
  border: 1px solid #A89170;
  position: relative;
  color: #000;
}
#suntory_contents .menu li a::after{
  content: '';
  width: 3.2vw;
  height: 5.86666667vw;
  background: url(../img/arrow_right_large_gr.svg) no-repeat 0 center / 3.2vw auto;
  position: absolute;
  top: calc(50% - 2.93333333vw);
  right: 4vw;
}
#suntory_contents .menu li a h2 {
  font-size: 4.8vw;
  font-weight: normal;
  line-height: 1;
}
#suntory_contents .menu li a p {
  padding: 3.2vw 0 0;
  font-size: 3.46666667vw;
  line-height: 1.8;
}

}
/*------------------------------------------------------------
[PC]
------------------------------------------------------------ */
@media print, screen and (min-width:768px) {

/*------------------------------------------------------------
[PC] main_visual
------------------------------------------------------------ */
#suntory_contents .main_visual {
  margin: 0 auto 50px;
  width: 960px;
}
#suntory_contents .main_visual h1 {
  margin-bottom: 50px;
  font-size: 28px;
  font-weight: normal;
  text-align: center;
}
#suntory_contents .main_visual .lead {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 50px;
}
#suntory_contents .main_visual picture {
  height: 429px;
  width: 100%;
}
#suntory_contents .main_visual picture img {
  width: 100%;
}

/*------------------------------------------------------------
[PC] collection_contents
------------------------------------------------------------ */
#suntory_contents .collection_contents  {
  margin-bottom: 110px;
}

/*------------------------------------------------------------
[PC] menu
------------------------------------------------------------ */
#suntory_contents ul.menu {
  list-style: none;
  display:flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
}
#suntory_contents .menu li {
  display: block;
  width: 310px;
}
#suntory_contents .menu li a {
  box-sizing: border-box;
  position: relative;
  display: block;
  padding: 25px 0 20px 24px;
  text-decoration: none;
  border: 1px solid #A89170;
  color: #000;
}
#suntory_contents .menu li a::after{
  content: '';
  width: 12px;
  height: 20px;
  background: url(../img/arrow_right_large_gr.svg) no-repeat right center / auto 20px;
  position: absolute;
  top: calc(50% - 10px);
  right: 15px;
}
#suntory_contents .menu li a h2 {
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
}
#suntory_contents .menu li a p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
}
#suntory_contents .menu li a:hover{
  background: #C6B59D;
  border: 1px solid #C6B59D;
}
#suntory_contents .menu li a:hover{
  color: #fff;
}
#suntory_contents .menu li a:hover::after{
  background: url(../img/arrow_right_large_wh.svg) no-repeat right center / auto 20px;
}


}