@charset "utf-8";
/* ===========================================
TR
=============================================*/
@import url('//fonts.googleapis.com/css?family=Open+Sans:300&display=swap');

#TR {
	/* background-color: #012763; */
	position: relative;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#TR * {
	box-sizing: content-box;
}
#TR a {
	text-decoration: none;
}

#modalContents > .bg {
	background: rgba(0,19,49,0.9);
}

#topMain #topNews .news p .date {
	color: #2f67b7;
}

#TRCampaign {
	/* min-height: 790px; */
	/* min-height: 1030px; */
	/* min-height: 600px; */
	min-height: 600px;
}

#TRMessage {

}

#TRTVCM {

}

#TRProduct {

}

#TRHistory {

}

#TRHistory .graphic .image {
	pointer-events: none;
}

#TRBanner {
	position: relative;
}


/* ===========================================
PC
=============================================*/

@media screen and (min-width:961px) {

}

@media screen and (min-width:769px) and (max-width:960px) {

}

@media screen and (min-width:769px) {
	#TR {
		margin-bottom: 47px;
	}

	#Cont h2 {
		font-weight: bold;
		line-height: 1;
		letter-spacing: -0.05em;
		color: #FFF;
	}

	#topMenu {
		background-image: url("../images/menu_bg.jpg");
	}

	#topMenu h1 {
		width: 163px;
		margin-top: 19px;
		float: left;
	}

	#topMenu h1 img {
		width: 163px;
		height: 22px;
	}

	#topMain #topTR a {
		width: 100%;
		height: 100%;
		display: block;
		pointer-events: none;
	}

	#topMain #topBG {
		width: 104%;
		height: 100%;
		background-image: url("../images/main_bg.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		display: none;
		opacity: 0;
	}

	#topMain #topMountain {
		width: 104%;
		height: 104%;
		background-image: url("../images/main_mountain.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		position: absolute;
		top: -2%;
		left: -2%;
		z-index: 1;
		display: none;
		opacity: 0;
	}

	#topMain #topCan {
		width: 100%;
		height: 100%;
		background-image: url("../images/main_can.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		position: absolute;
		bottom: -10px;
		left: 0;
		z-index: 2;
		display: none;
		opacity: 0;
	}

	#topMain #topCan img {
		width: 100%;
		height: 100%;
	}

	#topMain #topTR {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}

	#topMain #topTR .lowmalt {
		position: absolute;
		bottom: 68px;
		right: 50%;
		margin-right: 163px;
		opacity: 0;
		display: none;
	}

	#topMain #topTR .lowmalt img {
		width: 73px;
		height: auto;
	}

	#topMain .title-1.pc,
	#topMain .title-2.pc {
		height: 0;
		position: absolute;
		overflow: hidden;
	}

	#topMain #topTR .title-1.pc {
		right: 50%;
		top: 50%;
		margin-top: -234px;
		margin-right: 260px;
		opacity: 0;
	}

	#topMain #topTR .title-2.pc {
		left: 50%;
		top: 50%;
		margin-top: -214px;
		margin-left: 310px;
		opacity: 0;
	}

	#topMain #topTR .anniversary {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -236px;
		margin-left: 246px;
		opacity: 0;
		display: none;
	}

	#topMain #topTR .anniversary img {
		width: 266px;
		height: auto;
	}

	#topMain #topNews {
		background-image: url("../images/top_news_bg.jpg");
	}

	#topMain #topNews .news p:before {
		background-image: url("../images/top_news_i.png");
	}

	#TRCampaign {
		/* min-height: 900px; */
		/* min-height: 760px; */
		min-height: 750px;
	}

	#TRCampaign .bg {
		width: 100%;
		height: 100%;
		/*background-image: url("../images/campaign_bg.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;*/
		background-image: -moz-linear-gradient( 180deg, #005ca5 0%, #023174 100%);
		background-image: -webkit-linear-gradient( 180deg, #005ca5 0%, #023174 100%);
		background-image: -ms-linear-gradient( 180deg, #005ca5 0%, #023174 100%);
		background-image: linear-gradient( 180deg, #005ca5 0%, #023174 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#TRCampaign .inner {
		width: 960px;
		/*height: 580px;*/
		/*height: 1070px;*/
		/*margin-top: 30px;*/
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 3;
		transform: translate(-50%,-50%);
	}

	#TRCampaign h2 {
		width: 305px;
		height: 46px;
		background-image: url("../images/campaign_title.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		margin: 0 auto;
		overflow: hidden;
	}

	#TRCampaign .banner {
		margin-top: 40px;
	}

	#TRCampaign .banner:last-child {
		margin-top: 60px;
	}

	#TRCampaign .banner img {
		width: 100%;
		height: auto;
		border: 2px #fff solid;
	}

	#TRCampaign .btnDetail {
		width: 415px;
		margin: 40px auto 0 auto;
	}

	#TRCampaign .btnDetail img {
		width: 100%;
		height: auto;
	}

	#TRMessage{
		height: 670px !important;
	}

	#TRMessage .bg {
		width: 100%;
		height: 100%;
		background-image: url("../images/message_bg.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#TRMessage .image {
		width: 480px;
		min-width: 330px;
		margin-right: 70px;
		position: absolute;
		bottom: 0;
		right: 50%;
		z-index: 2;
	}

	#TRMessage .image img {
		width: 100%;
		height: auto;
	}

	#TRMessage .inner {
		height: 420px;
		margin: 50px 0 0 0px;
		z-index: 3;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translateY( -50% );
		transform: translateY( -50% );
	}

	#TRMessage h2 {
		font-size: 65px;
		letter-spacing: -0.1em;
		line-height: 1;
	}

	#TRMessage p {
		font-size: 18px;
		line-height: 1.777;
		color: #FFF;
		margin-top: 30px;
	}

	#TRMessage h3 {
		font-size: 26px;
		font-weight: bold;
		letter-spacing: -0.05em;
		line-height: 1;
		color: #FFF;
		margin-top: 30px;
	}

	#TRMessage h2 {
		width: 505px;
		height: 59px;
		background-image: url("../images/message_title.png?date=20181210");
		background-repeat: no-repeat;
		background-position: 0 0;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRMessage p {
		width: 305px;
		height: 178px;
		/*background-image: url("../images/message_text.png?date=20181210");*/
		background-repeat: no-repeat;
		background-position: 0 0;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRMessage h3 {
		width: 475px;
		height: 226px;
		background-image: url("../images/message_catch.png?date=20181210");
		background-repeat: no-repeat;
		background-position: 0 0;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRTVCM .bg {
		width: 100%;
		height: 100%;
		background-image: url("../images/tvcm_bg.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#TRTVCM .inner {
		width: 960px;
		height: 456px;
		margin-top: 30px;
		z-index: 3;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}

	#TRTVCM h2 {
		width: 146px;
		height: 44px;
		background-image: url("../images/tvcm_title.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: contain;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		margin: 0 auto;
	}

	#TRTVCM ul {
		margin-top: 123px;
		text-align: center;
	}

	#TRTVCM ul li {
		width: 465px;
		text-align: center;
		display: inline-block;
	}

	#TRTVCM ul li:nth-child(even) {
		float: right;
	}

	#TRTVCM ul li a {
		color: #FFF;
		display: block;
		position: relative;
		-webkit-transform: translate3d( 0,0,0 );
		transform: translate3d( 0,0,0 );
	}

	#TRTVCM ul li img {
		width: 100%;
		height: auto;
	}

	#TRTVCM ul li .splash {
		width: 465px;
		height: 222px;
		background-position: center center;
		background-size: cover;
		position: relative;
		-webkit-transition: opacity 0.25s ease-in-out;
		transition: opacity 0.25s ease-in-out;
	}

	#TRTVCM ul li a:hover .splash {
		opacity: .75;
	}

	#TRTVCM ul li .splash .btn {
		width: 62px;
		height: 62px;
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}

	#TRTVCM ul li p {
		font-size: 20px;
		line-height: 1.5;
		margin-top: 16px;
	}

	#modalTVCM {
		width: 100%;
		max-width: 853px;
		height: 480px;
		position: relative;
	}

	#modalTVCM .btnClose {
		top: -49px;
		right: 0;
	}

	#modalTVCM .carousel {
		height: 480px;
	}

	#modalTVCM .carousel .slick-list {
		max-width: 853px;
		height: 480px;
		margin: 0 auto;
		position: relative;
	}

	#modalTVCM .carousel .slick-slide {
		width: 853px;
		height: 480px;
		position: relative;
		overflow: hidden;
	}

	#modalTVCM .splash {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	#modalTVCM .splash img {
		width: 100%;
		height: 100%;
	}

	#modalTVCM .ytPlayer {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		display: none;
	}
	#TRProduct{
		background: linear-gradient(to bottom, rgba(0,92,165,1) 0%,rgba(2,48,115,1) 100%);
		min-height: 0;
		height: auto;
	}
	#TRProduct h2 {
		grid-column: 1 / 3;
    grid-row: 1 / 2;
		width: 100%;
		height: 49px;
		line-height: 1;
		margin-bottom: 22px;
		background-image: url("../images/product_title.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

/*
	#TRProduct {
		min-height: 800px;
	}

	#TRProduct .bg {
		width: 100%;
		height: 100%;
		background-image: url("../images/product_bg.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
*/
/*	#TRProduct .image {
		width: 70vh;
		min-width: 560px;
		margin-left: 50px;
		position: absolute;
		bottom: 0;
		left: 50%;
		z-index: 3;
	}

	#TRProduct .image img {
		width: 100%;
		height: auto;
	}

	#TRProduct .image .image1 {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	#TRProduct .lowmalt {
		width: 20px;
		height: 50px;
		margin-left: 17px;
		position: absolute;
		bottom: 15px;
		left: 50%;
		z-index: 4;
	}

	#TRProduct .lowmalt img {
		width: 100%;
		height: auto;
	}

	#TRProduct .inner {
		width: 960px;
		z-index: 4;
		margin-top: 30px;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translateX( -50% ) translateY( -50% );
		transform: translateX( -50% ) translateY( -50% );
	}

	#TRProduct h3.catch1 {
		width: 450px;
		height: 111px;
		margin-top: 12px;
		background-image: url("../images/product_catch_1.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRProduct h3.catch2 {
		width: 362px;
		height: 27px;
		margin-top: 20px;
		background-image: url("../images/product_catch_2.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRProduct h3.catch3 {
		width: 330px;
		height: 26px;
		margin-top: 20px;
		background-image: url("../images/product_catch_3.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRProduct h3.underline {
		border-bottom: 3px solid #FFF;
		padding-bottom: 8px;
		display: inline-block;
	}

	#TRProduct p {
		font-size: 16px;
		letter-spacing: -0.05em;
		line-height: 1.875;
		color: #FFF;
		margin-top: 14px;
	}

	#TRProduct  p.attention {
		font-size: 12px;
	}

	#TRProduct .btnComposition {
		width: 416px;
		margin-top: 40px;
	}
*//*
	#modalComposition {
		width: 100%;
		height: 469px;
		background-color: #012763;
	}

	#modalComposition .btnClose {
		top: -49px;
		right: 0;
	}
*/
	.productInner {
		max-width: 960px;
		margin: 0 auto;
		padding: 100px 0;
		position: relative;
	}

	.productInner .inner {
		display: flex;
		justify-content: space-between;
    align-items: flex-start;
	}
	.productInner .image {
		max-width: 177px;
	}
	.productInner .text {
		display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, auto);
		justify-content: space-between;
    align-items: start;
		width: 100%;
    max-width: 734px;
	}
	.productInner .ingredients {
		grid-column: 1 / 2;
    grid-row: 2 / 3;
		width: 100%;
		max-width: 243px;
	}

	.productInner .ingredients h3 {
		display: inline-block;
	}

	.productInner .ingredients h3,
	.productInner .composition h3 {
		font-size: 24px;
		line-height: 1;
		color: #FFF;
		padding-bottom: 6px;
		border-bottom: 3px solid #FFF;
	}

	.productInner .composition h3 {
		display: inline-block;
	}

	.productInner .ingredients p {
		font-size: 18px;
		line-height: 1.237;
		letter-spacing: -0.05em;
		color: #FFF;
		margin-top: 16px;
	}

	.productInner .image .caption{
		color: #FFF;
		font-size: 18px;
		text-align: center;
		margin-top: 10px;
	}
	.productInner .ingredients .alc {
/*		border: 1px solid #fff;
		padding: 7px 10px;
		margin-top: 70px;
		display: flex;
		-webkit-justify-content: space-between;
		        justify-content: space-between;
*/	}

	.productInner .ingredients .alc {
		margin-top: 30px;
	}

	.productInner .composition {
		grid-column: 2 / 3;
    grid-row: 2 / 3;
		width: 100%;
		max-width: 477px;
	}

	.productInner .composition .left {
		width: 232px;
		float: left;
	}

	.productInner .composition .right {
		width: 172px;
		float: right;
	}

	.productInner .composition ul {
		margin-top: 8px;
	}

	.productInner .composition li {
		border-bottom: 1px solid #FFF;
		font-size: 18px;
		line-height: 1;
		letter-spacing: -0.05em;
		color: #FFF;
		padding: 8px 0;
		position: relative;
	}

	.productInner .composition li:last-child {
		border-bottom: none;
	}

	.productInner .composition li span.unit {
		text-align: right;
		display: inline-block;
		position: absolute;
		top: 8px;
		right: 0;
	}

	.productInner .composition li span.gram {
		font-family: 'Open Sans', sans-serif;
	}
	.productInner .attention {
		grid-column: 1 / 3;
    grid-row: 3/4;
		color: #FFF;
		width: 100%;
		text-align: right;
	}
	#TRHistory {

	}

	#TRHistory .graphic {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		overflow: hidden;
	}

	#TRHistory .graphic .bg {
		width: 100%;
		height: 100%;
		background-image: url("../images/history_bg.jpg");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#TRHistory .graphic .image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
	}

	#TRHistory .graphic .image li {
		width: 39.4vh;
		min-width: 236px;
		position: absolute;
		bottom: 60px;
		right: 25.8vh;
	}

	#TRHistory .graphic .image li img {
		width: 100%;
		height: auto;
	}

	#TRHistory .graphic .circle {
		width: 188px;
		height: 188px;
		margin: -188px -188px 0 0;
		position: absolute;
		top: 45.38vh;
		right: 38.58vh;
		z-index: 3;
	}

	#TRHistory .graphic .circle li {
		position: absolute;
		top: 0;
		right: 0;
	}

	#TRHistory .graphic .circle li img {
		width: 100%;
		height: auto;
	}

	#TRHistory .detail {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		background-color: #023073;
		z-index: 1;
		overflow: hidden;
		-webkit-transform: translate3d( 0 , 0 , 0 );
		transform: translate3d( 0 , 0 , 0 );
	}

	#TRHistory .detail .inner {
		width: 100%;
		height: 460px;
		margin-top: 30px;
		position: absolute;
		top: 50%;
		left: 0;
		-webkit-transform: translateY( -50% );
		transform: translateY( -50% );
	}

	#TRHistory .detail .btn {
		position: absolute;
		top: 118px;
		left: 327px;
		z-index: 99;
	}

	#TRHistory .detail .btn li {
		margin: 0 10px;
		display: inline-block;
	}

	#TRHistory .detail .text {
		width: 416px;
		margin-left: 65px;
		margin-top: 48px;
		position: relative;
		-webkit-transform: translate3d( 0 , 0 , 0 );
		transform: translate3d( 0 , 0 , 0 );
	}

	#TRHistory .detail .text li {
		position: absolute;
		top: 0;
		left: 0;
	}

	#TRHistory .detail h2 {
		font-size: 54px;
		letter-spacing: -0.1em;
		line-height: 1;
		margin-left: 65px;
	}

	#TRHistory h2 {
		width: 345px;
		height: 49px;
		background-image: url("../images/history_title.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRHistory h3 {
		border-bottom: 3px solid #FFF;
		font-size: 24px;
		letter-spacing: -0.05em;
		line-height: 1;
		color: #FFF;
		padding-bottom: 8px;
		position: relative;
		display: inline-block;
	}

	#TRHistory .detail .text .icon {
		position: absolute;
		bottom: 0;
		right: -80px;
	}

	#TRHistory .detail .text .icon img {
		width: 85px;
		height: auto;
	}

	#TRHistory .detail p {
		font-size: 16px;
		line-height: 1.75;
		color: #FFF;
		margin-top: 22px;
	}

	#TRHistory .detail .menu {
		width: 100%;
		height: 42px;
		border-bottom: 1px dotted #FFF;
		position: absolute;
		bottom: 6px;
		left: 0;
	}

	#TRHistory .detail .menu ul {
		width: 2000px;
		position: absolute;
		top: 0;
		left: 250px;
	}

	#TRHistory .detail .menu li {
		width: 78px;
		height: 48px;
		margin-right: 14px;
		position: relative;
		float: left;
	}

	#TRHistory .detail .menu li.current:after {
		content: "";
		width: 13px;
		height: 13px;
		background: #FFF;
		position: absolute;
		left: -6px;
		bottom: 0;
		display: block;
		border-radius: 50%;
	}

	#TRHistory .detail .menu li:last-child {
		margin-right: 0;
	}

	#TRHistory .detail .menu li img {
		width: 78px;
		margin-left: -39px;
	}

	#TRBanner {
		height: 200px;
	}

	#TRBanner .bg {
		width: 100%;
		height: 100%;
		background-image: url("../images/banner_bg.jpg");
		background-position: center center;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#TRBanner .inner {
		max-width: 960px;
		text-align: center;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}
	#TRBanner .inner ul {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#TRBanner li {
		display: inline-block;
		width: 320px;
	}

	#TRBanner .inner .btnTop {
		width: 26px;
		position: absolute;
		top: 50%;
		right: -96px;
		-webkit-transform: translateY( -50% );
		transform: translateY( -50% );
	}

	#TRBanner .inner .btnTop img {
		width: 100%;
		height: auto;
	}

}

@media screen and (min-width:769px) and (max-height:600px) {
	#TRHistory .graphic .image li {
		right: 155px;
	}

	#TRHistory .graphic .circle {
		top: 272px;
		right: 231px;
	}
}


/* ===========================================
TABLET
=============================================*/

@media screen and (min-width:641px) and (max-width:768px) {

}

/* ===========================================
SP
=============================================*/

@media screen and (max-width:768px) {

	#Cont h2 {
		font-weight: bold;
		line-height: 1;
		letter-spacing: -0.05em;
		color: #FFF;
	}

	#topMenu {
		background-image: url("../images/sp/menu_bg.jpg");
		z-index: 1000;
	}

	#topMenu h1 {
		margin-top: 17px;
	}

	#topMenu h1 img {
		width: 106px;
		height: auto;
	}

	#topMenu .drawer {
		background: rgba( 0, 17, 38, 0.8 );
	}

	#topMenu .mainMenu {
		background-image: url(../images/sp/menu_navi_bg.jpg);
	}

	#topMenu .mainMenu .btnLink {
		background-image: url(../images/sp/menu_navi_bg_2.jpg);
	}

	#topMenu .mainMenu .btnLink img {
		width: 162px;
		margin-top: 18px;
	}

	#topMain{
		height: auto !important;
		min-height: 100px !important;
	}

	#topMain > .inner {
		/* height: calc( 100% - 48px - 38px ); */
		/*height: calc( 100% - 48px );*/
		height: auto !important;
		position: static;
		/* padding-top: 48px; */
	}

	#topMain #topTR a {
		width: 100%;
		height: 100%;
		display: block;
	}

/*	#topMain #topBG {
		width: 104%;
		height: 104%;
		background-image: url("../images/main_bg.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		position: absolute;
		top: -2%;
		left: -2%;
		z-index: 0;
		display: none;
		opacity: 0;
	}
*/
	#topMain #topBG {
		transform: none!important;
	}
	#topMain .mainImg img{
		max-width: 100%;
	}
	#topMain #topMountain {
		width: 104%;
		height: 104%;
		background-image: url("../images/main_mountain.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		position: absolute;
		top: -2%;
		left: -2%;
		z-index: 1;
		display: none;
		opacity: 0;
	}

	#topMain #topCan {
		width: 104%;
		height: 94%;
		background-image: url("../images/main_can.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: auto 100%;
		margin-bottom: -5%;
		position: absolute;
		bottom: -10px;
		left: -2%;
		z-index: 2;
		display: none;
		opacity: 0;
	}

	#topMain #topCan img {
		width: 100%;
		height: 100%;
	}

	#topMain #topTR {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}

	#topMain .btn img {
		width: 100%;
		height: auto;
	}

	#topMain #topTR .lowmalt {
		margin-right: 93px;
		position: absolute;
		bottom: 14px;
		right: 50%;
		opacity: 0;
		display: none;
	}

	#topMain #topTR .lowmalt img {
		width: 54px;
		height: auto;
	}

	#topMain .title-1.sp,
	#topMain .title-2.sp {
		height: 0;
		position: absolute;
		overflow: hidden;
	}

	#topMain .title-1.sp img,
	#topMain .title-2.sp img {
		width: 100%;
		height: auto;
	}

	#topMain #topTR .title-1.sp {
		width: 245px;
		margin-top: 18px;
		margin-left: -122px;
		left: 50%;
		top: 15%;
		opacity: 0;
	}

	#topMain #topTR .title-2.sp {
		width: 197px;
		margin-top: -33px;
		margin-left: -98px;
		left: 50%;
		top: 15%;
		opacity: 0;
	}

	#topMain #topTR {
		z-index: 4;
	}

	#topMain #topTR .anniversary {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -89px;
		margin-left: 67px;
		opacity: 0;
		display: none;
	}

	#topMain #topTR .anniversary img {
		width: 107px;
		height: auto;
	}

	#topMain #topNews .news {
		background-image: url("../images/sp/top_news_bg.jpg");
	}

	#topMain #topNews .news p:before {
		background-image: url("../images/sp/top_news_i.png");
	}

	#TRCampaign .bg {
		width: 100%;
		height: 100%;
		background-image: url("../images/sp/campaign_bg.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#TRCampaign .inner {
		width: 307px;
		/*height: 444px;*/
		/*height: 814px;*/
		z-index: 3;
		left: 50%;
		top: 50%;
		position: absolute;
		transform: translate(-50%,-50%);
	}

	#TRCampaign h2 {
		width: 165px;
		height: 26px;
		background-image: url("../images/sp/campaign_title.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		margin: 0 auto;
		overflow: hidden;
	}

	#TRCampaign .banner {
		margin-top: 6.7vw;
	}

	#TRCampaign .banner img {
		width: 100%;
		height: auto;
		border: 2px #fff solid;
		box-sizing: border-box;
	}

	#TRCampaign .btnDetail {
		width: 180px;
		margin: 24px auto 0 auto;
	}

	#TRCampaign .btnDetail img {
		width: 100%;
		height: auto;
	}

	#TRMessage{
		min-height: auto;
		height: 550px;
	}
	#TRMessage .bg {
		width: 100%;
		height: 100%;
		background-image: url("../images/message_bg.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#TRMessage .image {
		width: 300px;
		min-width: 170px;
		position: absolute;
		bottom: -50px;
		left: 50%;
		z-index: 2;
		-webkit-transform: translateX( -50% );
		transform: translateX( -50% );
	}

	#TRMessage .image img {
		width: 100%;
		height: auto;
	}

	#TRMessage .inner {
		width: 307px;
		height: 226px;
		margin: 70px auto 0 auto;
		z-index: 3;
		position: relative;
	}

	#TRMessage h2 {
		font-size: 30px;
		letter-spacing: -0.1em;
		line-height: 1;
	}

	#TRMessage p {
		font-size: 12px;
		font-weight: bold;
		letter-spacing: -0.075em;
		line-height: 1.58;
		color: #FFF;
		margin-top: 16px;
	}

	#TRMessage h3 {
		font-size: 18px;
		font-weight: bold;
		letter-spacing: -0.05em;
		line-height: 1;
		color: #FFF;
		margin-top: 14px;
	}

	#TRMessage h2 {
		width: 145px;
		height: 35px;
		background-image: url("../images/sp/message_title.png?date=20181210");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRMessage p {
		width: 209px;
		height: 112px;
		/*background-image: url("../images/sp/message_text.png?date=20181210");*/
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRMessage h3 {
		width: 257px;
		height: 129px;
		background-image: url("../images/sp/message_catch.png?date=20181210");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRTVCM .bg {
		width: 100%;
		height: 100%;
		background-image: url("../images/sp/tvcm_bg.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#TRTVCM .inner {
		width: 335px;
		height: 467px;
		margin-top: 0;
		z-index: 3;
		left: 50%;
		top: 50%;
		position: absolute;
		transform: translate(-50%,-50%);
	}

	#TRTVCM h2 {
		width: 79px;
		height: 25px;
		background-image: url("../images/tvcm_title.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		margin: 0 auto;
	}

	#TRTVCM ul {

	}

	#TRTVCM ul li {
		text-align: center;
		margin-top: 30px;
	}

	#TRTVCM ul li:nth-child(even) {
		float: right;
	}

	#TRTVCM ul li a {
		color: #FFF;
		display: block;
		position: relative;
		-webkit-transform: translate3d( 0,0,0 );
		transform: translate3d( 0,0,0 );
	}

	#TRTVCM ul li img {
		width: 100%;
		height: auto;
	}

	#TRTVCM ul li .splash {
		width: 335px;
		height: 160px;
		background-position: center center;
		background-size: cover;
		position: relative;
	}

	#TRTVCM ul li .splash .btn {
		width: 44px;
		height: 44px;
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}

	#TRTVCM ul li p {
		font-size: 12px;
		line-height: 1.5;
		margin-top: 8px;
	}

	#modalTVCM {
		width: 100%;
		height: 56.25vw;
		position: relative;
	}

	#modalTVCM .carousel .slick-slide {
		width: 100%;
		height: 56.25vw;
		position: relative;
	}

	#modalTVCM .splash {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	#modalTVCM .splash img {
		width: 100%;
		height: 100%;
	}

	#modalTVCM .ytPlayer {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		display: none;
	}
	#TRProduct{
		background: linear-gradient(to bottom, rgba(0,92,165,1) 0%,rgba(2,48,115,1) 100%);
		height: auto !important;
	}
	#TRProduct h2 {
		font-size: 30px;
		letter-spacing: -0.1em;
		line-height: 1;
	}
	#TRProduct h2 {
		width: 114px;
		height: 28px;
		background-image: url("../images/sp/product_title.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

/*	#TRProduct .bg {
		width: 100%;
		height: 100%;
		background-image: url("../images/sp/product_bg.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
*/
/*	#TRProduct .image {
		width: calc( ( 100vh - 466px ) * 0.8 );
		min-width: 108px;
		position: absolute;
		bottom: 0;
		right: 4%;
		z-index: 3;
	}

	#TRProduct .image img {
		width: 100%;
		height: auto;
	}

	#TRProduct .image .image1 {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	#TRProduct .lowmalt {
		width: 15px;
		height: 35px;
		position: absolute;
		bottom: 9px;
		right: calc( ( 100vh - 466px ) * 0.8 + 30px );
		z-index: 4;
	}

	#TRProduct .lowmalt img {
		width: 100%;
		height: auto;
	}

	#TRProduct .inner {
		width: 320px;
		height: 296px;
		margin: 84px auto 0 auto;
		z-index: 4;
		position: relative;
	}

	#TRProduct h3 {
		font-size: 19px;
		font-weight: bold;
		letter-spacing: -0.1em;
		line-height: 1.315;
		color: #FFF;
	}

	#TRProduct h3.catch1 {
		width: 311px;
		height: 68px;
		margin-top: 22px;
		background-image: url("../images/sp/product_catch_1.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRProduct h3.catch2 {
		width: 245px;
		height: 19px;
		background-image: url("../images/sp/product_catch_2.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRProduct h3.catch3 {
		width: 223px;
		height: 18px;
		background-image: url("../images/sp/product_catch_3.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRProduct  h3.underline {
		border-bottom: 2px solid #FFF;
		padding-bottom: 5px;
		display: inline-block;
	}

	#TRProduct  p {
		font-size: 12px;
		font-weight: bold;
		letter-spacing: -0.05em;
		line-height: 1.666;
		color: #FFF;
		margin: 10px 0 20px 0;
	}

	#TRProduct  p.attention {
		font-size: 9px;
	}

	#TRProduct .btnComposition {
		width: 180px;
		margin-top: 20px;
	}

	#TRProduct .btnComposition img {
		width: 100%;
		height: auto;
	}
*/
	.productInner {
		width: calc( 100% - 70px );
		height: 100%;
		margin: 0 auto;
	}

	.productInner .inner {
		width: 230px;
		height: auto !important;
		margin: 0 auto;
		padding: 40px 0;
	}

	.productInner .image {
		width: 80px;
		height: auto;
		margin: 0 auto 20px;
		display: block;
	}

	.productInner .image img {
		max-width: 100%!important;
	}

	.productInner .image .caption{
		color: #FFF;
		font-size: 11px;
		text-align: center;
		margin-top: 10px;
	}
	.productInner .ingredients .alc {
		margin-top: 30px;
/*		border: 1px solid #fff;
		padding: 7px 10px;
		margin-top: 20px;
		display: flex;
		-webkit-justify-content: space-between;
		        justify-content: space-between;
*/	}

	.productInner .ingredients {
		margin-top: 30px;
	}

	.productInner .ingredients h3 {
		display: inline-block;
	}

	.productInner .ingredients h3,
	.productInner .composition h3 {
		font-size: 15px;
		font-weight: bold;
		line-height: 1;
		color: #FFF;
		padding-bottom: 4px;
		border-bottom: 2px solid #FFF;
	}

	.productInner .composition h3 {
		display: inline-block;
	}

	.productInner .ingredients p {
		font-size: 11px;
		line-height: 1.237;
		letter-spacing: -0.05em;
		color: #FFF;
		margin-top: 8px;
	}

	.productInner .composition {
		margin-top: 1px;
	}

	.productInner .composition .left {
		margin-top: 8px;
	}

	.productInner .composition li {
		border-bottom: 1px solid #FFF;
		font-size: 11px;
		line-height: 1;
		letter-spacing: -0.05em;
		color: #FFF;
		padding: 4px 0;
		position: relative;
	}

	.productInner .composition li span.unit {
		text-align: right;
		display: inline-block;
		position: absolute;
		top: 4px;
		right: 0;
	}

	.productInner .composition li span.gram {
		font-family: 'Open Sans', sans-serif;
	}

	.productInner .attention {
		color: #fff;
		margin-top: 20px;
	}

	#TRHistory {
		background-color: #023073;
	}

	#TRHistory .graphic {
		width: 100%;
		height: calc( 100vh - 375px );
		min-height: 225px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		overflow: hidden;
	}

	#TRHistory .graphic .bg {
		width: 100%;
		height: 100%;
		background-image: url("../images/history_bg.jpg");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#TRHistory .graphic .image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
	}

	#TRHistory .graphic .image li {
		width: 50px;
		width: calc( ( 100vh - 375px ) * 0.53 );
		min-width: 119px;
		margin-lef: -25px;
		margin-left: calc( ( 100vh - 375px ) * 0.53 * -0.4 );
		position: absolute;
		bottom: 2.6vh;
		left: 50%;
	}

	#TRHistory .graphic .image li img {
		width: 100%;
		height: auto;
	}

	#TRHistory .graphic .circle {
		width: 89px;
		height: 89px;
		position: absolute;
		top: 3.585vh;
		right: 5.896vh;
		z-index: 3;
	}

	#TRHistory .graphic .circle li {
		position: absolute;
		top: 0;
		right: 0;
	}

	#TRHistory .graphic .circle li img {
		width: 100%;
		height: auto;
	}

	#TRHistory .detail {
		width: 100%;
		z-index: 3;
		position: relative;
		overflow: hidden;
		-webkit-transform: translate3d( 0 , 0 , 0 );
		transform: translate3d( 0 , 0 , 0 );
	}

	#TRHistory .detail .inner {
		width: 100%;
		height: 325px;
		margin-top: 50px;
		position: relative;
		overflow: hidden;
	}

	#TRHistory .detail .btn {
		width: 307px;
		text-align: right;
		position: absolute;
		top: 95px;
		left: 50%;
		margin-left: -153px;
		z-index: 99;
	}

	#TRHistory .detail .btn li {
		margin: 0 6px;
		display: inline-block;
	}

	#TRHistory .detail .btn li img {
		width: auto;
		height: 13px;
	}

	#TRHistory .detail .text {
		width: 307px;
		margin: 20px auto 0 auto;
		position: relative;
		-webkit-transform: translate3d( 0 , 0 , 0 );
		transform: translate3d( 0 , 0 , 0 );
	}

	#TRHistory .detail .text li {
		position: absolute;
		top: 0;
		left: 0;
	}

	#TRHistory .detail h2 {
		width: 307px;
		font-size: 30px;
		letter-spacing: -0.1em;
		line-height: 1;
		margin: 34px auto 0 auto;
	}

	#TRHistory .detail h2 {
		height: 27px;
		background-image: url("../images/sp/history_title.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 195px auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	#TRHistory h3 {
		border-bottom: 2px solid #FFF;
		font-size: 17px;
		font-weight: bold;
		letter-spacing: -0.05em;
		line-height: 1;
		color: #FFF;
		padding-bottom: 5px;
		position: relative;
		display: inline-block;
	}

	#TRHistory .detail .text .icon {
		position: absolute;
		bottom: -2px;
		right: -50px;
	}

	#TRHistory .detail .text .icon img {
		width: 50px;
		height: auto;
	}

	#TRHistory .detail p {
		font-size: 12px;
		font-weight: bold;
		line-height: 1.666;
		color: #FFF;
		margin-top: 12px;
	}

	#TRHistory .detail .menu {
		width: 100%;
		height: 25px;
		border-bottom: 1px dotted #FFF;
		position: absolute;
		bottom: 21px;
		left: 0;
	}

	#TRHistory .detail .menu ul {
		width: 2000px;
		position: absolute;
		top: 0;
		left: 50%;
	}

	#TRHistory .detail .menu li {
		width: 45px;
		height: 29px;
		margin-right: 9px;
		position: relative;
		float: left;
	}

	#TRHistory .detail .menu li.current:after {
		content: "";
		width: 8px;
		height: 8px;
		background: #FFF;
		position: absolute;
		left: -4px;
		bottom: 0;
		display: block;
		border-radius: 50%;
	}

	#TRHistory .detail .menu li:last-child {
		margin-right: 0;
	}

	#TRHistory .detail .menu li img {
		width: 45px;
		margin-left: -27px;
	}

	#TRBanner .bg {
		width: 100%;
		height: 60px;
		background-image: url("../images/banner_bg.jpg");
		background-position: center center;
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	#TRBanner .inner {
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}

	#TRBanner li {
		width: 100%;
	}

	#TRBanner li img {
		width: 100%;
		height: auto;
	}

	#TRBanner .inner .btnTop {
		width: 100%;
		height: 60px;
		position: relative;
	}

	#TRBanner .inner .btnTop a {
		width: 100%;
		height: 100%;
		display: block;
	}

	#TRBanner .inner .btnTop img {
		width: 17px;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translateX( -50% ) translateY( -50% );
		transform: translateX( -50% ) translateY( -50% );
	}

}

/*@media screen and (max-width: 768px) and (max-height:600px) {
	#TRProduct .lowmalt {
		right: 138px;
	}


	#TRHistory .graphic .image li {
		margin-left: -48px;
		bottom: 16px;
	}

	#TRHistory .graphic .circle {
		top: 22px;
		right: 35px;
	}


}
*/
@media screen and (max-width:640px) {

}