@charset "utf-8";

/* -----------------------------------------------------------------
MODULE CSS
LAST UPDATE:
--------------------------------------------------------------------*/
/*--------------------------------
common
---------------------------------*/
html{
color: #282828;
font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, sans-serif;
font-size: 62.5%;/*10px*/
line-height: 1.4;
word-wrap: break-word;
-webkit-text-size-adjust: 100%;
}

body{font-size: 1.4rem;}
input, textarea,select {font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, sans-serif, Helvetica, sans-serif;-webkit-appearance: none;
}

html #kanadeWrap{ visibility: hidden; background:#faf9f5; color: #1c180e;}
html.wf-active #kanadeWrap{  visibility: visible;}
html body{ margin: 0;}
#suntory_contents{ overflow: hidden; -webkit-text-size-adjust: 100%;}
body.fixed{ position: fixed;}

@media screen and (min-width: 1164px){
 #suntory_contents{ margin: 0 auto; overflow: inherit;}
 #suntory_contents .contentsInner{ width: 1164px; margin: 0 auto;}
}

#suntory_contents ul,
#suntory_contents ol{ list-style-type: none;}

#suntory_contents .contentsInner p{ font-family: Noto Serif JP, serif;}
#suntory_contents #kanadeWrap{ overflow: hidden;}


/*---------------------------------
 device
-----------------------------------*/
.spOnly,
.spOnlyImg{display: none !important;}
.pcOnly{display: block !important;}
.pcOnlyImg{display:inline-block;}

@media screen and (max-width: 768px){
.spOnlyImg{display: inline-block !important;}
.spOnly{display: block !important;}
.pcOnly,
.pcOnlyImg{display: none !important;}
}


/*---------------------------------
 fontsize
-----------------------------------*/
.fontSS{font-size: 1rem !important;}
.fontS{font-size: 1.2rem !important;}
.fontL{font-size: 1.6rem !important;}
.fontLL{font-size: 1.8rem !important;}
.fs22_1{font-size: 2.2rem !important;}

@media screen and (max-width: 768px){ 
.fontSS{font-size: 0.9rem !important;}
.fontS{font-size: 1rem !important;}
.fontL{font-size: 1.2rem !important;}
.fontLL{font-size: 1.2rem !important;}
.fs22_1{font-size: 1.5rem !important;}
}


/*---------------------------------
 color
-----------------------------------*/
.cR01{ color: #f60da6;}
.cB01{ color: #0b5df3;}
.cG01{ color: #729883;}
.cG02{ color: #2c975b;}
.cG03{ color: #55aa9c;}
.cG04{ color: #56c25b;}
.inline{ display: inline-block !important;}

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

.clearfix {
min-height: 1px;
}

* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

/*---------------------------------
 margin
-----------------------------------*/
.pd0{padding: 0 !important;}
.mb0 { margin-bottom: 0px !important;}
.mb5 { margin-bottom: 5px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb15 { margin-bottom: 15px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb25 { margin-bottom: 25px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb35 { margin-bottom: 35px !important;}
.mb40 { margin-bottom: 40px !important;}
.mb45 { margin-bottom: 45px !important;}
.mb50 { margin-bottom: 50px !important;}
.mt0 { margin-top: 0px !important;}
.mt5 { margin-top: 5px !important;}
.mt10 { margin-top: 10px !important;}
.mt15 { margin-top: 15px !important;}
.mt20 { margin-top: 20px !important;}
.mt25 { margin-top: 25px !important;}
.mt30 { margin-top: 30px !important;}
.mt35 { margin-top: 35px !important;}
.mt40 { margin-top: 40px !important;}
.mt45 { margin-top: 45px !important;}
.mt50 { margin-top: 50px !important;}
.ml0 { margin-left: 0px !important;}
.ml5 { margin-left: 5px !important;}
.ml10 { margin-left: 10px !important;}
.ml15 { margin-left: 15px !important;}
.ml20 { margin-left: 20px !important;}
.ml25 { margin-left: 25px !important;}
.ml30 { margin-left: 30px !important;}
.ml35 { margin-left: 35px !important;}
.ml40 { margin-left: 40px !important;}
.ml45 { margin-left: 45px !important;}
.ml50 { margin-left: 50px !important;}
.mr0 { margin-right: 0px !important;}
.mr5 { margin-right: 5px !important;}
.mr10 { margin-right: 10px !important;}
.mr15 { margin-right: 15px !important;}
.mr20 { margin-right: 20px !important;}
.mr25 { margin-right: 25px !important;}
.mr30 { margin-right: 30px !important;}
.mr35 { margin-right: 35px !important;}
.mr40 { margin-right: 40px !important;}
.mr45 { margin-right: 45px !important;}
.mr50 { margin-right: 50px !important;}

@media screen and (max-width: 768px){
.mb0{ margin-bottom:0px !important;}
.mb5{ margin-bottom:3px !important;}
.mb10{ margin-bottom:5px !important;}
.mb15{ margin-bottom:8px !important;}
.mb20{ margin-bottom:10px !important;}
.mb25{ margin-bottom:13px !important;}
.mb30{ margin-bottom:15px !important;}
.mb35{ margin-bottom:18px !important;}
.mb40{ margin-bottom:20px !important;}
.mb45{ margin-bottom:23px !important;}
.mb50{ margin-bottom:25px !important;}
.ml0{ margin-left:0px !important;}
.ml5{ margin-left:3px !important;}
.ml10{ margin-left:5px !important;}
.ml15{ margin-left:8px !important;}
.ml20{ margin-left:10px !important;}
.ml25{ margin-left:13px !important;}
.ml30{ margin-left:15px !important;}
.ml35{ margin-left:18px !important;}
.ml40{ margin-left:20px !important;}
.ml45{ margin-left:23px !important;}
.ml50{ margin-left:25px !important;}
.mr0{ margin-right:0px !important;}
.mr5{ margin-right:3px !important;}
.mr10{ margin-right:5px !important;}
.mr15{ margin-right:8px !important;}
.mr20{ margin-right:10px !important;}
.mr25{ margin-right:13px !important;}
.mr30{ margin-right:15px !important;}
.mr35{ margin-right:18px !important;}
.mr40{ margin-right:20px !important;}
.mr45{ margin-right:23px !important;}
.mr50{ margin-right:25px !important;}
.mt0{ margin-top:0px !important;}
.mt5{ margin-top:3px !important;}
.mt10{ margin-top:5px !important;}
.mt15{ margin-top:8px !important;}
.mt20{ margin-top:10px !important;}
.mt25{ margin-top:13px !important;}
.mt30{ margin-top:15px !important;}
.mt35{ margin-top:18px !important;}
.mt40{ margin-top:20px !important;}
.mt45{ margin-top:23px !important;}
.mt50{ margin-top:25px !important;}

}

/*---------------------------------
 figure
-----------------------------------*/
.figL{ float:left;}
.figR{ float:right;}
.clear{ clear:both;}

.layoutC{ text-align:center !important;}
.layoutR{ text-align:right !important;}
.layoutL{ text-align:left !important;}