@charset "utf-8";

#suntory_content {
  width: 100%;
  padding: 0;
}

#contents {
  padding: 0;
}

.main_bg img {

  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.wrap p {
  padding: 0;
  margin: -1px auto 0;
}

.relative {
  position: relative;
}

.wrap {
  width: 100%;
  margin: 0 auto;
  background: #fff;
}

.main_bg {
  overflow: hidden;
}

.hover:hover {
  opacity: .8;
}

.img_center {
  position: absolute;
  width: 100%;
}


.txt_center {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  font-size: 18px;
}

.txt_center p {
  transform: translateX(-50%);
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
}


/* btn
--------------------------------------------- */
.btn_center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85.5vw;
  overflow: hidden;
}

.btn_center_2 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 81.5vw;
  overflow: hidden;
}

.btn_shiny {
  position: absolute;
  top: 0;
  left: 0;
  width: 25vw;
  height: 100%;
  top: 0;
  transform: skew(20deg, 0deg);
  -webkit-transform: skew(20deg, 0deg);
  /* background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0))); */
  background-image: -webkit-gradient(liner,left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(000, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(000, 255, 255, 0) 100%);
  background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(000, 255, 255, 0) 100%);
}

/* fv
--------------------------------------------- */
#hexagon_01 {
  position: absolute;
  top: 57.7333vw;
  left: 58.0vw;
  width: 25.3333vw;
}
#hexagon_02 {
  position: absolute;
  top: 68.2666vw;
  left: 76.1333vw;
  width: 25.3333vw;
}
#hexagon_03 {
  position: absolute;
  top: 78.8vw;
  left: 58.0vw;
  width: 25.3333vw;
}

/* content
--------------------------------------------- */
.content_btn {
  position: absolute;
  top: 89.0666vw;
  left: 0;
  overflow: hidden;
  right: 0;
  margin: 0 auto;
  width: 87.7333vw;
}

.content01_icon {
  position: absolute;
  top: 29.6vw;
  right: 4.6666vw;
  width: 28.1333vw;
  transform-origin: left bottom;
}

input[type="checkbox"], input[type="radio"] {
    appearance: none;
    display: none;
}
#cL01 {
  position: absolute;
  top: 0;
  width: 80vw;
  transform: translateX(-50%);
  left: 50%;
}

.webp #cL01 label {
  display: block;
  height: 13.8666vw;
  background: 90% url("https://838b311d46dc2310ea26750bf0a20f37.cdnext.stream.ne.jp/50/BD/pw2s/bdsp/sp/idbs06/img/btn01_off.webp") no-repeat;
  margin-bottom: 2.1333vw;
  border-radius: 2vw;
}
.no-webp #cL01 label {
  display: block;
  height: 13.8666vw;
  background: 90% url("https://838b311d46dc2310ea26750bf0a20f37.cdnext.stream.ne.jp/50/BD/pw2s/bdsp/sp/idbs06/img/btn01_off.png") no-repeat;
  margin-bottom: 2.1333vw;
  border-radius: 2vw;
}
.webp #cL01 input[type="checkbox"]:checked + label {
  background: 90%  url("https://838b311d46dc2310ea26750bf0a20f37.cdnext.stream.ne.jp/50/BD/pw2s/bdsp/sp/idbs06/img/btn01_on.webp") no-repeat;
}
.no-webp #cL01 input[type="checkbox"]:checked + label {
  background: 90%  url("https://838b311d46dc2310ea26750bf0a20f37.cdnext.stream.ne.jp/50/BD/pw2s/bdsp/sp/idbs06/img/btn01_on.png") no-repeat;
}

.q1_tap_cont {
  overflow: hidden;
  height: 0;
  transition: all .25s ease;
}
.q1_tap_cont.open {
  height: 77.73333vw;
}
.q2_tap_cont {
  overflow: hidden;
  height: 0;
  transition: all .25s ease;
}
.q2_tap_cont.open {
  overflow: visible;
  height: 223.2vw;
}

#q1_next_btn,
#q2_next_btn {
  position: absolute;
  top: 5.3333vw;
  width: 53.3333vw;
  left: 50%;
  transform: translateX(-50%);
}

.content04_next_icon {
  position: absolute;
  top: 0;
  width: 6.6666vw;
  left: 46.6667vw;
  z-index: 10;
}

#cL02 {
  position: absolute;
  top: 0;
  width: 80vw;
  transform: translateX(-50%);
  left: 50%;
}

.webp #cL02 label {
  display: inline-block;
  width: 37.3333vw;
  height: 13.8666vw;
  background: 90% url("https://838b311d46dc2310ea26750bf0a20f37.cdnext.stream.ne.jp/50/BD/pw2s/bdsp/sp/idbs06/img/btn02_off.webp") no-repeat;
  margin-bottom: 2.1333vw;
  border-radius: 2vw;
  float: left;
}
.no-webp #cL02 label {
  display: inline-block;
  width: 37.3333vw;
  height: 13.8666vw;
  background: 90% url("https://838b311d46dc2310ea26750bf0a20f37.cdnext.stream.ne.jp/50/BD/pw2s/bdsp/sp/idbs06/img/btn02_off.png") no-repeat;
  margin-bottom: 2.1333vw;
  border-radius: 2vw;
  float: left;
}
.webp #cL02 input[type="radio"]:checked + label {
  background: 90%  url("https://838b311d46dc2310ea26750bf0a20f37.cdnext.stream.ne.jp/50/BD/pw2s/bdsp/sp/idbs06/img/btn02_on.webp") no-repeat;
}
.no-webp #cL02 input[type="radio"]:checked + label {
  background: 90%  url("https://838b311d46dc2310ea26750bf0a20f37.cdnext.stream.ne.jp/50/BD/pw2s/bdsp/sp/idbs06/img/btn02_on.png") no-repeat;
}

#c02_1_li label, #c02_3_li label {
  margin-right: 5.3333vw;
}
.content07_next_icon {
  position: absolute;
  top: 0;
  width: 6.6666vw;
  left: 46.6667vw;
  z-index: 10;
}
#content08_arrow {
  position: absolute;
  top: 194.6666vw;
  z-index: 10;
}

#hexagon_big_01 {
  position: absolute;
  top: 126.8vw;
  left: 4.8vw;
  width: 34.9333vw;
}
#hexagon_big_02 {
  position: absolute;
  top: 135.2vw;
  left: 33.0666vw;
  width: 34.9333vw;
}
#hexagon_big_03 {
  position: absolute;
  top: 126.8vw;
  left: 61.3333vw;
  width: 34.9333vw;
}


#content10_icon01 {
  position: absolute;
  top: 161.7333vw;
  left: 46.2666vw;
  width: 4.5333vw;
}
#content10_icon02 {
  position: absolute;
  top: 175.0666vw;
  left: 34vw;
  width: 54.8vw;
  transform-origin: top left;
}



/*
.content10_txt {
  position: absolute;
  top: 67.5%;
  left: 11vw;
  width: 25.75vw;
}
.content11_icon {
  top: 16vw;
  width: 80%;
  left: 10vw;
}
.content11_txt {
  position: absolute;
  top: 131vw;
  left: 15vw;
  width: 35%;
  z-index: 3;
}
.content11_graph {
  position: absolute;
  top: 118vw;
  left: 1vw;
  overflow: hidden;
  width: 60%;
  clip-path: circle(39% at 50% 50%);
  z-index: 2;
}
.content11_graph_bg {
  position: absolute;
  top: 118vw;
  left: 1vw;
  width: 60%;
}
.content12_icon {
  top: 16vw;
  width: 80%;
  left: 10vw;
}
.content13_group {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 92.5%;
  justify-content: space-evenly;
  align-items: center;
}

.content13_group li {
  width: 35%;
}

.content13_group li:nth-child(3) {
  margin: 12% 20vw;
}
.content13_group li:nth-child(4) {
  width: 39%;
}
.content13_group li:nth-child(5) {
  width: 34.5%;
}
*/

.label_shiny_wrapper {
  position: absolute;
  width: 89.2vw;
  height: 18.6666vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}
.label01 {
  top: 0;
}
.label02 {
  top: 11.6vw;
}
.label03 {
  top: 11.8666vw;
}

.star {
  position: absolute;
  width: 6.9333vw;
  top: 72.6666vw;
}
.star1 {
  left: 30.9333vw;
}
.star2 {
  left: 38.8vw;
}
.star3 {
  left: 46.5333vw;
}
.star4 {
  left: 54.4vw;
}
.star5 {
  left: 62.1333vw;
}
.content14_txt01 {
  position: absolute;
  top: 17vw;
  left: 27vw;
  width: 25%;
}
.content14_txt02 {
  position: absolute;
  top: 29vw;
  left: 18vw;
  width: 65%;
}
.content15_txt01 {
  top: 11%;
  z-index: 2;
  width: 67%;
  left: 19vw;
}
.content15_txt02 {
  position: absolute;
  top: 47%;
  left: 25vw;
  z-index: 2;
  width: 47%;
}
.content15_txt03 {
  position: absolute;
  top: 71%;
  left: 24.5vw;
  z-index: 2;
  width: 52%;
}
.content15_graph01 {
  position: absolute;
  top: 6%;
  left: 14vw;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
  width: 75%;
}
.content15_graph02 {
  position: absolute;
  top: 43%;
  left: 20vw;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
  width: 58%;
}
.content15_graph03 {
  position: absolute;
  top: 66%;
  left: 20vw;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
  width: 58%;
}

/* .checkMark_box {
  opacity: 1 !important;
} */
.content18_logo {
  position: absolute;
  top: 125vw;
  left: 26vw;
  overflow: hidden;
  width: 50%;
}
.content19_icon {
  top: -6vw;
  width: 60%;
  left: 21vw;
}
.content19_icon02 {
  position: absolute;
  width: 26%;
  top: 33%;
  right: 7vw;
  transform-origin: left bottom;
}

.content18_txt {
  bottom: 4vw;
  transform-origin: top center;
  width: 80%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.cat {
  padding: 3.7333vw 7vw 0;
}
.disp_none {
  display: none;
}

/* float-btn
--------------------------------------------- */

#fixed-layer {
  position: fixed;
  bottom: 0%;
  z-index: 9999;
}

.banner_content{
  position: relative;
  margin:0 auto;
}
.close_btn{
  position: absolute;
  top: 1.8666vw;
  /* left: 0; */
  right: 1.4666vw;
  cursor: pointer;
  z-index: 100;
  width: 3.8666vw;
}
.banner_btn{
  position: absolute;
  top: 1.7333vw;
  right: 6.1333vw;
  cursor: pointer;
  overflow: hidden;
  width: 23.7333vw;
}
.float_btn_wrap{
  display: none;
  position: fixed;
  bottom: 10px;
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
  z-index: 999;
  max-width: 710px;
  width: 96%;
}
.float_pop{
  position: absolute;
  right: 20px;
  width: 35vw;
  bottom: 18vw;
}

.float_wrap {
  position: absolute;
  z-index: 999;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}
.float_pop {
  position: absolute;
  right: 30px;
  bottom: 95px;
}

.fixed_btn_box {
  overflow: hidden;
}

.content18_icon01 {
  position: absolute;
  top: 8vw;
  left: 25vw;
  height: 5vw;
  width: 5vw;
}
.content18_icon02 {
  position: absolute;
  top: 20vw;
  left: 25vw;
  height: 5vw;
  width: 5vw;
}
.content18_icon03 {
  position: absolute;
  top: 31vw;
  left: 25vw;
  height: 5vw;
  width: 5vw;
}

.checkMark::before{
  content: "";
  display: block;
  height: 2vw;
  width: 5vw;
  border-bottom: 1.3vw solid #DA1D1B;
  border-left: 1.3vw solid #DA1D1B;
  position: absolute;
  transform: rotate(-45deg);
  left: -6vw;
  top: 0;
  bottom: 6px;
  margin: auto;
  opacity: 0;
}

/* #notice
------------------------------------------ */
div#notice h2 a ,
div#notice div dl dd a {
	color:#00a0e9;
	text-decoration:underline;
	font-size: 12px;
}

div#notice {
	clear: both;
	display: block;
	overflow: hidden;
	font-size: 12px;
	padding: 0;
	width: 100%;
	/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	color: #000;
}
div#notice h2 {
	margin-bottom:10px;
	font-weight:normal;
	font-size: 12px;
	line-height:1.7;
	margin: 0 3%;
}
div#notice p{
    margin: 0 3%;
}


div#notice div dl,
div#notice .caution_att_tp {
	font-size: 12px;
	line-height: 1.7;
	text-align: left;
	padding: 0;
	margin: 0 1%;
  text-align: justify
}
div#notice .caution_att_tp .caution_att {
    padding: 0;
}

.cat_txt .caution_att {
  padding: 0;
}
div#notice div .list dt {
	float: left;
}

div#notice div .list dd {
	margin-left: 12px;
}

div#notice div dl dt {
	clear:left;
	line-height:1.7;
	font-size: 12px;
	padding: 0;
	margin: 0;
}

.caution_link a {
  text-decoration: underline;
}
div#notice div dl dd {
	line-height: 1.7;
	font-size: 12px;
	padding: 0;
	margin: 0;
}

div#notice .box {
	background: #dbe9f2;
	padding: 6% 3% 5%;
	margin: 0;
}

div#notice h3 {
	margin-top:40px;
	margin-bottom:12px;
	font-size: 28px;
	color:#1F5F1F;
	border-bottom:1px solid #1F5F1F;
	border-left:2px solid #1F5F1F;
	padding:3px 5px;
}

div#notice dl.summary {
	line-height:1.7;
	font-size: 12px;
	margin: 0 0 10px;
	text-align: left;
}

div#notice dl.summary dt,
div#notice dl.summary dd {
	line-height:1.7;
	font-size: 12px;
	padding: 0;
	margin: 0;
	text-align: left;
}

div#otherinfo {
	border-top:1px solid #999999;
	border-bottom:1px solid #999999;
	padding:5px 0px;
	margin-bottom:20px;
}
div#otherinfo ul li {
	font-size: 28px;
	line-height:1.7;
	padding: 0;
	margin: 0;
}

div#attention {
	padding: 0;
}

div#attention dl dt,
div#attention dl dd {
	line-height:1.7;
	font-size: 28px;
}

.foot img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}