@charset "utf-8";

/*  PC  ----------------------------------------------*/
@media screen and (min-width: 769px), print {

	body {
		color: #000;
		background: #fff;
		font-size: 1.6rem;
		line-height: 2.0;
	}

	/*  clearfix  ----------------*/
	.clearfix:before,.clearfix:after,
	#container div:before,#container div:after,
	#container dl:before,#container dl:after,
	#container ul:before,#container ul:after{
		content:"";
		display:table;
	}
	.clearfix:after,
	#container div:after,
	#container dl:after,
	#container ul:after {
		clear:both;
	}
	.clearfix,
	#container div,
	#container dl,
	#container ul {
		zoom:1;
	}

	h1 {
		color: #fff;
		font-size: 3.0rem;
		font-weight: normal;
		letter-spacing: 3px;
	}
	h3 {
		font-size: 3.2rem;
		text-align: center;
		font-weight: 500;
		position: relative;
		text-align: center;
		letter-spacing: 3px;
		display: block!important;
	}
	h3:before {
	  border-top: 3px dotted;
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 0;
	  width: 100%;
	}
	h3 span {
	  background-color: white;
	  display: inline-block;
	  padding: 0 0.5em;
	  position: relative;
	}
	h3 i {
		font-size: 4.8rem;
		font-family: 'Times';
		color: #e60012;
		font-weight: bold;
		font-style: normal;
	}
	h4 {
		font-size: 2.4rem;
		font-weight: bold;
		color: #e60012;
	}
	h5 {
		font-size: 2.0rem;
		font-weight: bold;
		color: #e60012;
	}
	.rtn_top {
		text-align: right;
		margin-top: 20px;
		display: block;
	}
	.rtn_top a {
		display: inline!important;
	}
	.rtn_top a img {
		width: 85px;
	}
/*
	.rtn_top a::before {
		background: url(../../img/icon_heart_red.png) center left no-repeat;
		background-size: 30px;
		content: '';
		height: 30px;
		position: absolute;
		right: 125px;
		top: 8px;
		width: 30px;
	}
*/

	/*   header  ----------------*/

  #about #suntory_contents header {
	border-top: 1px solid #CCC;
  }
  #about #suntory_contents header #global_nav li:nth-of-type(2):after {
    border-right: 1px solid #014274;
  }
  #about #suntory_contents header #global_nav li:nth-of-type(1) a span::before,
    #about #suntory_contents header #global_nav li:nth-of-type(2) a span::before,
        #about #suntory_contents header #global_nav li:nth-of-type(4) a span::before {
    background: url(../../img/icon_c.png) center left no-repeat;
	transform: rotateZ(180deg);
    -moz-background-size: 20px;
         background-size: 20px;
    content: '';
    height: 20px;
    left: -26px;
    position: absolute;
    top: -3px;
    width: 20px;
  }

  #suntory_contents header #global_nav .active a span::before {
    background: url(../../img/icon_c.png) center left no-repeat;
    -moz-background-size: 20px;
         background-size: 20px;
    content: '';
    height: 20px;
    left: -24px;
    position: absolute;
    top: 36%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 20px;
  }


	/*  title  ----------------*/

	#title .schwarz {
		background: #000000 url(../img/bg_header.jpg) no-repeat center top;
/* 		background-size: auto; */
/* 		background: #000; */
		background-size: cover;
		min-width: 960px;
		padding: 48px 0 50px;
	}
	#title .grey {
		background: #dcdcdc;
		display: block;
	}
	#title .box_w {
		margin: 0 auto;
		max-width: 1160px;
		min-width: 960px;
		position: relative;
	}
	#title .box_w h1 {
		display: inline-block;
		padding: 0 0 0 45px;
	}
	#title .box_w h1 img {
		width: 256px;
		padding-bottom: 10px;
	}


	#title .box_w p {
		float: right;
		padding: 15px 48px 0 0;
	}
	#title .box_effect {
		background: #dcdcdc;
		display: block;
		margin: 0 auto;
		max-width: 1160px;
		min-width: 960px;
		padding: 4px 0;
		position: relative;
	}
	#title .box_l {
		background: #dcdcdc;
		display: inline-block;
		font-size: 2.6rem;
		font-weight: bold;
		letter-spacing: 2px;
		line-height: 3.6;
		position: relative;
		text-align: center;
		width: 50%;
	}
	#title .box_l::after {
		content: '';
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
		transition: .3s;
		transition: .3s;
		border-style: solid;
		width: 0px;
		_border-color: #000 #000 #007bff #000;
		_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
		border-color: #dcdcdc transparent transparent;
		border-width: 18px 18px 0;
		position: absolute;
		bottom: -16px;
		left: 50%;
		transform: translateX(-50%);
	}
	#title .box_r {
		background: #dcdcdc;
		display: inline-block;
		float: right;
		font-size: 2.6rem;
		font-weight: bold;
		letter-spacing: 2px;
		line-height: 3.6;
		position: relative;
		text-align: center;
		width: 50%;
	}
	#title .box_r::after {
		content: '';
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
		transition: .3s;
		transition: .3s;
		border-style: solid;
		width: 0px;
		_border-color: #000 #000 #007bff #000;
		_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
		border-color: rgb(214, 214, 214) transparent transparent;
		border-width: 18px 18px 0;
		position: absolute;
		bottom: -16px;
		left: 50%;
		transform: translateX(-50%);
	}

	#title .item {
		position: absolute;
		left: 37%;
    top: -98px;
	}
	#title .menu {
		width: 960px;
		margin: 0 auto;
		position: relative;
		text-align: center;
	}
	#title .menu .menu_effect {
		margin: 60px 13px 52px;
	}
	#title .menu .menu_effect div.tit {
		background: #676767;
		color: #fff;
		text-align: center;
		font-size: 2.0rem;
		border-radius: 5px 5px 0 0;
		line-height: 3;
	}
	#title .menu .menu_effect ul {
		border: 2px solid #676767;
		border-radius: 0 0 5px 5px;
		font-size: 0;
	}
	#title .menu .menu_effect ul li {
		box-sizing: border-box;
		display: inline-block;
		position: relative;
		text-align: left;
		vertical-align: top;
		width: 50%;
	}
	#title .menu .menu_effect ul li + li {
		border-left: 2px solid #676767;
	}
	#title .menu .menu_effect ul li a.left,
	#title .menu .menu_effect ul li a.right {
		color: #000;
		font-size: 2.4rem;
		text-decoration: none;
		font-weight: 600;
		line-height: 1.2;
		display: block;
		padding: 40px 0 40px 100px;
	}
	#title .menu .menu_effect ul li a::before {
		position: absolute;
		top: 50%;
		left: 28px;
		height: 107px;
		content: '\02228';
		transform: scale(1.7, 1) translateY(-50%);
		color: #e60012;
		padding-right: 11px;
		font-size: 2.0rem;
		border-right: 1px solid #dcdcdc;
		font-weight: 100;
		line-height: 5;
	}

	/* #title .menu .menu_effect dl {
		display: inline-block;
		width: 460px;
		border: 2px solid #333;
		border-radius: 5px;
	}
	#title .menu .menu_effect dl dt {
		background: #333;
		color: #fff;
		font-size: 2.0rem;
		text-align: center;
		line-height: 3;
	}
	#title .menu .menu_effect dl dd {
		position: relative;
		text-align: left;
	}
	#title .menu .menu_effect dl dd a.left,
	#title .menu .menu_effect dl dd a.right {
		color: #000;
		font-size: 2.4rem;
		text-decoration: none;
		font-weight: 600;
		line-height: 1.2;
		display: block;
		padding: 40px 0 40px 100px;
	}
	#title .menu .menu_effect dl dd a.left::before {
		position: absolute;
		top: 50%;
		left: 28px;
		height: 107px;
		content: '\02228';
		transform: scale(1.7, 1) translateY(-50%);
		color: #e60012;
		padding-right: 11px;
		font-size: 2.0rem;
		border-right: 1px solid #dcdcdc;
		font-weight: 100;
		line-height: 5;
	}
	#title .menu .menu_effect dl dd a.right::after {
		position: absolute;
		top: 50%;
		right: 28px;
		height: 107px;
		content: '\02228';
		transform: scale(1.7, 1) translateY(-50%);
		color: #e60012;
		padding-left: 11px;
		font-size: 2.0rem;
		border-left: 1px solid #dcdcdc;
		font-weight: 100;
		line-height: 5;
	} */
	#title .menu .menu_mechanism {
		text-align: center;
		margin: 0 13px 80px;
	}
	#title .menu .menu_mechanism div.tit {
		background: #676767;
		color: #fff;
		text-align: center;
		font-size: 2.0rem;
		border-radius: 5px 5px 0 0;
		line-height: 3;
	}
	#title .menu .menu_mechanism ul {
		text-align: center;
		border: 2px solid #676767;
		border-radius: 0 0 5px 5px;
	}
	#title .menu .menu_mechanism li {
		line-height: 1.4;
		position: relative;
		border-bottom: 2px solid #676767;
	}
	#title .menu .menu_mechanism li:last-child {
		border-bottom: none;
	}
	#title .menu .menu_mechanism li a {
		color: #000;
		display: block;
		font-size: 2.0rem;
		font-weight: bold;
		padding: 14px 40px 14px 88px;
		text-align: left;
		text-decoration: none;
	}
	#title .menu .menu_mechanism li:first-child a::before,
	#title .menu .menu_mechanism li:nth-child(2) a::before {
		position: absolute;
    top: 50%;
    left: 28px;
    height: 56px;
    content: '\02228';
    transform: scale(1.7, 1) translateY(-50%);
    color: #e60012;
    padding-right: 11px;
    font-size: 2.0rem;
    border-right: 1px solid #dcdcdc;
    font-weight: 100;
    line-height: 3;
	}
	#title .menu .menu_mechanism li a span {
		display: inline-block;
		vertical-align: middle;
	}
	#title .menu .menu_mechanism li a span.no {
		color: #e60012;
		font-family: 'Times New Roman', Times, serif;
		font-size: 6.0rem;
		line-height: 1;
		margin: 0 15px 0 0;
	}

	#effect1 .box_l p + p,
	#effect2 .box_l p + p,
	#mechanism1 .box_l p + p,
	#mechanism2 .box_l p + p {
		margin-top: 30px;
		font-size: 14px;
		line-height: 24px;
	}

	/*  effect1  ----------------*/
	#container #effect1 {
		padding: 0;
		position: relative;
		font-size: 1.6rem;
		margin: 0 0 26px;
	}
	#container #effect1 .box {
		width: 900px;
		margin: 0 auto;
	}
	#container #effect1 .box h2 {
		margin-bottom: 50px;
	}
	#container #effect1 .box_l {
		width: 58%;
		display: inline-block;
		vertical-align: top;
	}
	#container #effect1 .box_r {
		width: 35%;
		display: inline-block;
		margin-left: 5%;
		margin-top: -45px;
	}

	/*  effect2  ----------------*/
	#container #effect2 {
		position: relative;
		font-size: 1.6rem;
		margin: 0 0 48px;
	}
	#container #effect2 .box {
		width: 900px;
		margin: 0 auto;
	}
	#container #effect2 .box h2 {
		margin-bottom: 50px;
	}
	#container #effect2 .box_l {
		width: 58%;
		display: inline-block;
		vertical-align: top;
	}
	#container #effect2 .box_r {
		width: 35%;
		display: inline-block;
		margin-left: 5%;
		margin-top: -45px;
	}

	/*  effect2  ----------------*/
	#mechanism1 {
		padding: 10px 0;
		position: relative;
		font-size: 1.6rem;
		counter-reset: num;
	}
	#mechanism1 .box {
		width: 900px;
		margin: 0 auto;
	}
	#mechanism1 .box .box_l {
		width: 48%;
		display: inline-block;
	}
	#mechanism1 .box .box_r {
		width: 48%;
		display: inline-block;
		text-align: left;
		vertical-align: top;
	}
	#mechanism1 dl {
		padding: 28px 0 32px;
		width: 100%;
	}
	#mechanism1 dl + dl {
		border-top: 1px solid #cccccc;
	}
	#mechanism1 dt {
		font-size: 1.6rem;
		line-height: 2.0;
		display: inline-block;
		margin: 10px 0 0 25px;
		width: calc(100% - 325px);
		vertical-align: top;
	}
	#mechanism1 dd {
		color: #ffc72f;
		font-weight: bold;
		font-size: 2.4rem;
		display: inline-block;
		width: 300px;
		float: left;
	}
	#mechanism1 .btn a {
		font-size: 2.0rem;
		color: #fff;
		background: #e60012;
		text-decoration: none;
		border-radius: 8px;
		padding: 25px 85px;
		position: relative;
	}
	#mechanism1 .btn a:hover {
		opacity: 0.8;
	}
	#mechanism1 .btn a::before {
		content: '';
		background: url(../img/icon_heart_white.png) center left no-repeat;
		margin-left: 40px;
		padding: 25px 40px 0 0;
		position: absolute;
		left:0;
	}

	#mechanism1 dt span {
		color: #e60012;
		counter-increment: num;
		display: block;
		font-size: 2.0rem;
		font-style: normal;
		font-weight: bold;
		line-height: 1.4;
		margin: 0 0 15px;
		padding-left: 50px;
		position: relative;
	}

	#mechanism1 dt span::before {
		border: 2px solid #e60012;
		box-sizing: border-box;
		content: '' counter(num);
		color: #e60012;
		padding: 4px 0;
		margin-right: 10px;
		position: absolute;
		font-size: 1.8rem;
		top: 0;
		left: 0;
		line-height: 1;
		text-align: center;
		width: 30px;
	}



	/*  mechanism2  ----------------*/
	#mechanism2 {
		padding: 10px 0 0 0;
		position: relative;
		font-size: 1.6rem;
	}
	#mechanism2 .box {
		width: 900px;
		margin: 0 auto;
	}
	#mechanism2 .box h2 {
		margin-bottom: 50px;
	}
	#mechanism2 .box_l {
		width: 58%;
		display: inline-block;
		vertical-align: top;
	}
	#mechanism2 .box_r {
		width: 35%;
		display: inline-block;
		margin-left: 5%;
		margin-top: -45px;
	}

	/*-----------------------  展開メニュー内アコーディオン
	*/

	#suntory_contents .ac_menu {
		width: 960px;
		margin: 0 auto 160px;
		padding: 0;
	}
	#suntory_contents .ac_menu a {
	  display: block;
	  padding: 10px;
		text-decoration: none;
		line-height: 1;
		position: relative;
	}
	#suntory_contents .ac_menu .label {
	  display: block;
		padding: 10px 30px 20px;
	  line-height: 1;
		color :#e60012;
	  background: #fff;
		position: relative;
	}
	#suntory_contents .ac_menu .label span {
		font-weight: bold;
		font-size: 2.4rem;
	}
	#suntory_contents .ac_menu input {
		display: none;
	}
	#suntory_contents .ac_menu ul {
		margin: 0;
		padding: 0;
	  background :#fff;
		list-style: none;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	#suntory_contents .ac_menu li {
		border-bottom: none!important;
		padding: 0!important;
		font-size: 1.6rem;
	}
	#suntory_contents .ac_menu li p {
		padding: 15px 0;
	}

}



/*  SP  ----------------------------------------------*/

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

	body {
		color: #000;
		min-width: 320px;
		background: #fff;
	}
	#container {
		color: #000;
		background: #fff;
	}

	/*  main  ----------------*/
	#main .main_img {
		text-align: center;
		background-color: #f6f9fb;
		background-image: url(../img/top_main_bg.jpg);
		width: 100%;
		background-size: cover;
	}

	h1 {
		color: #fff;
		font-size: 2.4rem;
		font-weight: normal;
	}
	h2 {
		color: #000;
		font-size: 2.4rem;
		font-weight: normal;
	}
	h3 {
		font-size: 3.2rem;
		text-align: center;
		font-weight: 500;
		position: relative;
		text-align: center;
		letter-spacing: 3px;
	}
	h3:before {
	  border-top: 3px dotted;
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 0;
	  width: 100%;
	}
	h3 span {
	  background-color: white;
	  display: inline-block;
	  padding: 0 0.5em;
	  position: relative;
	}
	h3 i {
		font-size: 4.8rem;
		font-family: 'Times';
		color: #e60012;
		font-weight: bold;
		font-style: normal;
	}
	h4 {
		font-size: 2.4rem;
		font-weight: bold;
		color: #e60012;
	}

	.rtn_top_sp {
		text-align: right;
		margin: 30px 15px;
		display: block!important;
		position: relative;
	}
	.rtn_top_sp a img {
		width: 80px;
	}
/*
	.rtn_top_sp a::after {
		content: '';
		background: url(../../img/icon_heart_red.png) center left no-repeat;
    background-size: 25px;
    height: 25px;
		margin-top: 0;
		position: absolute;
		right: 92px;
		top: 50%;
		transform: translateY(-50%);
    width: 30px;
	}
*/
	i {
		display: inline-block;
		font-size: 3.0rem;
		font-family: 'Times';
		color: #e60012;
		font-weight: bold;
		font-style: normal;
		vertical-align: middle;
	}

	/*  title  ----------------*/

	#title {
	}
	#title .schwarz {
		background: #000000 url(../img/bg_header_sp.jpg) no-repeat center top;
		background-size: cover;
		padding: 28px 0;
		
	}
	#title .box_w {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	#title .box_w h1 {
		display: inline-block;
		width: 38%;
		font-size: 2.4rem;
		margin-left: 25px;
	}
	#title .box_w h1 img {
		padding-bottom: 5px;
	}
	#title .box_w p {
		float: right;
		margin-right: 15px;
		margin-top: 10px;
		width: 32%;
	}
	#title .box_w p img {
		max-width: 100%;
	}
	#title .box_l {
		width: 50%;
		text-align: center;
		background: #ccc;
		display: inline-block;
		padding: 35px 0;
		font-size: 2.6rem;
		font-weight: bold;
		letter-spacing: 2px;
	}
	#title .box_l::after {
		content: '';
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
		transition: .3s;
		transition: .3s;
		border-style: solid;
		width: 0px;
		_border-color: #000 #000 #007bff #000;
		_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
		border-color: rgb(214, 214, 214) transparent transparent;
		border-width: 18px 18px 0;
		margin-left: 3%;
		position: absolute;
		top: 116px;
		left: 39%;
		margin: 0 0 0 -170px;
	}
	#title .box_r {
		width: 50%;
		text-align: center;
		background: #ccc;
		display: inline-block;
		padding: 35px 0;
		float: right;
		font-size: 2.6rem;
		font-weight: bold;
		letter-spacing: 2px;
	}
	#title .box_r::after {
		content: '';
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
		transition: .3s;
		transition: .3s;
		border-style: solid;
		width: 0px;
		_border-color: #000 #000 #007bff #000;
		_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
		border-color: rgb(214, 214, 214) transparent transparent;
		border-width: 18px 18px 0;
		margin-left: 3%;
		position: absolute;
		top: 116px;
		left: 89%;
		margin: 0 0 0 -170px;
	}
	#title .menu {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	#title .item {
		text-align: center;
	}
	#title .item img {
		width: 100%;
		margin: 8px 0 0 0;
	}
	#title .menu ul {
		margin: 45px 0;
	}
	#title .menu li {
		border: 2px solid #000;
		border-radius: 3px;
		width: 48%;
		display: inline-block;
		margin-bottom: 10px;
		line-height: 1.4;
	}
	#title .menu li a {
		font-size: 2.0rem;
		color: #000;
		font-weight: bold;
		text-decoration: none;
		display: block;
		padding: 10px 40px 10px 60px;
	}
	#title .menu li a::before {
		content: '\02228';
		transform: scale(1.7, 1);
		color: #ff0000;
		margin-left: -25px;
		font-size: 3.8rem;
		border-right: 1px solid #ccc;
	}


	#effect1 .box_l p,
	#effect2 .box_l p,
	#mechanism1 .box_l p,
	#mechanism2 .box_l p {
		font-size: 1.4rem;
		line-height: 21px;
	}

	#effect1 .box_l p + p,
	#effect2 .box_l p + p,
	#mechanism1 .box_l p + p,
	#mechanism2 .box_l p + p {
		font-size: 1.2rem;
		line-height: 18px;
		margin-top: 20px;
	}

	#effect1 .box_r img,
	#effect2 .box_r img,
	#mechanism1 .box_r img,
	#mechanism2 .box_r img {
		width: 80%;
	}


	/*  effect1  ----------------*/
	#effect1 {
		padding: 0;
		position: relative;
		font-size: 1.2rem;
	}
	#effect1 .box {
		width: 84%;
		margin: 10px auto 40px;
	}
	#effect1 .box h2 {
		margin-bottom: 50px;
	}

	#effect1 .box_l {
		display: block;
		margin-bottom: 25px;
	}

	#effect1 .box_r {
		width: 100%;
		display: block;
		text-align: center;
	}


	/*  effect2  ----------------*/
	#effect2 {
		padding: 0;
		position: relative;
		font-size: 1.2rem;
	}
	#effect2 .box {
		width: 84%;
		margin: 10px auto 40px;
	}
	#effect2 .box h2 {
		margin-bottom: 50px;
	}

	#effect2 .box_l {
		display: block;
		margin-bottom: 25px;
	}
	#effect2 .box_r {
		width: 100%;
		display: block;
		text-align: center;
	}

	/*  effect2  ----------------*/
	#mechanism1 {
		padding: 0;
		position: relative;
		font-size: 1.4rem;
		counter-reset:num;
	}
	#mechanism1 .box {
		/* width: 84%; */
		margin: 10px auto 34px;
	}
	#mechanism1 .box p {
		margin-bottom: 22px;
	}
	#mechanism1 .box_in {
		width: 84%;
		margin: 0 auto;
	}
	#mechanism1 dl dt,
	#mechanism1 dl dd {
		width: 84%;
		margin: 0 auto;
	}
	#mechanism1 dl + dl {
		border-top: 1px solid #ccc;
		padding-top: 30px;
		margin-top: 30px;
	}

	#mechanism1 dd {
		color: #ffc72f;
		font-weight: bold;
		font-size: 2.4rem;
		width: 100%;
		text-align: center;
	}
	#mechanism1 dd img {
		width: 72%;
	}
	#mechanism1 .btn a {
		font-size: 2.0rem;
		color: #fff;
		background: #e60012;
		text-decoration: none;
		border-radius: 8px;
		padding: 25px 85px;
		position: relative;
	}
	#mechanism1 .btn a:hover {
		opacity: 0.8;
	}
	#mechanism1 .btn a::before {
		content: '';
		background: url(../img/icon_heart_white.png) center left no-repeat;
		margin-left: 40px;
		padding: 25px 40px 0 0;
		position: absolute;
		left:0;
	}

	#mechanism1 dt span {
		color: #e60012;
		counter-increment: num;
		display: block;
		font-size: 1.4rem;
		font-style: normal;
		font-weight: bold;
		line-height: 20px;
		margin: 0 0 15px;
		padding-left: 50px;
		position: relative;
	}

	#mechanism1 dt span::before {
		border: 1px solid #e60012;
		box-sizing: border-box;
		content: '' counter(num);
		color: #e60012;
		padding: 8px 0;
		margin-right: 10px;
		position: absolute;
		font-size: 1.6rem;
		top: 50%;
		left: 0;
		line-height: 1;
		text-align: center;
		transform: translateY(-50%);
		width: 34px;
	}

	#mechanism1 #movie1 {
		background: url(../img/effect_movie_img1_tumb.jpg) center top no-repeat;
		background-size: 300px auto;
		/* display: inline-block; */
	}
	#mechanism1 #movie2 {
		background: url(../img/effect_movie_img2_tumb.jpg) center top no-repeat;
		background-size: 300px auto;
		/* display: inline-block; */
	}


	/*  mechanism2  ----------------*/
	#mechanism2 {
		padding: 0;
		position: relative;
		font-size: 1.4rem;
	}
	#mechanism2 .box {
		width: 84%;
		margin: 10px auto 32px;
	}
	#mechanism2 .box h2 {
		margin-bottom: 50px;
	}
	#mechanism2 .box_l {
		display: block;
		margin-bottom: 25px;
	}
	#mechanism2 .box_r {
		width: 100%;
		display: block;
		text-align: center;
	}
	.grey_sp {
		background: #dcdcdc;
		padding: 15px 0;
		width: 100%;
		text-align: center;
		font-size: 2.2rem;
		font-weight: bold;
		display: block;
		position: relative;
	}
	.grey_sp::after {
		content: '';
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
		transition: .3s;
		transition: .3s;
		border-style: solid;
		width: 0px;
		_border-color: #000 #000 #007bff #000;
		_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
		border-color: #dcdcdc transparent transparent;
		border-width: 25px 20px 0;
		margin-left: 3%;
		position: absolute;
		bottom: -10px;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 1;
	}

	/*-----------------------  アコーディオン
	*/

	#suntory_contents .ac_menu {
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	#suntory_contents .ac_menu a {
	  display: block;
	  padding: 10px;
		text-decoration: none;
		color: #fff;
	  line-height: 1;
	}
	#suntory_contents .ac_menu .label {
		box-sizing: border-box;
	  display: block;
		padding: 14px 3%;
	  line-height: 1;
		color :#000;
	  background: #fff;
		cursor :pointer;
		position: relative;
		padding-right: 12%;
		border-bottom: 2px dotted #000;
	}
	#suntory_contents .ac_menu .label span {
		display: inline-block;
		font-weight: bold;
		font-size: 1.6rem;
		line-height: 1.2;
		margin-left: 10px;
		vertical-align: middle;
		width: 89%;
	}
	#suntory_contents .ac_menu .label span::after {
		padding: 15px 4px;
		position: absolute;
		top: 50%;
		right: 2%;
		content: '\02228';
		transform: scale(1.7, 1) translateY(-50%);
		color: #e60012;
		font-size: 1.6rem;
		border-left: 1px solid #dcdcdc;
		font-weight: 100;
	}
	#suntory_contents .ac_menu .label.open {
		border-bottom: none;
	}
	#suntory_contents .ac_menu .label.open + ul {
		border-bottom: 2px dotted #000;
	}
	#suntory_contents .ac_menu .label.open span::after {
		padding: 15px 4px;
		position: absolute;
		top: 50%;
		right: 2%;
		content: '\02228';
		transform: scale(1.7, -1) translateY(50%);
		color: #e60012;
		font-size: 1.6rem;
		border-left: 1px solid #dcdcdc;
		font-weight: 100;
	}
	#suntory_contents .ac_menu input {
		display: none;
	}
	#suntory_contents .ac_menu ul {
		margin: 0;
		padding: 0;
	  background :#fff;
		/* border-bottom: 2px dotted #000; */
		list-style: none;
		display: none;
	}
	#suntory_contents .ac_menu li {
	  /* max-height: 0; */
	  overflow-y: hidden;
	  -webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		border-bottom: none!important;
		padding: 0!important;
	}

}
@media screen and (orientation: landscape) {
	#title .schwarz {
/* 	    background-size:  auto; */
	}
}