@charset "utf-8";
/*   
Theme Name: KIRIN ALCOHOLZERO
Description: KIRIN ALCOHOLZERO
Version: 2020.01
Author: YH
*/

/* ------------------------------------------
   Utility Class
------------------------------------------ */
/*** clearfix ***/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

/* Style
-------------------------------------------------------------- */

.non_pc { display: none !important; }

.content img {
	display: block;
	max-width: 100%;
}
.content a {
    transition: opacity 0.3s ease;
}
.content a:hover {
    opacity: 0.75;
}

/* ===========================================================================================

	Common

=========================================================================================== */

.content {
	background: url(../images/bg_main2.png) no-repeat top center, url(../images/bg_main.png) repeat top center;
	background-size: 2765px auto, 576px auto;
	
}
.content .main {
	width: 958px;
	margin: 0 auto;
	padding: 30px 0;
}
.content .page_header {
    padding-top: 30px;
    width: 958px;
    margin: 0 auto;
}

.content .page_header h2 {
	width: 199px;
	float: left;
}
.content .page_header .menu {
	float: right;
	margin-top: 17px;
}
.pc_view .content .page_header .menu {
    display: block !important;
    opacity: 1 !important;
}
.content .page_header .menu a {
	float: left;
	display: block;
	margin-left: 50px;
}
.content .page_header .menu a img {
	height: 20px; 
}
.content h3 {
	margin-bottom: 35px;
}

.content .lineup::before,
.content .point::before,
.content .point::after {
	position: absolute;
	content: "";
	display: block;
	width: 54px;
	height: 138px;
	background: url(../images/img_awa.png) no-repeat center center;
	background-size: 54px auto;
}
.content .lineup::before { right: 0; top: 35px; }
.content .point::before { right: 220px; top: 15px; }
.content .point::after { left: 45px; bottom: 20px; }

@media screen and (max-width: 959px) {
	.content {
		background-size: 2150px auto, 406px auto;

	}
    .content .main {
		width: 748px;
		margin: 0 auto;
		padding: 30px 0;
	}
	.content .page_header {
		width: 748px;
	}
	.content .page_header h2 {
		width: 150px;
	}
	.content .page_header .menu a {
		margin-left: 35px;
	}
	.content .page_header .menu a img {
		height: 17px; 
	}
	.content .lineup::before,
	.content .point::before,
	.content .point::after {
	    background-size: 45px auto;
	    width: 45px;
	    height: 118px;
	}
	.content .lineup::before { right: 0; top: 35px; }
	.content .point::before { right: 200px; top: 25px; }
	.content .point::after { left: 45px; bottom: 20px; }

}

/*** Viusal *************************/
.content .visual {
	position: relative;
	margin-bottom: 180px;
}
.content .visual img {
    border-radius: 10px;
    box-shadow: 0 30px 20px rgba(0, 0, 0, 0.35);	
}
@media screen and (max-width: 959px) {
	.content .visual {
		margin-bottom: 100px;
	}
	.content .visual img {
		box-shadow: 0 25px 16px rgba(0, 0, 0, 0.35);	
	}
}

/*** Viusal *************************/
.content .lineup {
	position: relative;
	padding-top: 30px;
}
.content .lineup h3 img {
    width: 322px;
}
.content .lineup h3 img + img {
    height: 20px;
    width: auto;
    margin-left: 5px;
}
.content .lineup .info {
    float: left;
}
.content .lineup .info .lead {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 50px;
}
.content .lineup .info img {
    width: 450px;
}
.content .lineup .img {
	float: right;
	width: 344px;
    margin: -120px 70px 0 0;
}
@media screen and (max-width: 959px) {
	.content .lineup h3 img {
		width: 258px;
	}
	.content .lineup h3 img + img {
		height: 18px;
	}
	.content .lineup .info .lead {
		font-size: 16px;
		margin-bottom: 40px;
	}
	.content .lineup .info img {
		width: 350px;
	}
	.content .lineup .img {
		float: right;
		width: 270px;
		margin: -100px 50px 0 0;
	}
}

/*** Point *************************/
.content .point {
	position: relative;
    margin-top: 120px;
    padding-top: 30px;
}
.content .point h3 img {
    width: 240px;
}
.content .point h3 img + img {
    height: 20px;
    width: auto;
    margin-left: 5px;
    margin-top: 30px;
}
.content .point .info {
	position: relative;
	margin-bottom: 50px;
}
.content .point .info .lead {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}
.content .point .info .text {
	width: 700px;
}
.content .point .info .label {
	position: absolute;
	top: -95px;
	right: 0;
	width: 188px;
}
.content .point .img img:first-child {
    border-radius: 10px;
    margin-bottom: 30px;
}
@media screen and (max-width: 959px) {
	.content .point {
		margin-top: 100px;
		padding-top: 30px;
	}
	.content .point h3 img {
		width: 192px;
	}
	.content .point h3 img + img {
		height: 18px;
	}
	.content .point .info {
		margin-bottom: 40px;
	}
	.content .point .info .lead {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	.content .point .info .text {
		width: 540px;
	}
	.content .point .info .label {
		top: -95px;
		width: 165px;
	}
	.content .point .img img:first-child {
		border-radius: 10px;
		margin-bottom: 20px;
	}
}

/*** Recommend *************************/
.content .recommend {
	position: relative;
    margin-top: 200px;
    padding-top: 30px;
}
.content .recommend h3 img {
    width: 532px;
}
.content .recommend h3 img + img {
    height: 20px;
    width: auto;
    margin-left: 5px;
    margin-top: 30px;
}
.content .recommend .img {
    margin-top: 30px;
}
@media screen and (max-width: 959px) {
	.content .recommend {
		position: relative;
		margin-top: 140px;
		padding-top: 30px;
	}
	.content .recommend h3 img {
		width: 426px;
	}
	.content .recommend h3 img + img {
		height: 18px;
	}
	.content .recommend .img {
		margin-top: 20px;

}



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

.non_sp { display: none !important; }
.non_pc { display: block !important; }

#Main_inner {
    overflow: hidden;
}
	
.content {
	background: url(../images/bg_main2_sp.png) no-repeat top center, url(../images/bg_main.png) repeat top center;
	background-size: 900px auto, 276px auto;
	margin-top: 0 !important;
}
.content .main {
	width: auto;
	max-width: 343px;
	margin: 0 auto;
	padding: 20px 0 30px 0;
}
.content .page_header {
    z-index: 10000;
    position: relative;
    padding: 20px 0 0 0;
    max-width: 343px;
}
.content .page_header h2 {
	width: 120px;
	float: left;
}

.content .page_header .bt_menu {
	display: block;
	position: absolute;
	right: -10px;
	top: 17px;
	z-index: 1000;
}
.content .page_header.fixed .bt_menu {
	position: fixed;
	width: 100%;
	background: #c0143e;
	height: 50px;
	top: 0;
	left: 0;
}
.content .page_header .bt_menu a {
	display: block;
	width: 91px;
	padding: 12px;
	opacity: 1 !important;
}
.content .page_header.fixed .bt_menu a {
    position: absolute;
    left: 50%;
    top: 5px;
    margin-left: 66px;
}
.content .page_header .bt_menu img {
    opacity: 1 !important;
}
.content .page_header.open .bt_menu img {
    opacity: 0 !important;
}
.content .page_header.open .bt_menu a {
	background: url(../images/bt_close.png) no-repeat 81px center;
	background-size: 19px auto;
}
.content .page_header .bt_menu a:hover {
    opacity: 1;
}

.content .page_header .menu {
	display: none;
	background: rgba(255, 255, 255, 0.8);
	float: right;
	margin-top: 0;
	position: absolute;
	top: 0;
	left: 50%;
	width: 800px;
	transform: translate(-50%, 0);
	padding: 45px 0 0 0;
	height: 1000px;
}
.content .page_header.fixed .menu {
    position: fixed;
}
.content .page_header .menu::after {
	background: #c0143e;
	display: block;
	position: absolute;
	content: "";
	top: 0;
	width: 100%;
	height: 281px;
}
.content .page_header .menu a {
	float: none;
	display: block;
	margin-left: 0;
	text-align: center;
	padding: 17px 0;
	position: relative;
	z-index: 100
}
.content .page_header .menu a img {
	display: block;
	height: 15px;
	margin: 0 auto;
}
.content h3 {
	margin-bottom: 15px;
}
.content .lineup::before,
.content .point::before,
.content .point::after {
	width: 27px;
	height: 69px;
	background-size: 27px auto;
}
.content .lineup::before {right: 56px;top: 451px;}
.content .point::before {right: 110px;top: 47px;}
.content .point::after { display: none; }

/*** Viusal *************************/
.content .visual {
	margin-bottom: 5px;
}
.content .visual img {
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.35);
}

/*** Viusal *************************/
.content .lineup {
	padding-top: 70px;
	margin-top: -10px;
}
.content .lineup h3 img {
    width: 161px;
}
.content .lineup h3 img + img {
    height: 14px;
    width: auto;
    margin-left: 0;
}
.content .lineup .info {
    float: none;
}
.content .lineup .info .lead {
	font-size: 13px;
	margin-bottom: 20px;
}
.content .lineup .info img {
    width: 315px;
}
.content .lineup .img {
	float: none;
	width: 175px;
	margin: 50px auto 0 auto;
}

/*** Point *************************/
.content .point {
    margin-top: -10px;
    padding-top: 70px;
}
.content .point h3 img {
    width: 120px;
}
.content .point h3 img + img {
    height: 14px;
    width: auto;
    margin-left: 5px;
    margin-top: 16px;
}
.content .point .info {
	position: relative;
	margin-bottom: 25px;
}
.content .point .info .lead {
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 15px;
}
.content .point .info .text {
	width: 315px;
}
.content .point .info .label {
	position: absolute;
	top: -100px;
	right: 0;
	width: 90px;
}
.content .point .img img:nth-child(2) {
    border-radius: 10px;
    margin-bottom: 15px;
}

/*** Recommend *************************/
.content .recommend {
    margin-top: 0px;
    padding-top: 70px;
}
.content .recommend h3 img {
    width: 266px;
}
.content .recommend h3 img + img {
    height: 14px;
    width: auto;
    margin-left: 5px;
    margin-top: 11px;
}
.content .recommend .img {
    margin-top: 30px;
}

@media screen and (max-width: 374px) {
	.content {
		background-size: 800px auto, 276px auto;
	}
	.content .page_header {
		z-index: 10000;
		position: relative;
		padding: 20px 0 0 0;
		max-width: 300px;
	}
	.content .page_header.fixed .bt_menu a {
		margin-left: 45px;
	}
	.content .main {
		width: auto;
		max-width: 300px;
	}
	.content .lineup::before {right: 26px;top: 421px;}
	.content .point::before {right: 100px;top: 50px;}
	.content .visual {
		margin-bottom: 15px;
	}
	.content .lineup .info .lead {
		font-size: 11px;
		margin-bottom: 15px;
	}
	.content .lineup .info img {
		width: 270px;
	}
	.content .point {
		margin-top: 10px;
	}
	.content .point .info .lead {
		font-size: 11px;
	}
	.content .point .info .text {
		width: 270px;
	}
	.content .recommend {
		margin-top: 20px;
	}
}
}