@charset "utf-8";
/* CSS Document */
/*====================
reset
====================*/
figure{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol{
margin: 0;
padding: 0;
}
div:after, dl:after, ul:after{
content: none;
}
*:focus{
outline: none;
}

/*====================
basic
====================*/
body{
position: relative;
}
.l-container{
color: #432b2a;
-webkit-text-size-adjust: 100%;
background: #ffffff;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}
.link_choco-drink a:hover,
.ac_btn:hover,
.thumb:hover,
.recipes_list a:hover,
.bnr_list a:hover{
opacity: 0.6;
}
/*.tag_recipes:hover{
animation-name: swing;
animation-duration: 1s;
}*/
.moveit{
visibility: hidden;
}

/*====================
コンテンツ
====================*/
.isPC {
display: none;
}
#content_wrap{
position: relative;
overflow: hidden;
}
#content_wrap > section{
text-align: center;
}
.img_txt{
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
font-size: 0 !important;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
transition: opacity,transform;
transition-duration: .48s;
transition-timing-function: ease-out;
transition-delay: .7s;
}

/*====================
FONT読み込み
====================*/
@font-face {
font-family: 'NotoSansJP-Regular';
src: url('/learned/choco-drink/common/font/NotoSansJP-Regular.woff') format('woff');
}
@font-face {
font-family: 'NotoSansJP-Bold';
src: url('/learned/choco-drink/common/font/NotoSansJP-Bold.woff') format('woff');
}

/* ▽ SP ▽================================================================================================================================= */
/*====================
base
====================*/
#content_wrap p,
#content_wrap a,
#content_wrap figcaption,
#content_wrap dt,
#content_wrap dd,
#content_wrap li,
#content_wrap div{
font-family: 'NotoSansJP-Regular', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
font-size: 3.1vw;
line-height: 1.6;
}
.txt_left{
text-align: left !important;
}
.txt_right{
text-align: right !important;
}
.txt_center{
text-align: center !important;
}
.txt_s{
font-size: 2.4vw;
}
p.note, ul.note > li{
text-align: left;
text-indent: -0.6em;
padding-left: 0.8em;
}

/*========================
ローディング画面
========================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #fcf4e4;
}
#loading img{
width: 28vw;
position: absolute;
top: calc(50% - 26vw);
left: calc(50% - 14vw);
-webkit-animation:blink 2s ease-in-out infinite alternate;
-moz-animation:blink 2s ease-in-out infinite alternate;
animation:blink 2s ease-in-out infinite alternate;
}
/* 点滅 */
@-webkit-keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}

/*====================
明朝フォント
====================*/
#content_wrap .mincho p,
#content_wrap p.mincho,
#content_wrap div.mincho,
#content_wrap figcaption.mincho,
#content_wrap h2.mincho,
#content_wrap h3.mincho{
font-family: 游明朝,Yu Mincho,YuMincho,Hiragino Mincho ProN,Hiragino Mincho Pro,HGS明朝E,メイリオ,Meiryo,serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-align: center;
font-weight: 500;
color: #6a371a;
}
#content_wrap h3 p{
font-size: 4.4vw;
line-height: 1.9;
}
.min_s{
font-size: 2.2vw !important;
line-height: 2.37 !important;
}
.min_m{
font-size: 3.1vw !important;
line-height: 1.65 !important;
}

/*====================
メインビジュアル
====================*/
#mainvisual{
background: #432c2a;
}
#mainvisual .inner{
padding: 0 5vw;
}
.mv_wrap{
border-top: solid 8.7vw #432c2a;
border-bottom: solid 5.2vw #432c2a;
}
h1{
line-height: 1;
}
.ttl{
padding: 4.2vw 0 10.2vw;
}
.ttl h2{
font-size: 5.2vw;
line-height: 1.65;
color: #ffffff !important;
letter-spacing: -.05em;
}
.button{
margin: 2.8vw auto 5vw;
width: 7.8vw;
}

/*====================
スライダー：Slick
====================*/
.slick-dots{
position: absolute;
display: flex !important;
bottom: -3.4vw;
left: 0;
right: 0;
justify-content: center;
}
.slick-dots li{
text-indent: -9999px;
background: #ffffff;
width: 1.7vw;
height: 1.7vw;
cursor: pointer;
border-radius: 50vw;
}
.slick-dots li:not(:first-child){
margin-left: 3.5vw;
}
.slick-dots li.slick-active{
background: #a27d6b	;
}

/*====================
ドリンクメーカー概要
====================*/
#outline{
background: #af7e6a;
padding: 8.3vw 0 13vw;
position: relative;
}
#outline .inner {
padding: 0 2vw;
}
#outline h3 p{
margin-bottom: 3.7vw;
}
#outline p{
color: #ffffff !important;
}
.link_choco-drink{
padding: 7.4vw 0 0;
}
.link_choco-drink figcaption{
color: #432b2a;
font-size: 2.8vw !important;
margin-bottom: 0.7vw;
}
.link_choco-drink img{
width: 39.4vw;
}

/*====================
ドリンクメーカーマシン説明
====================*/
#maker{
padding: 10.3vw 0 5.4vw;
position: relative;
}
#maker figure{
width: 39.4vw;
margin: 0 auto;
}
#maker h3 p{
margin: 3.4vw 0 1.4vw;
}
#maker .min_s{
margin-bottom: 2.2vw;
}
.maker_left,
.maker_right{
width: 62.6vw;
margin: 0 auto;
padding: 4.5vw 5.2vw 3.5vw;
}
.maker_left{
background: #af7e6a;
}
.maker_right{
background: #432b2a;
}
.maker_left p,
.maker_right p{
color: #ffffff !important;
}
.mds_left{
background: #432b2a;
padding: 2.4vw 1.9vw 1.9vw;
font-size: 3.6vw !important;
line-height: 1 !important;
margin-bottom: 1.9vw;
letter-spacing: -0.04em;
}
.mds_right{
background: #af7e6a;
padding: 2.4vw 1.9vw 1.9vw;
font-size: 3.6vw !important;
line-height: 1 !important;
margin-bottom: 1.9vw;
letter-spacing: -0.04em;
}
.maker_list dt{
padding-left: 2vw;
margin-bottom: 0.4vw;
}
.maker_list dt img{
width: 54.4vw;
}
.maker_list dd{
font-size: 1.8vw !important;
line-height: 1.85 !important;
padding: 0 3vw 0 8.3vw;
margin-bottom: 4.3vw;
color: #ffffff;
}

/*====================
使い方
====================*/
#howto{
padding: 10.3vw 0 5.4vw;
}
#howto .inner{
padding: 0;
}
.icon_maker{
margin-bottom: 2vw;
}
.icon_maker img{
width: 5.4vw;
margin-bottom: 1.1vw;
}
.howto_wrap{
background: #ccaa9a;
padding: 7.6vw 7.2vw;
}
.howto_list{
display: flex;
padding-bottom: 4.3vw;
border-bottom: solid 0.2vw #654a46;
margin-bottom: 1.5vw;
}
.howto_list li:first-child{
width: 32.8vw;
margin-right: 4.6vw;
}
.howto_list li:nth-child(2){
width: 46vw;
}
.howto_list .icon_choco{
width: 45.3vw;
margin: 1.4vw 0 5vw 0.3vw;
}
.icon_material_brown{
height: 3.522vw;
line-height: 1 !important;
margin-bottom: 1.9vw;
}
.icon_material_brown img{
height: 3.522vw;
}
.howto_img{
width: 32.8vw;
background: #ffffff;
text-align: center;
margin-right: 4.6vw;
}
.howto_img img{
width: 32.8vw;
}
.howto_step figcaption{
width: 46vw;
text-align: left;
}
.howto_step .note{
text-indent: -1.3em;
padding-left: 1.3em;
}
.howto_step{
display: flex;
padding: 2.5vw 0 0;
}

/*====================
5つのモード紹介
====================*/
#mode{
padding: 10.3vw 0 0;
}
#mode .inner{
padding: 0;
}
.mode_list li{
background: #ccaa9a;
padding: 3vw 0 4.1vw;
}
.mode_list li:nth-child(even){
background: #efe5da;
}

/*====================
仕様
====================*/
#specification{
padding: 13.2vw 0 15.6vw;
}
#specification .inner {
padding: 0 9.8vw;
}
.accordion_box{
margin-top: 6vw;
}
.ac_btn{
border-top: 0.3vw solid #6a371a;
border-bottom: 0.3vw solid #6a371a;
display: block;
position: relative;
cursor: pointer;
padding: 1.2vw;
}
.ac_btn::before{
content: "";
position: absolute;
top: 1vw;
right: 2vw;
width: 3vw;
height: 3vw;
border-bottom: 0.6vw solid #6a371a;
border-right: 0.6vw solid #6a371a;
transform: rotate(45deg);
transition: all .4s;
}
.active{
overflow: hidden;
}
.active::before{
transform: rotate(-135deg);
transition: all .4s;
top: 3vw;
}
.ac_txt{
display:none;
padding: 3.6vw 0;
text-align: left;
color: #6a371a;
}
.ac_txt p{
font-size: 2.3vw !important;
line-height: 2.15 !important;
}
.specification_list{
display: flex;
border-bottom: dotted 0.3vw #734327;
padding: 0.8vw 1.2vw;
}
.specification_list li:first-child{
width: 14vw;
margin-right: 6vw;
font-weight: 600;
}
.specification_list li:nth-child(2){
width: 55.8vw;
}
.specification_item img{
width: 53vw;
padding: 1.2vw 0 2.4vw;
}
.ac_txt .information p{
font-size: 1.7vw !important;
}
.ac_txt .information{
margin-top: 2vw;
}
.care_list{
padding-top: 7.2vw;
}
.pd_none{
padding: 0 !important;
}
.care01{
text-align: center;
}
.care_list li:first-child p {
font-size: 3.35vw !important;
line-height: 1 !important;
}
.care01 img{
width: 58.1vw;
margin: 1.3vw 0;
}
.care_list li{
padding: 1vw 0;
}
.care02_txt{
padding-right: 19vw !important;
position: relative;
}
.care02{
position: absolute;
top: -4.3vw;
right: 0;
width: 21.6vw;
}
.last_dotted{
padding-bottom: 5.5vw;
border-bottom: dotted 0.3vw #734327;
}

/*====================
ムービー
====================*/
#movie{
background: #af7e6a;
padding: 15.3vw 0 13vw;
}
#movie .inner {
padding: 0 6.6vw;
}
#movie h4 img{
width: 71.4vw;
}
.thumb{
margin: 7vw 0 5.9vw;
}
#movie h3 p{
color: #ffffff !important;
}
/*▼ モーダル実装の場合 ▼*/
.mfp-bg {
background: #432b2a;
}
#modal_movie{
position: relative;
background: #fff;
width: auto;
max-width: 800px;
margin: 0 auto;
}
button.mfp-arrow{
display: none;
}
.mfp-iframe-scaler iframe {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.mfp-figure:after {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.mfp-close {
width: 5.8vw !important;
height: 5.8vw !important;
font-size: 0 !important;
position: absolute;
top: -8vw !important;
right: 2vw !important;
background: url("/learned/choco-drink/common/images/btn_close.png") no-repeat center / contain !important;
}

/*====================
レシピ
====================*/
#recipes{
background: #432b2a;
padding: 15.3vw 0 19.8vw;
}
#recipes .inner {
padding: 0 3.6vw;
}
#recipes h4 img{
width: 71.4vw;
}
#recipes p{
color: #ffffff !important;
}
.intro{
margin: 5.5vw 0 1.5vw;
}
#recipes .inner2{
padding: 0 15vw;
}
.recipes_list{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.recipes_list li{
width: 31.2vw;
flex-wrap: wrap;
position: relative;
margin-top: 5vw;
}
.recipes_list figure img{
margin-bottom: 0.4vw;
}
.recipes_list figcaption p{
font-size: 2.1vw !important;
line-height: 1.6 !important;
text-align: center;
}
.recipes_list figcaption .author{
font-size: 1.8vw !important;
}
.recipes_list li.new:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url(/learned/choco-drink/drink-maker/images/icon_new.png) no-repeat top center / 100% auto;
width: 8.7vw;
height: 8.7vw;
}
/* ▽ レシピモーダル ▽ */
.recipe_modal{
position: relative;
width: 80vw;
margin: 0 auto;
background: #fffaf0;
}
.recipe_detail{
padding: 0.5vw 4vw 4vw;
}
.recipe_detail p,
.recipe_detail div,
.recipe_detail ul,
.recipe_detail li{
color: #6a371a;
font-family: 'NotoSansJP-Regular', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
font-size: 2.5vw;
line-height: 1.8;
}
.recipe_detail figure img{
width: 40vw;
margin: 1.4vw 0 2.7vw;
}
.recipes_ttl p{
font-family: 'NotoSansJP-Bold', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
font-size: 4.5vw;
line-height: 1.45;
}
.recipes_ttl .author{
font-size: 2.7vw;
}
.recipe_detail .icon_material_brown{
margin-bottom: 1.6vw;
}
.recipe_detail .txt_s{
font-size: 1.8vw;
}
.recipe_detail .mg_none{
line-height: 1.4;
padding: 0 0 0.6vw 2.2vw;
}
.recipe_detail .mg_ag{
padding: 0.6vw 0 0.6vw 2.9vw;
}
.recipe_detail .div_line{
padding-bottom: 2.6vw;
border-bottom: solid 0.3vw #927c6f;
margin-bottom: 3.2vw;
}
.recipe_detail .note{
text-indent: -1.3em;
padding-left: 1.3em;
}
#recipes .accordion_box {
margin-top: 0;
}
#recipes .ac_btn_recipe{
border-top: 0.3vw solid #a27d6b;
border-bottom: 0.3vw solid #a27d6b;
line-height: 1 !important;
display: block;
position: relative;
cursor: pointer;
padding: 1.2vw;
margin-top: 6.6vw;
}
#recipes .ac_btn_recipe::before{
content: "";
position: absolute;
top: 2.6vw;
right: 2vw;
width: 3vw;
height: 3vw;
border-bottom: 0.6vw solid #a27d6b;
border-right: 0.6vw solid #a27d6b;
transform: rotate(-135deg);
transition: all .4s;
}
#recipes .active{
overflow: hidden;
}
#recipes .active::before{
transform: rotate(45deg);
transition: all .4s;
top: 0.7vw;
}
#recipes .ac_btn_recipe img{
width: 29.988vw;
}
#recipes .ac_txt_recipe{
display:none;
padding: 0;
text-align: left;
color: #6a371a;
transition: all 0.5s 0s ease;
}

/*====================
販売リンク
====================*/
#shop{
background: #af7e6a;
padding: 27.5vw 0;
}
#shop .inner {
padding: 0 11vw;
}
.btn_shop{
background: #ffffff;
padding: 7.8vw 6vw 7vw 20.1vw;
box-shadow: 0 2.1vw #6a371a;
border-radius: 2.8vw;
transition: ease .3s;
}
.btn_shop:hover{
box-shadow: 0 0.4vw 0 #6a371a;
transform: translate3d(0, 1.7vw, 0); /* 影が減った分、ボタンを下へ移動 */
}

/*====================
チョコブランドサイト回遊バナー
====================*/
#brand_footer{
padding: 10vw 0;
}
#brand_footer .inner{
padding: 0 17.6vw;
}
.bnr_list li:not(:first-child){
margin-top: 3.4vw;
}

/*====================
アマゾン誘導フロートタグ
====================*/
.tag_amazon{
display: none;  /* 最初は非表示 */
position: fixed;
width: calc(100%*181/767);
top: 9.5vw;
right: 0;
z-index: 100;
}

/*====================
アレンジレシピフロートタグ
====================*/
.tag_recipes{
display: none;  /* 最初は非表示 */
position: fixed;
width: calc(100%*181/767);
top: 39vw;
right: 0.5vw;
z-index: 100;
}

/* ▽ PC ▽================================================================================================================================= */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
/*====================
コンテンツ
====================*/
#content_wrap,
#content_wrap p{
font-size: 22px;
line-height: 1.7;
}
.txt_s{
font-size: 18px;
}

/*========================
base
========================*/
.isSP {
display: none;
}
.isPC {
display: block;
}
body{
min-width: 950px;
}
.l-container{
line-height: 2;
}
.inner{
width: 950px;
margin: 0 auto;
padding: 0 !important;
}

/*========================
ローディング画面
========================*/
#loading img{
width: 200px;
top: calc(50% - 200px);
left: calc(50% - 100px);
}

/*====================
明朝フォント
====================*/
#content_wrap h3 p{
font-size: 32px;
}
.min_s{
font-size: 17px !important;
}
.min_m{
font-size: 23px !important;
}

/*====================
メインビジュアル
====================*/
.mv_wrap{
border-top: solid 100px #432c2a;
border-bottom: solid 36px #432c2a;
}
.ttl{
padding: 30px 0 98px;
}
h1{
width: 100%;
max-width:  960px;
}
.ttl h2{
font-size: 41px;
}
.button{
margin: 12px auto 38px;
width: 60px;
}
.slide-item{
width: 100%;
max-width: 960px;
}

/*====================
スライダー：Slick
====================*/
.slick-dots{
bottom: -25px;
}
.slick-dots li{
width: 13px;
height: 13px;
border-radius: 50px;
}
.slick-dots li:not(:first-child){
margin-left: 27px;
}
.slick-prev,
.slick-next{
width: 59px;
height: 59px;
text-indent: -9999px;
border: none;
cursor: pointer;
z-index: 10;
background-color: transparent;
position: absolute;
top: calc(50% - 59px);
}
.slick-prev{
background-image: url("/learned/choco-drink/drink-maker/images/btn_prev.png");
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
left: calc(50% - 580px);
/*left: 20px;*/
}
.slick-next{
background-image: url("/learned/choco-drink/drink-maker/images/btn_next.png");
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
right: calc(50% - 580px);
/*right: 20px;*/
}
.slick-prev:hover,
.slick-next:hover{
opacity: 0.6;
z-index: 10;
}

/*====================
ドリンクメーカー概要
====================*/
#outline{
padding: 70px 0 80px;
}
#outline h3 p{
margin-bottom: 34px;
}
.link_choco-drink{
padding: 66px 0 0;
}
.link_choco-drink figure{
display: flex;
align-items: center;
justify-content: flex-end;
}
.link_choco-drink figcaption{
font-size: 21px !important;
margin-bottom: 0;
font-weight: 600;
display: inline-flex;
}
.link_choco-drink img{
width: 300px;
}
.arrow_right{
display: inline-block;
width: 26px;
height: 26px;
margin: 4px 23px 0 6px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
}

/*====================
ドリンクメーカーマシン説明
====================*/
#maker{
padding: 80px 0;
}
.maker_wrap{
display: flex;
}
#maker figure{
width: 303px;
}
#maker h3 p{
margin: 30px 0 10px;
}
#maker .min_s{
margin-bottom: 20px;
}
.maker_left,
.maker_right{
width: 50%;
margin: 0;
padding: 35px 24px 20px;
}
.mds_left,
.mds_right{
padding: 19px 8px 16px;
font-size: 24.5px !important;
margin-bottom: 16px;
}
.maker_list dt{
padding-left: 10px;
margin-bottom: 2px;
line-height: 1 !important;
}
.maker_list dt img{
width: 367px;
}
.maker_list dd{
font-size: 14px !important;
padding: 0 13px 0 55px;
margin-bottom: 32px;
}

/*====================
使い方
====================*/
#howto{
padding: 40px 0 80px;
}
.icon_maker{
margin-bottom: 15px;
}
.icon_maker img{
width: 42px;
margin-bottom: 11px;
}
.howto_wrap{
padding: 60px 54px 60px 104px;
}
.howto_list{
padding-bottom: 31px;
border-bottom: solid 1px #654a46;
margin-bottom: 18px;
}
.howto_list li:first-child{
width: 300px;
margin-right: 38px;
}
.howto_list li:nth-child(2){
width: 454px;
}
.howto_list .icon_choco{
width: 437px;
margin: 0 0 25px 16px;
}
.icon_material_brown{
height: 27px;
margin-bottom: 14px;
}
.icon_material_brown img{
height: 27px;
}
.howto_img{
width: 300px;
margin-right: 38px;
}
.howto_img img{
width: 251px;
}
.howto_step figcaption{
width: 454px;
}
.howto_step{
padding: 20px 0 0;
}

/*====================
5つのモード紹介
====================*/
#mode{
padding: 40px 0 0;
}
.mode_list li{
padding: 23px 24px 30px 48px;
}

/*====================
仕様
====================*/
#specification{
padding: 90px 0 172px;
}
.accordion_box{
margin-top: 60px;
}
.ac_btn{
border-top: 2px solid #6a371a;
border-bottom: 2px solid #6a371a;
padding: 12px 0 8px;
}
.ac_btn::before{
top: 6px;
right: 22px;
width: 24px;
height: 24px;
border-bottom: 4px solid #6a371a;
border-right: 4px solid #6a371a;
}
.active::before{
top: 22px;
}
.ac_txt{
padding: 31px 0;
}
.ac_txt p{
font-size: 17px !important;
line-height: 1.85 !important;
}
.specification_list{
border-bottom: dotted 2px #734327;
padding: 9px 6px;
}
.specification_list li:first-child{
width: 112px;
margin-right: 40px;
}
.specification_list li:nth-child(2){
width: 786px;
}
.specification_item img{
width: 532px;
padding: 10px 0 12px 20px;
}
.ac_txt .information p{
font-size: 14px !important;
}
.ac_txt .information{
margin-top: 16px;
}
.care_list{
padding-top: 84px;
}
.care_list li{
padding: 5px 0;
}
.care_list li:first-child p {
font-size: 23px !important;
}
.care01 img{
width: 446px;
margin: 16px auto 0;
}
.care02_txt{
padding-right: 190px !important;
}
.care02{
top: -24px;
right: 35px;
width: 156px;
}
.last_dotted{
padding-bottom: 50px;
border-bottom: dotted 2px #734327;
}

/*====================
ムービー
====================*/
#movie{
padding: 150px 0 125px;
}
#movie h4 img{
width: 545px;
}
.thumb{
margin: 52px 0 54px;
}
/*▼ モーダル実装の場合 ▼*/
.mfp-close {
width: 54px !important;
height: 54px !important;
top: -70px !important;
right: 0 !important;
}

/*====================
レシピ
====================*/
#recipes{
padding: 153px 0 200px;
}
#recipes h4 img{
width: 545px;
}
.intro{
margin: 43px 0 0;
}
#recipes .inner2{
width: 950px;
margin: 0 auto;
padding: 0 !important;
}
.recipes_list li{
width: 300px;
margin-top: 75px;
}
.recipes_list figure img{
margin-bottom: 5px;
}
.recipes_list figcaption p{
font-size: 19px !important;
}
.recipes_list figcaption .author{
font-size: 14.5px !important;
}
.recipes_list li.new:before {
width: 80px;
height: 80px;
}
/* ▽ レシピモーダル ▽ */
.recipe_modal{
width: 920px;
}
.recipe_detail{
padding: 14px 34px 40px 40px;
}
.recipe_detail p,
.recipe_detail div,
.recipe_detail ul,
.recipe_detail li{
font-size: 19px;
line-height: 1.8;
}
.recipe_detail figure img{
width: 300px;
margin: 22px 20px 18px 0;
}
.recipes_ttl p{
font-size: 36px;
line-height: 1.45;
}
.recipes_ttl .author{
font-size: 18px;
}
.detail_list{
display: flex;
}
.recipe_detail .icon_material_brown{
margin: 22px 0px 14px;
}
.recipe_detail .txt_s{
font-size: 16px;
}
.recipe_detail .mg_none{
line-height: 1.4;
padding: 0 0 0 22px;
}
.recipe_detail .mg_ag{
padding: 5px 0 5px 20px;
}
.recipe_detail .div_line{
padding-bottom: 16px;
border-bottom: solid 2px #927c6f;
margin-bottom: 32px;
}
#recipes .ac_btn_recipe{
border-top: 2px solid #a27d6b;
border-bottom: 2px solid #a27d6b;
padding: 11px 0;
height: 36px;
position: relative;
margin-top: 86px;
}
#recipes .ac_btn_recipe::before{
border-bottom: 4px solid #a27d6b;
border-right: 4px solid #a27d6b;
top: 22px;
right: 22px;
width: 24px;
height: 24px;
}
#recipes .ac_btn_recipe img{
width: 223px;
position: absolute;
top: calc(50% - 16px);
left: calc(50% - 116px);
}
#recipes .active::before{
top: 8px;
}

/*====================
販売リンク
====================*/
#shop{
padding: 200px 0;
}
#shop .inner {
width: 580px;
}
.btn_shop{
padding: 60px 38px 53px 158px;
box-shadow: 0 17px #6a371a;
border-radius: 20px;
}
.btn_shop:hover{
box-shadow: 0 3px 0 #6a371a;
transform: translate3d(0, 14px, 0); /* 影が減った分、ボタンを下へ移動 */
}

/*====================
チョコブランドサイト回遊バナー
====================*/
#brand_footer{
padding: 68px 0;
}
#brand_footer .inner{
width: 802px;
}
.bnr_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bnr_list li {
width: 242px;
}
.bnr_list li:not(:first-child){
margin-top: 0;
}

/*====================
アマゾン誘導フロートタグ
====================*/
.tag_amazon{
width: 181px;
top: 53px;
right: 25px;
}

/*====================
アレンジレシピフロートタグ
====================*/
.tag_recipes{
width: 181px;
top: 285px;
right: 30px;
}
}

/* ▽ GALAXY foldなど幅の狭い端末 ▽================================================================================================================================== */
/* 280px以下 For 表示調整
====================================================*/
@media screen and (max-width: 280px){
/*====================
プロジェクト概要
====================*/
#specification .inner {
padding: 0 6vw;
}
}

/* ▽ タブレット ▽================================================================================================================================== */
/* 768px～1260px For 主にタブレット表示
====================================================*/
@media screen and (min-width:768px) and (max-width:1260px) {
/*====================
コンテンツ幅調整
====================*/
.inner {
width: 920px;
}
.slick-prev{
left: calc(50% - 512px);
}
.slick-next{
right: calc(50% - 512px);
}
.mds_left, .mds_right {
font-size: 24px !important;
}
#recipes .inner2{
width: 920px;
}
.recipes_list li{
width: 285px;
}
.recipes_list li.new:before {
width: 74px;
height: 74px;
}
.howto_wrap {
padding: 60px 60px 60px 70px;
}
.specification_list li:nth-child(2) {
width: 750px;
}
.specification_list li:first-child {
width: 20vw;
}
}