@charset "utf-8";
/* SP */
@media screen and (max-width:767px) {
	#suntory_contents .ashita {
		background: url("../img/ashita/contents_bg.jpg") repeat;
		background-size: 200px auto;
		color: #000;
		overflow: hidden;
		position: relative;
	}
	#suntory_contents .ashita #mv .locnav {
		padding: 5% 16% 5% 5%;
		font-size: 12px;
		line-height: 1.2;
		color: #333;
	}
	#suntory_contents .ashita #mv .locnav a {
		color: #333;
	}
	#suntory_contents .ashita #mv {
		position: relative;
		overflow: hidden;
		padding: 0 0 5% 0;
		background: url("../img/ashita/nav_bg_sp.jpg") no-repeat bottom center;
		background-size: contain;
	}
	.ashita #nav-ashita #mainvisual .locnav .arrow {
		display: inline-block;
		margin: 0 5px;
	}
	.ashita #mv .mvtext01 {
		width: 50%;
		margin: 0 0 0 50%;
	}
	.ashita #mv .mvpic {
		width: 100%;
		position: absolute;
		left: 0;
		top: 10%;
	}
	.ashita #mv .mvchara01 {
		width: 41%;
		position: absolute;
		left: 33%;
		top: 36%;
	}
	.ashita #mv .mvchara02 {
		width: 41%;
		position: absolute;
		left: 0;
		top: 36%;
	}
	.ashita #mv .mvtitle {
		width: 40%;
		position: absolute;
		left: 0;
		bottom: 3%;
	}
	.ashita #mv .mvsizzle {
		width: 100%;
	}
	.ashita #nav-ashita-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}
	.ashita #nav-ashita-container.show-menu #nav-ashita::before {
		transition: background-color .3s linear;
		background-color: rgba(255, 255, 255, .9)
	}
	.ashita #nav-ashita {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		line-height: 0;
		z-index: 50
	}
	.ashita #nav-ashita::before {
		content: "";
		display: block
	}
	#suntory_contents button {
		background-color: transparent;
		border: 0;
		cursor: pointer;
		outline: 0;
		padding: 0;
		appearance: none;
	}
	.ashita #nav-ashita .btn-menu {
		position: absolute;
		top: 40px;
		right: 4.5%;
		width: 6%;
		height: 0;
		margin-top: 3%;
		padding-bottom: 3%;
		z-index: 101;
		transition: top .3s ease-out
	}
	.ashita #nav-ashita .btn-menu button {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: transform .4s cubic-bezier(.39, .575, .565, 1);
	}
	.ashita #nav-ashita .btn-menu button span, .ashita #nav-ashita .btn-menu button::after, .ashita #nav-ashita .btn-menu button::before {
		display: block;
		width: 100%;
		height: 2px;
		margin: auto;
		background-color: #000;
		transition: all .4s ease-out
	}
	.ashita #nav-ashita .btn-menu button span {
		position: absolute;
		top: 0;
		bottom: 0;
		font-size: 0;
		line-height: 0;
		text-indent: -200%
	}
	.ashita #nav-ashita .btn-menu button::before {
		content: "";
		position: absolute;
		top: 0
	}
	.ashita #nav-ashita .btn-menu button::after {
		content: "";
		position: absolute;
		bottom: 0
	}
	.ashita #nav-ashita ul {
		display: none;
		padding-top: 30%
	}
	.ashita #nav-ashita ul li {
		position: relative;
		font-size: 20px;
		text-align: center;
		font-weight: bold;
	}
	.ashita #nav-ashita ul li a {
		display: block;
		position: relative;
		margin: 0 auto;
		padding: 4% 0;
		transition: opacity .2s ease-out;
		color: #2A52A6;
		line-height: 1.2;
	}
	.ashita #nav-ashita ul li:nth-child(n+2)::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 32%;
		margin: -5.25% auto 0;
		padding-bottom: 1%;
		border-bottom: 2px solid #d7c764;
	}
	.ashita #nav-ashita ul li + li {
		margin-top: 10%
	}
	.ashita #nav-ashita.floating {
		position: fixed;
		left: 0;
		width: 100%
	}
	.ashita #nav-ashita.show {
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		overflow-scrolling: touch
	}
	.ashita #nav-ashita.show::before {
		transition: background-color .3s linear;
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: -1
	}
	.ashita #nav-ashita.show .btn-menu button span, .ashita #nav-ashita.show .btn-menu button::after, .ashita #nav-ashita.show .btn-menu button::before {
		background-color: #000
	}
	.ashita #nav-ashita.show .btn-menu button span {
		opacity: 0;
		transform: scaleX(.01)
	}
	.ashita #nav-ashita.show .btn-menu button::before {
		top: 50%;
		transform: translateY(-50%) rotate(45deg)
	}
	.ashita #nav-ashita.show .btn-menu button::after {
		bottom: 50%;
		transform: translateY(50%) rotate(-45deg)
	}
	.ashita #nav-ashita.show ul {
		display: block
	}
	#cm {
		padding: 5% 0 5% 0;
	}
	#cm .title {
		margin: 0 0 5% 0;
	}
	#cm .movie {
		width: 80%;
		margin: 0 auto;
		position: relative;
	}
	.movie .thumb a {
		display: block;
		border: 3px solid #25489C;
		position: relative;
		cursor: pointer;
	}
	.movie .thumb a .play {
		display: block;
		width: 60px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -30px 0 0 -30px;
	}
	.movie .caption {
		margin: 5% 0 0 0;
		font-size: 12px;
		font-weight: bold;
		color: #25489C;
	}
	#suntory_contents .ashita .movie a.link {
		font-size: 12px;
		display: block;
		font-weight: normal;
		position: absolute;
		bottom: -12%;
		right: 0;
		color: #25489C;
		cursor: pointer;
		border: 1px solid #25489C;
		padding: 3px 10px;
	}
	#check {
		padding: 5% 0 0 0;
	}
	#check .title {
		margin: 0 0 5% 0;
	}
	#check .movielist li {
		margin: 0 auto 12% auto;
	}
	#check .movielist li:last-child {
		margin: 0 auto;
	}
	#check .movie {
		width: 80%;
		position: relative;
	}
	#feature {
		padding: 12% 0 21% 0;
		/*background: url("../img/ashita/campaign_bg_top_sp.png") no-repeat center bottom;
		background-size: contain;*/
	}
	#feature .title {
		margin: 0 0 5% 0;
	}
	#feature .sizzle {
		padding: 0 0 28% 0;
		background: url("../img/ashita/data_bg01_top_sp.png") no-repeat center bottom;
		background-size: contain;
	}
	#feature .featurebody {}
	#feature .gaba {
		background: url("../img/ashita/data_bg01_bottom_sp.png") no-repeat center bottom;
		background-size: contain;
		padding: 0 0 15% 0;
	}
	#feature .gaba .gababody {
		background: #fff;
	}
	#feature .gaba .name {
		margin: 0 auto -5% auto;
	}
	#feature .gaba .name img {
		margin: -12% 0 0 0;
	}
	#feature .gaba .pic {
		margin: 0 auto;
	}
	#feature .gaba .exp {
		padding: 0 5%;
		text-align: center;
	}
	#feature .gaba .exp .exptext01 {
		margin: 0 0 5% 0;
	}
	#feature .gaba .exp .exptext01 span {
		display: inline-block;
		padding: 3px 12px;
		font-size: 12px;
		font-weight: bold;
		background: #6C9BD2;
		color: #fff;
		line-height: 1.5;
	}
	#feature .gaba .exp .exptext02 {
		font-size: 10px;
		font-weight: bold;
		line-height: 1.5;
		color: #25489C;
		margin: 0 0 3% 0;
	}
	#feature .gaba .exp .exptext03 {
		font-size: 10px;
		line-height: 1.6;
		color: #000;
	}
	#feature .kodawari {
		position: relative;
		margin-top: -15%;
		padding: 25% 0 25%;
		background: url("../img/ashita/data_bg02_sp.png") no-repeat center center;
		background-size: cover;
	}
	#feature .kodawari h3 {
		color: #6A3906;
		font-weight: bold;
		font-size: 30px;
		text-align: center;
		line-height: 1.2;
	}
	#feature .kodawari .lead {
		margin: 5% 0 0 0;
		color: #6A3906;
		font-weight: bold;
		font-size: 14px;
		text-align: center;
		line-height: 1.2;
	}
	#feature .kodawari ul {
		margin: 8% 8% 0 8%;
	}
	#feature .kodawari ul li {
		line-height: 0
	}
	#feature .kodawari ul li::after {
		content: "";
		display: block;
		clear: both
	}
	#feature .kodawari ul li .img {
		float: left;
		width: 36%;
		margin-right: 5%;
		border-radius: 50%;
		overflow: hidden
	}
	#feature .kodawari ul li .img img {
		width: 100%;
		height: auto
	}
	#feature .kodawari ul li h4 {
		float: left;
		margin-top: 4%;
		color: #6A3906;
		font-weight: bold;
		font-size: 16px;
		line-height: 1.2;
	}
	#feature .kodawari ul li p {
		float: left;
		margin-top: 3%;
		color: #000;
		font-weight: bold;
		font-size: 14px;
		line-height: 1.5;
	}
	#feature .kodawari ul li + li {
		margin-top: 2.6234567901%
	}
	#feature .zero {
		position: relative;
	}
	#feature .zero .pic {
		position: relative;
		margin: -20% auto 0 auto;
		width: 90%;
	}
	#feature .zero .note {
		position: absolute;
		bottom: 12%;
		left: 10%;
		text-align: center;
		width: 80%;
		color: #000;
		font-size: 10px;
		line-height: 1.5;
	}
	#campaign {
		position: relative;
	}
	#campaign .campaignwrapper {
		background: url("../img/ashita/campaign_bg_bottom_sp.png") no-repeat center bottom;
		background-size: contain;
		padding: 0 0 15% 0;
	}
	#campaign .campaigninner {
		background: #fff;
		padding: 0 0 46% 0;
	}
	#campaign .title {
		margin: 0 0 5% 0;
	}
	#campaign .lead {
		font-size: 16px;
		line-height: 1.5;
		text-align: center;
		font-weight: bold;
		color: #000;
		margin: 0 5% 8% 5%;
	}
	#campaign .lead strong {
		font-size: 24px;
		vertical-align: baseline;
		background: linear-gradient(transparent 80%, #F7E7C6 80%);
	}
	#campaign .campaignbody {
		width: 84%;
		margin: 0 auto;
		padding: 8%;
		background: #F9F3E8;
		position: relative;
	}
	#campaign .stitle {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		color: #DFAE44;
		padding: 0 0 3% 0;
		margin: 0 0 8% 0;
		border-bottom: 1px solid #DFAE44;
	}
	#campaign .text {
		font-size: 14px;
		line-height: 1.8;
		margin: 0 0 5% 0;
	}
	#campaign .text strong {
		font-weight: bold;
		text-decoration: underline;
	}
	#campaign .twbtn {
		width: 80%;
		margin: 0 auto;
	}
	#campaign .fin {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(175, 175, 175, 0.9);
		z-index: 3;
	}
	#campaign .fin .fintext {
		padding: 75% 0 0 0;
		color: #fff;
		text-align: center;
		font-size: 32px;
		letter-spacing: 0.05em;
		font-weight: bold;
	}

	#suntory_contents #campaign .twbtn a {
		display: block;
	}
	#campaign .note {
		font-size: 14px;
	}
	#campaign .set01 {
		margin: 0 0 8% 0;
	}
	#campaign .set02 {
		font-size: 16px;
		text-align: center;
		margin: 0 0 8% 0;
	}
	#campaign .set03 {
		font-size: 16px;
		text-align: center;
	}
	#campaign .rulebtn {
		width: 50%;
		margin: 8% auto 0 auto;
		border: 2px solid #666;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		color: #666;
	}
	#suntory_contents #campaign .rulebtn a {
		display: block;
		padding: 10% 5%;
		color: #666;
	}
	#campaign .rulebtn.finbtn {
		position: relative;
		z-index: 99;
		background: #666;
	}
	#suntory_contents #campaign .rulebtn.finbtn a {
		color: #fff;
	}
	#campaign .campaignpic {
		width: 100%;
		position: absolute;
		bottom: 0.1%;
		left: 0;
	}
.ashita	#faq {
		margin: 0 0 8% 0;
	}
.ashita	#faq .faqinner {
		position: relative;
		padding: 8% 0 0 0;
	}
.ashita	#faq .title {
		margin: 0 0 8% 0;
	}
.ashita	#faq .faqchara {
		width: 100%;
		position: absolute;
		top: -26%;
		left: 0;
	}
.ashita	#faq .faqlist {
		margin: 0 3% 8% 3%;
	}
.ashita	#faq .faqlist li {
		position: relative;
		text-align: center;
	}
.ashita	#faq .faqlist li .text {
		box-sizing: border-box;
		width: 100%;
		color: #2A52A6;
		display: block;
		padding: 5% 2%;
		position: absolute;
		left: 0;
		font-size: 14px;
		line-height: 1.8;
		font-weight: bold;
	}
.ashita	#faq .faqlist li.faq01 .text {
		top: 25%;
	}
.ashita	#faq .faqlist li.faq02 .text {
		top: 25%;
	}
.ashita	#faq .faqlist li.faq03 .text {
		top: 25%;
	}
.ashita	#faq .faqbtn {
		width: 60%;
		margin: 0 auto;
		border: 2px solid #4A4A4A;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		color: #4A4A4A;
	}
.ashita	#faq .faqbtn a {
		display: block;
		padding: 10% 5%;
		color: #4A4A4A;
 background-color: transparent;
 border: none;
	}
	#suntory_contents .ashita	.faq .faqbtn a {
		color: #4A4A4A;
	}
.ashita	#faq .faqbtn .arrow {
		display: inline-block;
		margin: 0 0 0 0.5em;
	}
	#products {
		padding: 10% 0 10% 0;
	}
	#products .productsinner {
		position: relative;
	}
	#products .title {
		margin: 0 0 5% 0;
	}
	#products h3 {
		margin: -5% 0 3% 0;
		color: #000;
		line-height: 1;
		font-weight: bold;
		font-size: 18px;
		text-align: center;
	}
	#products .product {
		width: 40%;
		color: #000;
		text-align: center;
		position: relative;
	}
	#products .product .pic {
		width: 90%;
		margin: 0 auto;
	}
	#products .product .data {
		font-size: 11px;
		line-height: 1.5;
		margin: 5px 0 0 0;
	}
	#products .desc {
		margin-top: 8%;
		font-weight: bold;
	}
	#products .productgroup {
		position: relative;
		width: 80%;
		margin: 0 auto;
	}
	#products .desc .information {
		position: absolute;
		top: 0;
		left: 45%;
		width: 55%;
		margin-top: 10%;
		color: #000;
		line-height: 1.5;
		font-size: 14px;
		font-weight: bold;
	}
	#products .desc dl dt {
		width: 100%;
		color: #000;
		line-height: 1.5;
		font-size: 12px;
	}
	#products .desc dl dd {
		width: 100%;
		margin-top: 3%;
		color: #000;
		line-height: 1.5;
		font-size: 12px;
	}
	#products .desc .note {
		width: 100%;
		margin-top: 5%;
		color: #000;
		line-height: 1.5;
		font-size: 10px;
	}
	#products .detailbtn {
		margin: 5% auto 0 auto;
		width: 60%;
		padding: 0 0 0 3%;
		background: #fff;
		border-radius: 20px;
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		border: 1px solid #003274;
		overflow: hidden;
	}
	#products .detailbtn a {
		padding: 12px 10px;
		display: block;
		color: #003274;
	}
	.contentsfooter {
		width: auto;
		margin: 0;
		padding: 13% 0 3%;
		background-color: #fff
	}
	.contentsfooter .brandsite .bnr {
		width: 70%;
		margin: 0 auto;
		border: 1px solid #00145A;
	}
	.contentsfooter .brandsite p {
		width: 100%;
		margin: 3% auto 0;
		color: #00145A;
		font-weight: bold;
		font-size: 12px;
		text-align: center;
		line-height: 1;
	}
	.contentsfooter .brandsite p a {
		color: #00145A;
	}
	.contentsfooter .brandsite p .arrow {
		display: inline-block;
		margin: 0 0 0 2%;
	}
	.contentsfooter .btn-pagetop_karada {
		width: 16%;
		margin: 8% auto 0;
		line-height: 0;
	}
	.contentsfooter .btn-pagetop_karada a .arrow {
		width: 40%;
		margin: 0 auto;
		transition: transform .2s ease-out;
	}
	.contentsfooter .btn-pagetop_karada a p {
		margin-top: 15%;
		font-size: 10px;
		color: #d7c764;
		text-align: center;
		font-weight: bold;
		line-height: 1;
	}
	.contentsfooter .note {
		width: 100%;
		margin: 10% auto 0
	}
}
/* PC */
@media screen and (min-width:768px) {
	#suntory_contents .ashita {
		min-width: 1164px;
		background: url("../img/ashita/contents_bg.jpg") repeat;
		background-size: 200px auto;
		color: #000;
		overflow: hidden;
	}
	#suntory_contents .ashita a {
		color: #25489C
	}
	#suntory_contents .ashita #mv {
		min-width: 1164px;
	}
	#suntory_contents .ashita #mv .mvinner {
		width: 1164px;
		height: 672px;
		margin: 0 auto;
		position: relative;
	}
	#suntory_contents .ashita #mv .locnav {
		position: absolute;
		top: 30px;
		left: 0;
		color: #000;
		font-size: 14px;
	}
	#suntory_contents .ashita #mv .locnav a {
		color: #000;
	}
	#suntory_contents .ashita #mv .locnav .arrow {
		display: inline-block;
		margin: 0 10px;
	}
	.ashita #mv .mvtext01 {
		width: 139px;
		position: absolute;
		right: 8px;
		top: 73px;
	}
	.ashita #mv .mvpic {
		width: 411px;
		position: absolute;
		right: 180px;
		top: 66px;
	}
	.ashita #mv .mvchara01 {
		width: 258px;
		position: absolute;
		right: 178px;
		top: 386px;
	}
	.ashita #mv .mvchara02 {
		width: 258px;
		position: absolute;
		right: 347px;
		top: 388px;
	}
	.ashita #mv .mvtitle {
		width: 64px;
		position: absolute;
		left: 10px;
		top: 88px;
	}
	.ashita #mv .mvtext02 {
		width: 35px;
		position: absolute;
		left: 104px;
		top: 172px;
	}
	.ashita #mv .mvsizzle {
		width: 420px;
		position: absolute;
		left: 140px;
		bottom: 23px;
	}
	.ashita #mv .mvnote {
		width: 373px;
		position: absolute;
		right: 0;
		bottom: 10px;
	}
	.ashita #nav-ashita-container {
		position: relative;
		height: 100px;
		padding: 2px 0;
	}
	.ashita #nav-ashita.floating {
		position: fixed
	}
	.ashita #nav-ashita {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 28px 0;
		margin-top: -2px;
		line-height: 0;
		background: url("../img/ashita/nav_bg_pc.jpg") center top;
		background-size: 1312px auto;
		z-index: 50
	}
	.ashita #nav-ashita .btn-menu {
		display: none
	}
	.ashita #nav-ashita ul {
		display: flex;
		align-items: center;
		width: 960px;
		margin: 0 auto;
		color: #fff;
	}
	.ashita #nav-ashita ul li {
		flex-grow: 1;
		position: relative;
		text-align: center;
		font-size: 20px;
		line-height: 1;
	}
	.ashita #nav-ashita ul li::after {
		content: '｜';
		position: absolute;
		font-size: 24px;
		top: 4px;
		right: -15px;
	}
	.ashita #nav-ashita ul li:last-child::after {
		content: none;
	}
	.ashita #nav-ashita ul li a {
		color: #fff;
		font-weight: bold;
		display: block;
		padding: 6px 0;
	}
	.ashita #nav-ashita ul li a {
		transition: 0.2s;
	}
	.ashita #nav-ashita ul li a:hover {
		transform: scale(1.1);
	}
	#cm {
		padding: 110px 0 0 0;
	}
	#cm .cminner {
		width: 960px;
		margin: 0 auto 130px auto;
	}
	#cm .title {
		width: 774px;
		margin: 0 0 65px 0;
		padding: 0 0 0 40px;
	}
	#cm .movie {
		width: 675px;
		margin: 0 auto;
		position: relative;
	}
	.movie .thumb a {
		display: block;
		border: 3px solid #25489C;
		position: relative;
		cursor: pointer;
	}
	.movie .thumb a .play {
		display: block;
		width: 108px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -54px 0 0 -54px;
		transition: 0.2s;
	}
	.movie .thumb a:hover .play {
		transform: scale(1.1);
	}
	.movie .caption {
		margin: 15px 0 0 0;
		font-size: 14px;
		font-weight: bold;
		color: #25489C;
	}
	#suntory_contents .ashita .movie a.link {
		font-size: 14px;
		display: block;
		font-weight: normal;
		position: absolute;
		bottom: -5px;
		right: 0;
		color: #25489C;
		cursor: pointer;
		border: 1px solid #25489C;
		padding: 3px 10px;
		transition: 0.2s;
	}
	#suntory_contents .ashita .movie a.link:hover {
		color: #fff;
		background: #25489C;
	}
	#check {
		margin: 0;
	}
	#check .checkinner {
		width: 960px;
		margin: 0 auto;
	}
	#check .title {
		width: 766px;
		margin: 0 0 65px 0;
		padding: 0 0 0 135px;
	}
	#check .movielist {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#check .movie {
		width: 470px;
		margin: 0 0 70px 0;
		position: relative;
	}
	#feature {
		padding: 80px 0 120px 0;
		/*background: url("../img/ashita/campaign_bg_top_pc.png") no-repeat center bottom;
		background-size: 1814px auto;*/
	}
	#feature .title {
		width: 1162px;
		margin: 0 auto 0 auto;
	}
	#feature .sizzle {
		width: 857px;
		margin: -40px auto 0 auto;
	}
	#feature .featurebody {
		background: url("../img/ashita/data_bg_pc.png") no-repeat center top;
		background-size: 1210px auto;
	}
	#feature .gaba {
		width: 960px;
		margin: 0 auto;
		padding: 85px 0 0 0;
	}
	#feature .gaba .name {
		width: 324px;
		padding: 0 42px 0 0;
		margin: 0 auto;
	}
	#feature .gaba .pic {
		width: 1031px;
		margin: -52px 0 50px -135px;
	}
	#feature .gaba .exp {
		padding: 0 42px 0 0;
		text-align: center;
	}
	#feature .gaba .exp .exptext01 {
		margin: 0 0 30px 0;
	}
	#feature .gaba .exp .exptext01 span {
		display: inline-block;
		padding: 3px 12px;
		font-size: 14px;
		font-weight: bold;
		background: #6C9BD2;
		color: #fff;
	}
	#feature .gaba .exp .exptext02 {
		font-size: 12px;
		font-weight: bold;
		line-height: 1.6;
		color: #25489C;
		margin: 0 0 5px 0;
	}
	#feature .gaba .exp .exptext03 {
		font-size: 10px;
		line-height: 1.6;
		color: #000;
	}
	#feature .kodawari {
		position: relative;
		width: 960px;
		margin: 0 auto;
		padding: 145px 0 0 270px;
		z-index: 1;
	}
	#feature .kodawari h3 {
		line-height: 1.2;
		color: #6A3906;
		text-align: center;
		font-size: 44px;
		font-weight: bold;
	}
	#feature .kodawari .lead {
		line-height: 1.2;
		color: #6A3906;
		text-align: center;
		font-size: 30px;
		font-weight: bold;
		margin: 10px 0 0 0;
	}
	#feature .kodawari ul {
		display: flex;
		justify-content: center;
		margin-top: 42px
	}
	#feature .kodawari ul li {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 225px;
		line-height: 0
	}
	#feature .kodawari ul li .img {
		width: 205px;
		border-radius: 50%;
		overflow: hidden
	}
	#feature .kodawari ul li h4 {
		margin: 22px 0 0 0;
		font-weight: bold;
		font-size: 20px;
		color: #6A3906;
		line-height: 1;
	}
	#feature .kodawari ul li p {
		text-align: center;
		margin: 15px 0 0 0;
		font-weight: bold;
		font-size: 16px;
		color: #000;
		line-height: 1.5;
	}
	#feature .kodawari ul li + li {
		margin-left: 38px
	}
	#feature .zero {
		width: 960px;
		margin: 0 auto;
		position: relative;
	}
	#feature .zero .pic {
		position: relative;
		left: -60px;
		width: 539px;
	}
	#feature .zero .note {
		position: absolute;
		bottom: 70px;
		left: 0;
		text-align: center;
		width: 410px;
		color: #000;
		font-size: 11px;
		line-height: 1.5;
	}
	#campaign {}
	#campaign .campaignwrapper {
		max-width: 1814px;
		background: #fff;
		margin: 0 auto;
	}
	#campaign .campaigninner {
		width: 960px;
		margin: 0 auto;
		padding: 120px 0 40px 0;
		position: relative;
	}
	#campaign .title {
		width: 486px;
		margin: 0 auto 80px auto;
	}
	#campaign .lead {
		font-size: 24px;
		line-height: 1.5;
		text-align: center;
		font-weight: bold;
		color: #000;
		margin: 0 0 60px 0;
	}
	#campaign .lead strong {
		font-size: 30px;
		vertical-align: baseline;
		background: linear-gradient(transparent 80%, #F7E7C6 80%);
	}
	#campaign .campaignbody {
		width: 890px;
		margin: 0 auto;
		padding: 70px 120px 100px 120px;
		background: #F9F3E8;
		position: relative;
	}
	#campaign .stitle {
		font-size: 28px;
		font-weight: bold;
		text-align: center;
		color: #DFAE44;
		padding: 0 0 10px 0;
		margin: 0 0 30px 0;
		border-bottom: 1px solid #DFAE44;
	}
	#campaign .text {
		font-size: 20px;
		line-height: 1.8;
		margin: 0 0 30px 0;
	}
	#campaign .text strong {
		font-weight: bold;
		text-decoration: underline;
	}
	#campaign .twbtn {
		width: 335px;
		margin: 0 auto;
	}
	#suntory_contents #campaign .twbtn a {
		display: block;
		transition: 0.2s;
	}
	#suntory_contents #campaign .twbtn a:hover {
		transform: scale(1.1);
	}
	#campaign .note {
		font-size: 16px;
	}
	#campaign .set01 {
		margin: 0 0 80px 0;
	}
	#campaign .set02 {
		font-size: 24px;
		text-align: center;
		margin: 0 0 80px 0;
	}
	#campaign .set03 {
		font-size: 24px;
		text-align: center;
	}
	#campaign .rulebtn {
		width: 230px;
		margin: 40px auto 0 auto;
		border: 2px solid #666;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
	}
	#campaign .rulebtn {
		width: 230px;
		margin: 60px auto 0 auto;
		border: 2px solid #666;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
	}
	#suntory_contents #campaign .rulebtn a {
		display: block;
		padding: 18px 20px;
		color: #666;
		transition: 0.3s;
	}
	#suntory_contents #campaign .rulebtn a:hover {
		color: #fff;
		background: #666;
	}
	#campaig .rulebtn.finbtn {
		position: relative;
		z-index: 99;
	}
	#suntory_contents #campaign .rulebtn.finbtn a {
		color: #fff;
		background: #666;
	}
	#suntory_contents #campaign .rulebtn.finbtn a:hover {
		color: #666;
		background: transparent;
	}
	#campaign .campaignpic {
		width: 433px;
		position: absolute;
		bottom: -185px;
		right: -139px;
		z-index: 3;
	}
	#campaign .fin {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(175, 175, 175, 0.9);
		z-index: 2;
	}
	#campaign .fin .fintext {
		padding: 50% 0 0 0;
		color: #fff;
		text-align: center;
		font-size: 38px;
		letter-spacing: 0.05em;
		font-weight: bold;
	}
.ashita	#faq {
		/*background: url("../img/ashita/campaign_bottom_pc.png") no-repeat center top;
		background-size: 1814px auto;*/
		padding: 200px 0 0 0;
 margin: 0;
	}
.ashita	#faq .faqinner {
		width: 960px;
		margin: 0 auto;
		position: relative;
	}
.ashita	#faq .title {
		width: 253px;
		margin: 0 auto 80px auto;
	}
.ashita	#faq .faqchara {
		width: 458px;
		position: absolute;
		top: -245px;
		left: -87px;
	}
.ashita	#faq .faqtext {
		font-size: 22px;
		line-height: 1.8;
		text-align: center;
		margin: 0 0 30px 0;
		font-weight: bold;
		color: #4A4A4A;
	}
.ashita	#faq .faqlist {
		margin: 0 0 60px 0;
	}
.ashita	#faq .faqlist li {
		width: 266px;
		position: relative;
		text-align: center;
	}
	#suntory_contents .ashita	#faq img {
		max-width: 100%;
		height: auto;
	}
.ashita	#faq .faqlist li .text {
		box-sizing: border-box;
		width: 100%;
		color: #4A4A4A;
		display: block;
		padding: 10px;
		position: absolute;
		left: 0;
		font-size: 22px;
		line-height: 1.8;
		font-weight: bold;
	}
.ashita	#faq .faqlist li.faq01 .text {
		top: 80px;
	}
.ashita	#faq .faqlist li.faq02 .text {
		top: 80px;
	}
.ashita	#faq .faqlist li.faq03 .text {
		top: 80px;
	}
.ashita	#faq .faqbtn {
		width: 230px;
		margin: 0 auto;
		border: 2px solid #4A4A4A;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
	}
.ashita	#faq .faqbtn a {
		display: block;
		padding: 18px 20px;
		color: #4A4A4A;
 background-color: transparent;
	 border-radius: 0;
 border: none;
	}
	#suntory_contents .ashita	#faq .faqbtn a {
		color: #4A4A4A;
		transition: 0.3s;
	}
	#suntory_contents .ashita	#faq .faqbtn a:hover {
		color: #fff;
		background: #4A4A4A;
	 border-radius: 0;
 border: none;
}
.ashita	#faq .faqbtn .arrow {
		display: inline-block;
		margin: 0 0 0 0.5em;
	}
	#products {
		padding: 160px 0 130px 0;
	}
	#products .productsinner {
		width: 960px;
		margin: 0 auto;
		position: relative;
	}
	#products .title {
		width: 458px;
		margin: 0 auto 80px auto;
	}
	#products .product {
		float: left;
		width: 210px;
		text-align: center;
		color: #000;
		line-height: 1.2;
	}
	#products .product .data {
		font-size: 14px;
		margin: -10px 0 0 0;
	}
	#products .product .qt {
		font-size: 12px;
	}
	#products .desc {
		float: right;
		width: 700px;
		margin-top: 4px;
	}
	#products .information {
		font-size: 20px;
		font-weight: bold;
		color: #000;
		line-height: 1.8;
	}
	#products .desc dl {
		margin-top: 20px;
		font-size: 16px;
		font-weight: bold;
		color: #000;
		line-height: 1.8;
	}
	#products .desc dl dd {
		margin-top: 10px;
		font-size: 16px;
		font-weight: bold;
		color: #000;
		line-height: 1.5;
	}
	#products .desc .note {
		margin-top: 30px;
		font-weight: bold;
		color: #000;
		line-height: 1.8;
	}
	#products .product .detailbtn {
		margin: 15px auto 0 auto;
		width: 160px;
		background: #fff;
		border: 1px solid #003274;
		border-radius: 20px;
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		overflow: hidden;
	}
	#products .product .detailbtn a {
		color: #003274;
		display: block;
		padding: 10px 10px;
		transition: 0.3s;
	}
	#products .product .detailbtn a:hover {
		background: #003274;
		color: #fff;
	}
	#faq .faqtext {
		font-size: 22px;
		line-height: 1.8;
		text-align: center;
		margin: 0 0 30px 0;
		font-weight: bold;
		color: #003274;
	}
	.contentsfooter .brandsite .bnr {
		width: 400px;
		margin: 0 auto;
		border: 1px solid #00145A;
	}
	.contentsfooter .brandsite p {
		width: 400px;
		margin: 16px auto 0;
		text-align: center;
		font-size: 20px;
		color: #00145A;
		line-height: 1;
		font-weight: bold;
	}
	.contentsfooter .brandsite p a {
		color: #00145A;
	}
	.contentsfooter .brandsite p .arrow {
		display: inline-block;
		margin: 0 0 0 10px;
	}
	.contentsfooter .btn-pagetop_karada {
		width: 105px;
		margin: 54px auto 0;
		line-height: 0
	}
	.contentsfooter .btn-pagetop_karada a .arrow {
		width: 42px;
		margin: 0 auto;
		transition: transform .2s ease-out;
	}
	.contentsfooter .btn-pagetop_karada a p {
		margin-top: 15px;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		color: #d7c764;
	}
	.contentsfooter .btn-pagetop_karada a:hover {
		opacity: .6
	}
	.contentsfooter .btn-pagetop_karada a:hover .arrow {
		transform: translateY(-10%)
	}
	.contentsfooter .note {
		width: 960px;
		margin: 55px auto 0
	}
}
/* modal common */
.modal-open {
	cursor: pointer;
}
.modal-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0, 0, 0, 50%);
	padding: 80px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	z-index: 99;
}
.modal-container:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
.modal-container.active {
	opacity: 1;
	visibility: visible;
}
.close_icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
#suntory_contents .rulebody {
	color: #000;
}
.modal-body .close_btn {
	text-align: center;
}
#suntory_contents .modal-content .rulebody .text a {
	color: #2A52A6;
}
/* PC modal */
@media screen and (min-width:768px) {
	.close_icon {
		top: -60px;
		right: -60px;
		width: 60px;
		height: 60px;
		font-size: 60px;
		cursor: pointer;
	}
	.modal-body {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		max-width: 640px;
		width: 90%;
	}
	.modal-content {
		background: #fff;
		text-align: left;
		padding: 40px 30px;
		box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
	}
	.modal-content .rulebody h2 {
		font-size: 24px;
		margin: 0 0 30px 0;
	}
	.modal-content .rulebody h3 {
		font-size: 18px;
		margin: 0 0 10px 0;
	}
	.modal-content .leadtext {
		font-size: 16px;
		line-height: 1.8;
		margin: 0 0 30px 0;
		color: #f00;
	}
	.modal-content .rulebody .text {
		font-size: 16px;
		line-height: 1.8;
		margin: 0 0 30px 0;
	}
	.modal-body .close_btn {
		width: 160px;
		margin: 0 auto;
		border: 2px solid #666;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
	}
	.modal-body .close_btn a {
		display: block;
		padding: 12px 14px;
		color: #666;
	}
	#suntory_contents .modal-body .close_btn a {
		color: #666;
		transition: 0.3s;
		cursor: pointer;
	}
	#suntory_contents .modal-body .close_btn a:hover {
		color: #fff;
		background: #666;
	}
}
/* SP modal */
@media screen and (max-width:767px) {
	.close_icon {
		top: -50px;
		right: 0;
		width: 40px;
		height: 40px;
		font-size: 40px;
		cursor: pointer;
	}
	.modal-body {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: 99%;
	}
	.modal-content {
		background: #fff;
		text-align: left;
		padding: 8% 5%;
		box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
	}
	.modal-content .rulebody h2 {
		font-size: 20px;
		margin: 0 0 8% 0;
	}
	.modal-content .rulebody h3 {
		font-size: 16px;
		margin: 0 0 5% 0;
	}
	.modal-content .leadtext {
		font-size: 14px;
		line-height: 1.8;
		margin: 0 0 8% 0;
		color: #f00;
	}
	.modal-content .rulebody .text {
		font-size: 14px;
		line-height: 1.8;
		margin: 0 0 8% 0;
	}
	.modal-body .close_btn {
		width: 60%;
		margin: 0 auto;
		border: 2px solid #666;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}
	.modal-body .close_btn a {
		display: block;
		padding: 5%;
		color: #666;
	}
	#suntory_contents .modal-body .close_btn a {
		color: #666;
	}
}