@charset "utf-8";

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

    /*------------------------------------------------------------
    [SP] lead
    ------------------------------------------------------------ */
    #suntory_contents .lead {
        margin-bottom: 8vw;
    }
    #suntory_contents .lead .title_bar {
        width: 100vw;
        background: rgba(72,51,34,.85);
    }
    #suntory_contents .lead .title_bar h1 {
        margin: 0 4vw;
        font-size: 4.8vw;
        font-weight: 300;
        color: #fff;
        height: 14.4vw;
        display: flex;
        align-items: center;
    }
    #suntory_contents .lead .inner {
        margin: 0;
        width: 100vw;
        height: 173.333333333333333vw;
        background: url(../img/recipe/recipe_top_sp.webp) no-repeat center 0;
        background-size: 100vw 173.333333333333333vw;
    }
    .no-webp #suntory_contents .lead .inner {
        background: url(../img/recipe/recipe_top_sp.jpg) no-repeat center 0;
        background-size: 100vw 173.333333333333333vw;
    }
    #suntory_contents .lead h2 {
        text-indent: -9999px;
    }
    #suntory_contents .lead .copy {
        text-indent: -9999px;
    }
    #suntory_contents .lead .text {
        text-indent: -9999px;
    }
    
    /*------------------------------------------------------------
    [SP] region_nav
    ------------------------------------------------------------ */
    #suntory_contents .region_nav {
        margin: 0 4vw 10.666666666666667vw;
    }
    #suntory_contents .region_nav input {
        display: none;
    }
    #suntory_contents .region_nav ul {
        display: none;
        list-style: none;
        position: relative;
    }
    #suntory_contents .region_nav .region_nav_check:checked + .region_nav_label + ul {
        display: block;
        margin-bottom: 16vw;
    }
    #suntory_contents .region_nav ul::after {
        content: '';
        background: #B49655;
        width: 92vw;
        height: 5.6vw;
        border-radius: 0 0 5.6vw 5.6vw;
        position: absolute;
        bottom: -5.6vw;
    }
    #suntory_contents .region_nav .region_nav_label {
        font-size: 3.466666666666667vw;
        width: 92vw;
        height: 12vw;
        background: #B49655 url(../img/recipe/triangle_down_wh.svg) no-repeat 5.6vw center;
        background-size: 2vw auto;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5.6vw;
    }
    #suntory_contents .region_nav .region_nav_check:checked + .region_nav_label {
        background: #B49655 url(../img/recipe/triangle_up_wh.svg) no-repeat 5.6vw center;
        background-size: 2vw auto;
        border-radius: 5.6vw 5.6vw 0 0;
    }
    #suntory_contents .region_nav li a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 10.666666666666667vw;
        background: #A1813B;
        color: #fff;
        font-size: 3.466666666666667vw;
        text-decoration: none;
    }
    
    /*------------------------------------------------------------
    [SP] region_list
    ------------------------------------------------------------ */
    #suntory_contents .region_list {
        margin: 0 4vw 8vw;
        width: 92vw;
    }
    #suntory_contents .region_list h2 {
        margin-bottom: 8vw;
        padding-bottom: 3.2vw;
        font-size: 4.266666666666667vw;
        font-weight: bold;
        position: relative;
    }
    #suntory_contents .region_list h2::after {
        content: '';
        width: 92vw;
        height: 0.533333333333333vw;
        background: #800039;
        background: -moz-linear-gradient(left,  #800039 0%, #800039 36%, #ebe6e1 36%, #ebe6e1 100%);
        background: -webkit-linear-gradient(left,  #800039 0%,#800039 36%,#ebe6e1 36%,#ebe6e1 100%);
        background: linear-gradient(to right,  #800039 0%,#800039 36%,#ebe6e1 36%,#ebe6e1 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800039', endColorstr='#ebe6e1',GradientType=1 );
        position: absolute;
        bottom: -0.533333333333333vw;
        left: 0;
    }
    
    /*------------------------------------------------------------
    [SP] recipe_header
    ------------------------------------------------------------ */
    #suntory_contents .recipe_header {
        position: relative;
        background: #EBE6E1;
        padding-bottom: 8vw;
    }
    #suntory_contents .recipe_header .title {
        background: rgba(71,52,34,.85);
        width: 100vw;
        height: 14.4vw;
        position: absolute;
        top: 0;
        left: 0;
    }
    #suntory_contents .recipe_header .title h1 {
        margin: 0 4vw;
        height: 14.4vw;
        display: flex;
        align-items: center;
        font-size: 4.8vw;
        color: #fff;
        font-weight: 300;
    }
    #suntory_contents .recipe_header .inner picture {
        width: 100vw;
    }
    #suntory_contents .recipe_header .inner picture img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .recipe_header .text_block {
        margin: 0;
        width: 100vw;
    }
    #suntory_contents .recipe_header .text_block .region {
        margin-bottom: 6.4vw;
        height: 12vw;
        background: #C2AA77;
        display: flex;
        align-items: center;
        font-size: 4vw;
        color: #fff;
        padding: 0 4vw;
    }
    #suntory_contents .recipe_header .text_block h2 {
        margin: 0 auto 6.4vw;
        font-size: 4.8vw;
        font-weight: bold;
        text-align: center;
    }
    #suntory_contents .recipe_header .text_block .text {
        margin: 0 4vw 8vw;
        font-size: 4.266666666666667vw;
        line-height: 1.6;
    }
    #suntory_contents .recipe_header .data {
        margin: 0 auto 5.6vw;
        width: 80.8vw;
        height: 12vw;
        background: #fff;
        border-radius: 6.666666666666667vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #suntory_contents .recipe_header .data .time {
        background: url(../img/icon_time.svg) no-repeat 0 center;
        background-size: 4.8vw 4.8vw;
        padding-left: 6.666666666666667vw;
        margin-right: 5.866666666666667vw;
    }
    #suntory_contents .recipe_header .data .calorie {
        background: url(../img/icon_calorie.svg) no-repeat 0 center;
        background-size: auto 4.8vw;
        padding-left: 6.4vw;
    }
    #suntory_contents .recipe_header .data p {
        font-size: 3.466666666666667vw;
        line-height: 4.8vw;
    }
    #suntory_contents .recipe_header .text_block .author {
        margin: 0;
        font-size: 3.466666666666667vw;
        text-align: center;
    }
    
    /*------------------------------------------------------------
    [SP] recipe_outline
    ------------------------------------------------------------ */
    #suntory_contents .recipe_outline {
        margin: 0 0 8vw;
    }
    #suntory_contents .recipe_outline .outline_text {
        background: url(../img/recipe/bg_recipe_detail.svg) no-repeat center 4vw;
        background-size: 56vw auto;
        padding: 8vw 4vw 0;
    }
    #suntory_contents .recipe_outline .outline_text h2 {
        margin-bottom: 6.4vw;
        font-size: 4.8vw;
        line-height: 1.5;
        font-weight: bold;
        color: #981C41;
    }
    #suntory_contents .recipe_outline .outline_text p {
        font-size: 4vw;
        line-height: 1.8;
    }
    #suntory_contents .recipe_outline .ingredient_data {
        padding: 11.466666666666667vw 4vw 0;
    }
    #suntory_contents .recipe_outline .ingredient_data h3 {
        margin-bottom: 4.533333333333333vw;
        font-size: 4.266666666666667vw;
        font-weight: bold;
    }
    #suntory_contents .recipe_outline .ingredient_data .ingredient {
        margin-top: 5.333333333333333vw;
    }
    #suntory_contents .recipe_outline .ingredient_data .ingredient li {
        margin-top: 2.666666666666667vw;
        display:flex;
        flex-flow: row wrap;
        justify-content: space-between;
        background: url(../img/recipe/bg_dotline.png) no-repeat center top;
        background-size:92vw auto;
        font-size: 3.2vw;
    }
    #suntory_contents .recipe_outline .ingredient_data .ingredient li span {
    display: block;
	background: #FFF;
	padding: 0 0.533333333333333vw;
    }
    #suntory_contents .recipe_outline .ingredient_data .ingredient li .notes {
	width: 100%;
	font-size: 3.2vw;
	line-height: 1.5;
	margin: 1.333333333333333vw 0 0;
    }
    #suntory_contents .recipe_outline .ingredient_data .ingredient li.title {
        background: none;
    }

    /*------------------------------------------------------------
    [SP] recipe_process
    ------------------------------------------------------------ */
    #suntory_contents .recipe_process {
        background: #F3F0ED;
        padding:8vw 0 12vw;
    }
    
    #suntory_contents .recipe_process .process_flow .box {
	    margin: 0 8vw 8vw;
    }
    #suntory_contents .recipe_process .process_flow .box:last-child {
        margin: 0 8vw;
    }
    #suntory_contents .recipe_process .process_flow .box .work {
        display: block;
        padding: 2.4vw 4vw;
        font-size: 4.266666666666667vw;
        color: #FFF;
        background: #800039;
    }
    #suntory_contents .recipe_process .process_flow .box picture {
        display: block;
    }
    #suntory_contents .recipe_process .process_flow .box picture img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .recipe_process .process_flow .box .text {
        margin-top: 4vw;
        font-size: 3.466666666666667vw;
        line-height: 1.5;
    }
    #suntory_contents .recipe_process .process_flow .box .point {
        margin-top: 4vw;
        padding-left: 14.4vw;
        position: relative;
        font-size: 3.466666666666667vw;
        line-height: 1.5;
    }
    #suntory_contents .recipe_process .process_flow .box .point strong{
        font-weight: bold;
    }
    #suntory_contents .recipe_process .process_flow .box .point::before {
        content:"Point";
        position: absolute;
        left:0;
        top:0;
        width: 12vw;
        height: 6.666666666666667vw;
        font-size: 2.933333333333333vw;
        color:#fff;
        border: 1px #981C41 solid;
        border-radius: 3.466666666666667vw;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    
    /*------------------------------------------------------------
    [SP] match_wine
    ------------------------------------------------------------ */
    #suntory_contents .match_wine {
        background: #F3F0ED;
        padding-bottom: 12vw;
    }
    #suntory_contents .match_wine .inner {
        margin: 0 auto;
        padding-bottom: 8vw;
        width: 92vw;
        background: #fff;
    }
    #suntory_contents .match_wine h2 {
        width: 92vw;
        height: 16vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #645243;
        color: #fff;
        font-size: 4.8vw;
        line-height: 1.5;
    }
    #suntory_contents .match_wine h2 br {
        display: none;
    }
    #suntory_contents .match_wine ul {
        margin: 0;
        padding-top: 5.6vw;
        list-style: none;
    }
    #suntory_contents .match_wine ul li {
        display: flex;
        margin-bottom: 10.666666666666667vw;
    }
    #suntory_contents .match_wine ul li:last-child {
        margin-bottom: 0;
    }
    #suntory_contents .match_wine ul li picture {
        margin-left: 6.4vw;
        width: 28.8vw;
        display: flex;
        justify-content: center;
    }
    #suntory_contents .match_wine ul li .label {
        width: 48.8vw;
    }
    #suntory_contents .match_wine ul li .label h3 {
        margin: 2.4vw 0 5.6vw;
        font-size: 4vw;
        font-weight: bold;
        line-height: 1.5;
    }
    #suntory_contents .match_wine ul li .label .btn_detail a {
        width: 40vw;
        height: 12vw;
        background: #B49655 url(../img/icon_tri.svg) no-repeat 4vw center;
        background-size: 2vw auto;
        border-radius: 6.133333333333333vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.733333333333333vw;
        color: #fff;
        text-decoration: none;
    }
    
    
    
    
}



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

    /*------------------------------------------------------------
    [PC] lead
    ------------------------------------------------------------ */
    #suntory_contents .lead {
        margin-bottom: 50px;
        background: #ebe6e1;
    }
    #suntory_contents .lead .title_bar {
        background: rgba(72,51,34,.85);
    }
    #suntory_contents .lead .title_bar h1 {
        margin: 0 auto;
        width: 1160px;
        font-size: 24px;
        font-weight: 300;
        color: #fff;
        height: 70px;
        display: flex;
        align-items: center;
    }
    #suntory_contents .lead .inner {
        margin: 0 auto;
        height: 600px;
        background: url(../img/recipe/recipe_top_pc.webp) no-repeat center 0;
        background-size: 1278px 600px;
    }
    .no-webp #suntory_contents .lead .inner {
        background: url(../img/recipe/recipe_top_pc.jpg) no-repeat center 0;
        background-size: 1278px 600px;
    }
    #suntory_contents .lead h2 {
        text-indent: -9999px;
    }
    #suntory_contents .lead .copy {
        text-indent: -9999px;
    }
    #suntory_contents .lead .text {
        text-indent: -9999px;
    }

    
    /*------------------------------------------------------------
    [PC] region_nav
    ------------------------------------------------------------ */
    #suntory_contents .region_nav {
        margin: 0 auto 80px;
        width: 1160px;
    }
    #suntory_contents .region_nav ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin-left: -25px;
    }
    #suntory_contents .region_nav li {
        margin: 0 25px 20px;
        width: 345px;
    }
    #suntory_contents .region_nav li a {
        width: 345px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #B49655 url(../img/recipe/triangle_down_wh.svg) no-repeat 15px center;
        background-size: 6px auto;
        border-radius: 20px;
        font-size: 13px;
        color: #fff;
        text-decoration: none;
        padding: 0 35px 0 45px;
        box-sizing: border-box;
    }
    #suntory_contents .region_nav li.long_name {
        width: 440px;
    }
    #suntory_contents .region_nav li.long_name a {
        width: 440px;
    }
    #suntory_contents .region_nav li a:hover {
        background: #A1813B url(../img/recipe/triangle_down_wh.svg) no-repeat 15px center;
        background-size: 6px auto;
    }
    
    /*------------------------------------------------------------
    [PC] region_list
    ------------------------------------------------------------ */
    #suntory_contents .region_list {
        margin: 0 auto 60px;
        width: 1160px;
    }
    #suntory_contents .region_list h2 {
        margin-bottom: 40px;
        padding-bottom: 15px;
        font-size: 20px;
        font-weight: bold;
        position: relative;
    }
    #suntory_contents .region_list h2::after {
        content: '';
        width: 1160px;
        height: 2px;
        background: #800039;
        background: -moz-linear-gradient(left,  #800039 0%, #800039 36%, #ebe6e1 36%, #ebe6e1 100%);
        background: -webkit-linear-gradient(left,  #800039 0%,#800039 36%,#ebe6e1 36%,#ebe6e1 100%);
        background: linear-gradient(to right,  #800039 0%,#800039 36%,#ebe6e1 36%,#ebe6e1 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800039', endColorstr='#ebe6e1',GradientType=1 );
        position: absolute;
        bottom: -2px;
        left: 0;
    }
    
    /*------------------------------------------------------------
    [PC] recipe_header
    ------------------------------------------------------------ */
    #suntory_contents .recipe_header {
        position: relative;
        background: #EBE6E1;
        min-height: 490px;
    }
    #suntory_contents .recipe_header .title {
        background: rgba(71,52,34,.85);
        width: 100%;
        height: 70px;
        position: absolute;
        top: 0;
        left: 0;
    }
    #suntory_contents .recipe_header .title h1 {
        margin: 0 auto;
        width: 1160px;
        height: 70px;
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #fff;
        font-weight: 300;
    }
    
    #suntory_contents .recipe_header .inner {
        margin: 0 auto;
        width: 1280px;
        display: flex;
    }
    #suntory_contents .recipe_header .inner picture {
        width: 670px;
    }
    #suntory_contents .recipe_header .inner picture img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .recipe_header .text_block {
        margin: 70px 0 30px;
        width: 610px;
    }
    #suntory_contents .recipe_header .text_block .region {
        margin-bottom: 50px;
        height: 60px;
        background: #C2AA77;
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #fff;
        padding: 0 40px;
    }
    #suntory_contents .recipe_header .text_block h2 {
        margin: 0 40px 30px 40px;
        font-size: 26px;
        font-weight: bold;
    }
    #suntory_contents .recipe_header .text_block .text {
        margin: 0 40px 60px 40px;
        font-size: 18px;
        line-height: 1.8;
    }
    #suntory_contents .recipe_header .data {
        margin: 0 0 20px 40px;
        width: 340px;
        height: 50px;
        background: #fff;
        border-radius: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #suntory_contents .recipe_header .data .time {
        background: url(../img/icon_time.svg) no-repeat 0 center;
        background-size: 20px 20px;
        padding-left: 35px;
        margin-right: 22px;
    }
    #suntory_contents .recipe_header .data .calorie {
        background: url(../img/icon_calorie.svg) no-repeat 0 center;
        background-size: 17px 21px;
        padding-left: 29px;
    }
    #suntory_contents .recipe_header .data p {
        font-size: 14px;
        line-height: 21px;
    }
    
    #suntory_contents .recipe_header .text_block .author {
        margin: 0 0 0 40px;
        font-size: 14px;
    }
    
    
    /*------------------------------------------------------------
    [PC] recipe_outline
    ------------------------------------------------------------ */
    #suntory_contents .recipe_outline {
        margin: 0 auto;
        width: 1160px;
        display: flex;
        justify-content: space-between;
    }
    #suntory_contents .recipe_outline .outline_text {
        width: 620px;
        background: url(../img/recipe/bg_recipe_detail.svg) no-repeat center 40px;
        background-size: 400px auto;
        padding: 60px 0 60px;
    }
    #suntory_contents .recipe_outline .outline_text h2 {
        margin-bottom: 30px;
        font-size: 26px;
        line-height: 1.8;
        font-weight: bold;
        color: #981C41;
    }
    #suntory_contents .recipe_outline .outline_text p {
        font-size: 16px;
        line-height: 1.8;
    }
    #suntory_contents .recipe_outline .ingredient_data {
        width: 460px;
        padding: 60px 0 60px;
    }
    #suntory_contents .recipe_outline .ingredient_data h3 {
        margin-bottom: 25px;
        font-size: 18px;
        font-weight: bold;
    }
    #suntory_contents .recipe_outline .ingredient_data .ingredient {
        margin-top: 20px;
    }
    #suntory_contents .recipe_outline .ingredient_data .ingredient li {
    margin-top: 10px;
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
	background: url(../img/recipe/bg_dotline.png) no-repeat center top;
	background-size:450px;
	font-size: 14px;
    }
    #suntory_contents .recipe_outline .ingredient_data .ingredient li span {
        display: block;
	background: #FFF;
	padding: 0 2px;
    }
    #suntory_contents .recipe_outline .ingredient_data .ingredient li .notes {
	width: 100%;
	font-size: 12px;
	line-height: 1.5;
	margin: 5px 0 0;
    }
    #suntory_contents .recipe_outline .ingredient_data .ingredient li.title {
        background: none;
    }


    /*------------------------------------------------------------
    [PC] recipe_process
    ------------------------------------------------------------ */
    #suntory_contents .recipe_process {
        background: #F3F0ED;
        padding:0 0 54px;
    }
    
    #suntory_contents .recipe_process .process_flow {
        margin: 0 auto;
        width: 1160px;
        display:flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    #suntory_contents .recipe_process .process_flow .box {
        width: 350px;
        margin-top: 40px;
    }
    #suntory_contents .recipe_process .process_flow::after{
        content:"";
        display: block;
        width: 350px;
    }
    #suntory_contents .recipe_process .process_flow .box .work {
        display: inline-block;
        width: 350px;
        padding: 10px 10px 10px 15px;
        font-size: 16px;
        line-height: 1.5;
        color: #FFF;
        background: #800039;
        box-sizing: border-box;
    }
    #suntory_contents .recipe_process .process_flow .box picture {
        width: 350px;
        display: block;
    }
    #suntory_contents .recipe_process .process_flow .box picture img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    
    #suntory_contents .recipe_process .process_flow .box .text {
        margin-top: 15px;
        font-size: 14px;
        line-height: 1.5;
    }
    #suntory_contents .recipe_process .process_flow .box .point {
        margin-top: 15px;
        padding-left: 60px;
        position: relative;
        font-size: 14px;
        line-height: 1.5;
    }
    #suntory_contents .recipe_process .process_flow .box .point strong{
        font-weight: bold;
    }
    #suntory_contents .recipe_process .process_flow .box .point::before {
        content:"Point";
        position: absolute;
        left:0;
        top:0;
        width: 50px;
        height: 25px;
        font-size: 13px;
        color:#981C41;
        border: 1px #981C41 solid;
        border-radius: 20px;
        display:flex;
        justify-content: center;
        align-items: center;
    }

    /*------------------------------------------------------------
    [PC] match_wine
    ------------------------------------------------------------ */
    #suntory_contents .match_wine {
        background: #F3F0ED;
        padding-bottom: 100px;
    }
    #suntory_contents .match_wine .inner {
        margin: 0 auto;
        width: 1160px;
        background: #fff;
        display: flex;
    }
    #suntory_contents .match_wine h2 {
        width: 190px;
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #645243;
        color: #fff;
        font-size: 18px;
        line-height: 1.5;
    }
    #suntory_contents .match_wine ul {
        margin: 0 0 0 20px;
        list-style: none;
        display: flex;
        width: 930px;
    }
    #suntory_contents .match_wine ul li {
        width: 310px;
        height: 245px;
        display: flex;
        position: relative;
    }
    #suntory_contents .match_wine ul li:first-child::before {
        content: '';
        width: 1px;
        height: 106px;
        background: #EBE6E1;
        position: absolute;
        top: 64px;
        left: 0;
    }
    #suntory_contents .match_wine ul li::after {
        content: '';
        width: 1px;
        height: 106px;
        background: #EBE6E1;
        position: absolute;
        top: 64px;
        right: 0;
    }
    #suntory_contents .match_wine ul li picture {
        width: 120px;
        height: 245px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #suntory_contents .match_wine ul li .label {
        width: 190px;
        height: 245px;
        position: relative;
    }
    #suntory_contents .match_wine ul li .label h3 {
        margin-top: 60px;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.5;
    }
    #suntory_contents .match_wine ul li .label .btn_detail a {
        width: 170px;
        height: 40px;
        background: #B49655 url(../img/icon_tri.svg) no-repeat 15px center;
        background-size: 6px auto;
        border-radius: 21px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
        position: absolute;
        bottom: 51px;
    }
    #suntory_contents .match_wine ul li .label .btn_detail a:hover {
        background: #A1813B url(../img/icon_tri.svg) no-repeat 15px center;
        background-size: 6px auto;
    }



}