@charset "utf-8";

/* CSS Document */
/*-------------------------
- reset
- bace
- header
- contents etc
- font
- sttl
- copy
- txt

▼下層共通--------------
- MV
- main_ttl
- lead
- bnr_area
- back_btn
-
-------------------------*/


/*------------------------------------------------------------
reset
------------------------------------------------------------ */
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

#suntory_contents div, #suntory_contents span, #suntory_contents object, #suntory_contents iframe, #suntory_contents h1, #suntory_contents h2, #suntory_contents h3, #suntory_contents h4, #suntory_contents h5, #suntory_contents h6, #suntory_contents p, #suntory_contents blockquote, #suntory_contents pre, #suntory_contents abbr, #suntory_contents address, #suntory_contents cite, #suntory_contents code, #suntory_contents del, #suntory_contents dfn, #suntory_contents em, #suntory_contents img, #suntory_contents ins, #suntory_contents kbd, #suntory_contents q, #suntory_contents samp, #suntory_contents small, #suntory_contents strong, #suntory_contents sub, #suntory_contents sup, #suntory_contents var, #suntory_contents b, #suntory_contents i, #suntory_contents dl, #suntory_contents dt, #suntory_contents dd, #suntory_contents ol, #suntory_contents ul, #suntory_contents li, #suntory_contents fieldset, #suntory_contents form, #suntory_contents label, #suntory_contents legend, #suntory_contents table, #suntory_contents caption, #suntory_contents tbody, #suntory_contents tfoot, #suntory_contents thead, #suntory_contents tr, #suntory_contents th, #suntory_contents td, article, aside, canvas, details, figcaption, figure, #suntory_contents footer, #suntory_contents header, #suntory_contents hgroup, #suntory_contents menu, #suntory_contents nav, #suntory_contents section, #suntory_contents summary, #suntory_contents time, #suntory_contents mark, #suntory_contents audio, #suntory_contents video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
}

#suntory_contents article, #suntory_contents aside, #suntory_contents details, #suntory_contents figcaption, #suntory_contents figure, #suntory_contents footer, #suntory_contents header, #suntory_contents hgroup, #suntory_contents menu, #suntory_contents nav, #suntory_contents section {
	display: block;
}

#suntory_contents nav ul {
	list-style: none;
}

#suntory_contents blockquote, #suntory_contents q {
	quotes: none;
}

#suntory_contents blockquote:before, #suntory_contents blockquote:after, #suntory_contents q:before, #suntory_contents q:after {
	content: '';
	content: none;
}

#suntory_contents a {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: transparent;
}


/* change colours to suit your needs */

#suntory_contents ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}


/* change colours to suit your needs */

#suntory_contents mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: 700;
}

#suntory_contents del {
	text-decoration: line-through;
}

#suntory_contents abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

#suntory_contents table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* change border colour to suit your needs */

#suntory_contents hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

#suntory_contents input, #suntory_contents select {
	vertical-align: middle;
}
/* --------------------------------------------------------- */

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, img, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0px;
	padding: 0px;
}
html {
	font-size: 14px;
	overflow: auto;
	height: 100%;
}
body {
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', Meiryo, 'MS PGothic', Osaka, sans-serif;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
	letter-spacing: 0;
	overflow: hidden;
	font-weight: 500;
}
fieldset, img {
	border: 0;
	vertical-align: bottom;
}
address, caption, cite, code, dfn, em, var {
	font-style: normal;
	font-weight: normal;
}
ul {
	list-style: none;
}
ol li {
	list-style-position: outside;
	list-style: decimal;
	margin-left: 25px;
	margin-bottom: 5px;
}
caption, th {
	text-align: left;
	font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
a {
	color: #333333;
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}
*:focus {
	outline: none;
}
button, input, select, textarea {
	font-size: 16px;
}
input[type=text], select {
	font-size: 16px;
}
input[type="submit"] {
	-webkit-appearance: none;
	border-radius: 0;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.ma_b5 {
	margin-bottom: 5px!important;
}
.ma_b10 {
	margin-bottom: 10px!important;
}
.ma_b15 {
	margin-bottom: 15px!important;
}
.ma_b20 {
	margin-bottom: 20px!important;
}
.ma_b21 {
	margin-bottom: 21px!important;
}
.ma_b25 {
	margin-bottom: 25px!important;
}
.ma_b30 {
	margin-bottom: 30px!important;
}
.ma_r10 {
	margin-right: 10px!important;
}
.pdt0 {
	padding-top: 0 !important;
}
table, tr, th, td {
	border-collapse: collapse;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
	word-wrap: break-word;
}

.sp {
	display: none !important;
}

@media only screen and (max-width: 768px) {
	.sp {
		display: block!important;
	}
	.pc {
		display: none !important;
	}
}
@media only screen and (min-width: 769px){
html {
	font-size: 28px;
	overflow: auto;
	height: 100%;
}
}

a {
	display: block;
	text-decoration: none;
	opacity: 1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

a:hover {
	opacity: 0.6;
}



/*=======================================
　bace
=======================================*/
@font-face {
	font-family: 'Noto Sans JP';
	src: url("../font/NotoSansJP-Black.ttf") format("truetype");
	font-weight: 900;
}
@font-face {
	font-family: 'Noto Sans JP';
	src: url("../font/NotoSansJP-Bold.ttf") format("truetype");
	font-weight: 700;
}
@font-face {
	font-family: 'Noto Sans JP';
	src: url("../font/NotoSansJP-Medium.ttf") format("truetype");
	font-weight: 500;
}
@font-face {
	font-family: 'Noto Sans JP';
	src: url("../font/NotoSansJP-Regular.ttf") format("truetype");
	font-weight: 400;
}


@font-face {
	font-family: 'Noto Serif JP', serif;
	src: url("../font/NotoSerifJP-Black.otf") format("opentype");
	font-weight: 900;
}
@font-face {
	font-family: 'Noto Serif JP', serif;
	src: url("../font/NotoSerifJP-Bold.otf") format("opentype");
	font-weight: 700;
}
@font-face {
	font-family: 'Noto Serif JP', serif;
	src: url("../font/NotoSerifJP-Medium.otf") format("opentype");
	font-weight: 500;
}
@font-face {
	font-family: 'Noto Serif JP', serif;
	src: url("../font/NotoSerifJP-Regular.otf") format("opentype");
	font-weight: 400;
}

#suntory_contents {
	color: #000;
}
#suntory_contents .flex_area {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display: flex;
}
#suntory_contents .anchor {
	display: block;
	padding-top: 6.75px;
	margin-top: -6.75px;
}
#suntory_contents .notes {
	font-size: 0.929rem;
	background: #fff;
}



/*=======================================
　header
=======================================*/
#suntory_contents header {
	position: absolute;
	z-index: 999;
	width: 100%;
	max-width: 768px;
	background: #00AFD0;
	height: 3rem;
	transition: all 0.3s ease-out;
}
#suntory_contents header h1 {
	position: absolute;
	width: 10.724rem;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 2.8%;
}
#suntory_contents header h1 a {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#suntory_contents header > .icon_area {
	justify-content: flex-end;
	align-items: baseline;
	width: 4.785rem;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 4.813rem;
}
#suntory_contents header > .icon_area .icon {
	width: 2.006rem;
}
#suntory_contents header .g-nav .icon_area {
	justify-content: center;
	align-items: center;
	width: 100%;
	bottom: 0;
	background: #dfd6b8;
	padding: 1.557rem 0;
	gap: 0 2rem;
}
#suntory_contents header .g-nav .icon_area .icon {
	width: 2.747rem;
}
@media only screen and (min-width: 769px){
#suntory_contents header .g-nav .icon_area {
	position: relative;
}
}
/* 2024/4/2追加 */
#suntory_contents header .g-nav .icon_area .icon_x {
	width: 2.573rem;
}
#suntory_contents header .hd_wrap {
	display: flex;
	margin-left: 5%;
	align-items: center;
	gap: 0 0.714rem;
	height: 100%;
}
#suntory_contents header .hd_wrap .hd_logo {
	width: 7.707rem;
}
#suntory_contents header .hd_wrap .hd_txt_img {
	width: 9.874rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ハンバーガーメニュー */
#suntory_contents header .g-nav {
	position: fixed;
	z-index: 999;
	top: -150%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100%;
	max-width: 768px;
	transition: all 0.6s;
	display: block;
	overflow-y: scroll;
	/* padding-bottom: 5.836rem; */
}
#suntory_contents header .g-nav-wrap {
	background: url(../images/common/hd_bg.jpg) no-repeat;
	background-size: cover;
	padding-bottom: 2.714285714285714rem;
}
#suntory_contents header .g-nav.panelactive {
	top: 0;
}
#suntory_contents header.fixed .g-nav.panelactive {
	top: 0;
	height: 100vh!important;
}
#suntory_contents header .g-nav.panelactive .g-nav-list {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
#suntory_contents header .g-nav .inner {
	padding-bottom: 0.5rem;
	position: relative;
}
#suntory_contents header .g-nav .nav_ttl {
	color: #fff;
	height: 3.429rem;
	font-size: 1.741rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	border-bottom: 2px solid #fff;
	line-height: 3rem;
	margin-bottom: 2.8rem;
	padding-top: 0.5rem;
}
#suntory_contents header .g-nav .nav_ttl >p {
	width: 92%;
	margin: 0 auto;
}
#suntory_contents header .g-nav ul {
	width: 95%;
	margin: 0 auto;
}
#suntory_contents header .g-nav li {
	text-align: center;
	font-size: 1.214rem;
	position: relative;
	padding-left: 10%;
	line-height: 1.555;
	font-feature-settings: "palt";
	margin-bottom: 2.5rem;
}
#suntory_contents header .g-nav li:last-of-type {
	margin-bottom: 1.071rem !important;
}
#suntory_contents header .g-nav li::before {
	content: "";
	display: inline-block;
	background: url(../images/common/icon_nav.png) top center / 100% auto no-repeat;
	width: 1.75rem;
	height: 1.75rem;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform : translateY(-50%);
	left: 0;
}
#suntory_contents header .g-nav .sttl::before {
	content: "";
	display: inline-block;
	background: url(../images/common/icon_nav.png) top center / 100% auto no-repeat;
	width: 1.214rem;
	height: 1.214rem;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform : translateY(-50%);
	left: 1.25%;
}
#suntory_contents header .g-nav li a {
	width: fit-content;
	color: #fff;
	display: block;
	letter-spacing: 0.1em;
	font-size: 1.143rem;
	text-align: left;
}
#suntory_contents header .g-nav li.link_blank a {
	position: relative;
}
#suntory_contents header .g-nav li.link_blank a::after {
	content: '';
	position: absolute;
	right: -30px;
	top: 50%;
	transform: translateY(-50%);
	background: url(../images/common/icon_blank.svg) no-repeat;
	background-size: cover;
	width: 14px;
	height: 12px;
}
#suntory_contents header .g-nav li a span {
	display: inline-block;
	font-size: 0.908rem;
	letter-spacing: 0;
}
@media only screen and (min-width: 769px){
#suntory_contents header .g-nav.panelactive {
	top: 3.571rem;
	height: calc(100vh - 3.571rem)!important;
}
#suntory_contents header.fixed .g-nav.panelactive {
	top: 0;
}
#suntory_contents header .g-nav li.link_blank a::after {
	width: 19px;
	height: 17px;
}
}
/* 2024/4/2追加 */
#suntory_contents header .g-nav li.grayout::after {
	content: "";
	display: inline-block;
	background: #B5B5B6;
	width: 1.748rem;
	height: 1.748rem;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform : translateY(-50%);
	left: 0;
	mix-blend-mode: multiply;
	border-radius: 100rem;
}
#suntory_contents header .g-nav li.grayout a {
	color: #727171;
	pointer-events: none;
	display: block;
}


/* ハンバーガーメニューボタン */
#suntory_contents header .openbtn {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 1.429rem;
	width: 2.577rem;
	position: absolute;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#suntory_contents header .openbtn:hover {
	opacity: 0.6;
	cursor: pointer;
}
#suntory_contents header .openbtn p {
	font-size: 0.846rem;
	text-align: center;
	letter-spacing: 0.1em;
	line-height: 1;
	color: #fff;
}
#suntory_contents header .openbtn.active p {
    display: none;
}
#suntory_contents header .openbtn span {
	transition: all .4s;
	height: 0.127rem;
	background-color: #fff;
	width: 100%;
}
#suntory_contents header .openbtn span:not(:last-child) {
	margin-bottom: 0.22rem;
}
#suntory_contents header .openbtn span:nth-of-type(2) {
	top: 23px;
}
#suntory_contents header .openbtn span:nth-of-type(3) {
	top: 0.6rem;
}
#suntory_contents header .openbtn.active span:nth-of-type(1) {
	top: 0;
	transform: translateY(6px) rotate(-45deg);
	width: 100%;
}
#suntory_contents header .openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
#suntory_contents header .openbtn.active span:nth-of-type(3) {
	transform: translateY(-6px) rotate(45deg);
	width: 100%;
}
#suntory_contents header .openbtn.active span {
	background-color: #fff;
	position: relative;
}
#suntory_contents header .openbtn.active {
    width: 1.395rem;
    position: fixed;
    top: 1.5rem;
	transition: auto;
}
#suntory_contents header .openbtn.active span {
	height: 0.143rem;
	margin-bottom: 0;
}



#suntory_contents #header.fixed-hide{
  top: -100px;
}
#suntory_contents header.fixed{
    position: fixed;
    top: 0;
}
@media only screen and (min-width: 769px){
#suntory_contents header .openbtn span:nth-of-type(3) {
	top: 0.19rem;
}
#suntory_contents header .openbtn.active {
    position: absolute;
    top: 50%;
}
}



/*=======================================
　contents etc
=======================================*/
#suntory_contents {
    position: relative;
    min-height: 100%;
}
#suntory_contents .contents {
	max-width: 768px;
	margin: 0 auto;
}
#suntory_contents .inner {
	width: 90%;
	margin: 0 auto;
}
#suntory_contents .sec_btn,
#suntory_contents .bnr_area,
#suntory_contents .back_btn {
	background: #fff;
}
@media only screen and (min-width: 769px){
#suntory_contents::after {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image:url(../images/common/background01.jpg);
	background-size:cover;
}
}



/*=======================================
　font
=======================================*/
#suntory_contents .min {
	font-family: 'Noto Serif JP' , '游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
}



/*=======================================
　color
=======================================*/
.blue01 {
	color: #00b2d4;
}
.pink01 {
	color: #e95b9c;
}
.red01 {
	color: #e60012;
}
.orange01 {
	color: #f08300;
}
.purple01 {
	color: #601986;
}
.green01 {
	color: #22ac38;
}



/* 下層　共通
--------------------------------------------------------- */
/*=======================================
　MV
=======================================*/
#suntory_contents .mv {
	padding-top: 2.98rem;
}


/*=======================================
　bnr_area
=======================================*/
#suntory_contents .bnr_area {
	padding-bottom: 2.143rem;
}
#suntory_contents .bnr_area a {
	border: 4px solid #898989;
}
#suntory_contents .bnr_area a img {
	padding: 1.274rem;
	width: calc(100% - 2.548rem);
}
#suntory_contents .bnr_area.pd_none a img {
	padding: 0;
	width: 100%;
}
#suntory_contents .bnr_area2 a {
	border: none;
}
#suntory_contents .bnr_area2 a img {
	padding: 0;
	width: 100%;
}



/*=======================================
　back_btn
=======================================*/
#suntory_contents .back_btn {
	padding-bottom: 1.911rem;
	margin: 0 auto;
}
#suntory_contents .back_btn a {
	background: #00afd0;
	color: #fff;
	margin: 0 auto;
	width: 53%;
	max-width: 355px;
	text-align: center;
	position: relative;
	font-size: 1rem;
	padding: 0.05rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#suntory_contents .back_btn a::after {
	content: "";
	display: inline-block;
	background: url("../images/common/arrow01.png") top center / 100% auto no-repeat;
	width: 1.211rem;
	height: 1.211rem;
	position: absolute;
	top: 50%;
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
	left: 10%;
}
#suntory_contents .back_btn a span {
	padding-left: 6%;
}
@media only screen and (min-width: 769px){
#suntory_contents .back_btn a::after {
	left: 8%;
}
#suntory_contents .back_btn a span {
	padding-left: 11%;
}
}



/*=======================================
　modal
=======================================*/
.modaal-close {
    position: absolute!important;
    right: 5%!important;
    top: 1.25rem!important;
    width: 1.693rem!important;
    height: 1.693rem!important;
    background: url("../images/common/icon_close02.png") center center / cover no-repeat!important;
}
.modaal-close:after,.modaal-close:before {
    display: none!important;
}
.modaal-content-container {
    padding: 2.893rem 5% 2.679rem!important;
}




@media only screen and (max-width: 768px){
body.actv {
    position: relative;
}
body.actv:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    z-index: 10;
}
}



/*=======================================
　link_none
=======================================*/
.link_none {
	pointer-events: none;
}


/*=======================================
　別ウィンドウで開くアイコン
=======================================*/
#suntory_contents .link_blank a span,
.modaal-wrapper .link_blank a span {
	padding-right: 1.107rem;
	position: relative;
}
#suntory_contents .link_blank a span::after,
.modaal-wrapper .link_blank a span::after {
	content: "";
	position: absolute;
	background: url("../images/common/icon_blank.svg") no-repeat;
	background-size: cover;
	top: 58%;
	transform: translateY(-50%);
	right: 0;
	width: 0.79rem;
	height: 0.696rem;
}
/* ハンバーガーメニューのアイコン */
#suntory_contents .g-nav .link_blank a span::after {
	top: 55%;
}

/*=======================================
　広告バナー注釈
=======================================*/
#suntory_contents .bnr_area .inner a {
	position: relative;
}
#suntory_contents .bnr_area .inner a .notes {
	position: absolute;
	bottom: 0.2em;
	right: 0.643rem;
	background: none;
	font-size: 0.643rem;
	padding: 0;
}