@charset "utf-8";

section{padding:2em 0}
section.point{background:#fcecdc;}

.hero h2{font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";color:#4b2501;font-size:1.8em;letter-spacing:.1em;font-weight:bold;width:900px;margin:0 auto}

p.about{overflow: hidden;height:7.5em;text-align: left}
.cake p.about{height:3.2em}

/*--taste--*/
#taste .hero{background:url(../img/taste/taste_hero.png)right no-repeat #f1f1ef;background-size:contain;position: relative}
#taste .hero h2{line-height:270px}
/*#taste .hero p{text-align:right;margin-right:1em;text-shadow:1px 1px 1px #fff,1px -1px 1px #fff,-1px 1px 1px #fff,-1px -1px 1px #fff}*/
#taste .hero p{position: absolute;right:0;font-size:.8em}

#taste section .wrap h2{width:90%;margin:2em auto 4em;font-size:1em}

.flex.col3{padding-bottom:2em}
.flex.col3 li{background:#fff;margin-bottom:2em}

.flex figure{overflow:hidden;display:block}
.flex figcaption{padding:.5em 0;font-size:.9em;color:#4b2501}
.flex.col3 figcaption{padding:.5em 1em;}
.flex.col3 h5{color:#f38200;font-size:1.1em;font-weight:bold;margin:0 auto .5em}
.flex.col3 p.about{margin:.2em auto;}

.flex.col3 .trim{overflow: hidden;
width: 320px;/* トリミングしたい枠の幅 */
height: 200px;/* トリミングしたい枠の高さ */
position: relative;background:#f1f1ef;}
.flex.col3 .trim img{position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
height: auto;
}

.flex.col3 a .trim img{transform-origin:0 0;transition:.4s}
.flex.col3 a:hover .trim img{transform:scale(1.05) translate(-50%, -50%);}

/*--lesson--*/
#exp .hero{height:270px;background:url(../img/lesson/lesson_hero.png)right no-repeat #f1f1ef;background-size:contain;position:relative}
#exp .hero h2 span{letter-spacing:.1em;line-height:1.6em;position:absolute;top:0;bottom:0;margin: auto;height: 3em;font-weight:bold}
#exp .flex.col2{margin:1em auto}
#exp .flex.col2 li{width:46%;background:#fff;margin:.5em auto}

/*#exp .flex.cake li{width:96%;background:#fff;margin:.5em auto}*/

.flex.col2 .trim{overflow: hidden;
width: 400px;/* トリミングしたい枠の幅 */
height: 225px;/* トリミングしたい枠の高さ */
position: relative;margin: 0 auto}
.flex.col2 .trim img{position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
height: auto;
}

/*
.flex.cake .trim{overflow: hidden;
width: 800px;/* トリミングしたい枠の幅 */
/*height: 350px;/* トリミングしたい枠の高さ */
/*position: relative;margin: 0 auto}
.flex.cake .trim img{position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
height: auto;
}*/
.flex.cake .trim img,.flex.bread .trim img,.flex.cook .trim img{width:85%}


.flex.col2 a .trim img,.flex.cake a .trim img{transform-origin:0 0;transition:.4s}
.flex.col2 a:hover .trim img,.flex.cake a:hover .trim img{transform:scale(1.05) translate(-50%, -50%);}
.flex.col2 p.about,.flex.cake p.about{padding: 0 1em}
.flex.col2 h5,.flex.cake h5{color:#fff;text-align: center;padding:.5em 0;font-size:1.2em}
.flex.cake h5{background:#ff6d78}
.flex.col2.bread h5{background:#ff8702}
.flex.col2.cook h5{background:#5cc103}

#exp section h2{color:#80500c;font-size:1.8em;letter-spacing:.1em;font-weight:bold;padding:.5em 0;border-bottom:2px #f5edda solid;text-align:center;margin-bottom:2em}

ul.flow{width:800px;margin:2em auto;display:flex;flex-wrap:wrap;justify-content:center}
ul.flow li{text-align:center;background:#f6ab08;color:#fff;width:calc(98% / 3);padding:1em 0;font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";position:relative;}

ul.flow li h4{margin:0 auto 1em;}
ul.flow li p{line-height: 1.4em}
ul.flow li:first-child{background:#f8b62b;}
ul.flow li:last-child{background:#f39a00}

/*@supports not (clip-path:polygon) {*/
ul.flow li:before{content:"";width:0;height:100%;display:inline-block;border:71px transparent solid;border-left:30px #fff solid;position:absolute;right:-99px;top:-6px;z-index:1}
ul.flow li:after{content:"";width:0;height:100%;display:inline-block;border:65px transparent solid;border-left:26px #f6ab08 solid;position:absolute;right:-88px;top:0;z-index:1;}
ul.flow li:first-child:after{border-left-color:#f8b62b;}
ul.flow li:last-child:after{border-left-color:#f39a00}
/*
ul.flow li:before{content:"";display:inline-block;width:1.5em;height:55%;background:#f6ab08;border-right:5px #fff solid;position:absolute;right:-1.5em;top:-5%;transform-origin: bottom right;transform: rotate(-20deg);z-index:1}
ul.flow li:after{content:"";display:inline-block;width:1.5em;height:55%;background:#f6ab08;border-right:5px #fff solid;position:absolute;right:-1.5em;top:50%;transform-origin:top right;transform: rotate(20deg);z-index:1}
ul.flow li:first-child:before,ul.flow li:first-child:after{background:#f8b62b;}
ul.flow li:last-child:before,ul.flow li:last-child:after{background:#f39a00}
*/
/*}*/

@supports (clip-path:polygon) {
    ul.flow li:before,ul.flow li:after{content:none}
ul.flow li{clip-path: polygon(0 0,90% 0,100% 50%,90% 100%, 0 100%,10% 50%); margin-right:-2%}
ul.flow li:first-child{clip-path: polygon(0 0,90% 0,100% 50%,90% 100%, 0 100%);}
}

#exp .pics{display:flex;flex-wrap:wrap;justify-content: space-around;}
#exp .pics figure{text-align:center;width:22%;position:relative}
#exp .pics figcaption{margin:1em auto}
#exp .pics figure+figure:before{content:"";display:inline-block;border:20px transparent solid;border-left:20px #ffac3d solid;position:absolute;/*margin:auto;height:20px;top:0;bottom:0;*/top:35%;left:-25px;}

.flex.voice{justify-content: space-around;}
#exp figcaption{text-align: center}
#exp figcaption span{font-size:.8em;display:block}
dl.voice{width:70%}
dl.voice dt{background:#ffac3d;font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";color:#fff;text-align:center;font-weight:bold;padding:.5em;width:10em;display:inline-block;border-radius:1em;letter-spacing:.1em;margin-bottom: 1em}
dl.voice dd{margin-bottom: 2em}

dl.faq{margin:1em auto;}
dl.faq dt{font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";color:#ff9937;font-weight:bold;font-size:1.1em;letter-spacing: .1em}
dl.faq dt,dl.faq dd{position:relative;margin-bottom:2em;padding-left:3em}
dl.faq dd{padding-bottom:2em;border-bottom:1px #ccc solid}
dl.faq dt:before{content:"Q";background:#ff9937}
dl.faq dd:before{content:"A";background:#5b8ace}
dl.faq dt:before,dl.faq dd:before{display:inline-block;width:2em;line-height:2em;color:#fff;text-align: center;border-radius:50%;font-weight:bold;font-size:1.2rem;font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";position: absolute;left:0;top:-.5em}

#exp .atte{width:800px;margin:2em auto;padding:1em 2em;background:#f2f2f2}
#exp .atte h3{font-weight:bold;}
#exp ul.squ{line-height:2em}
#exp ul.squ li{padding-left: 1.2em;text-indent:-1.2em }
#exp ul.squ li:before{content:"";display:inline-block;height:.8em;width:.8em;background:#ffac3d;margin-right:.5em}

/*--beginner--*/
#beg .hero{height:270px;background:url(../img/beginner/beg_hero.png)right no-repeat #f1f1ef;background-size:contain;position:relative}
#beg .hero h2{color:#80500c;padding:2.5em 0 .5em;width:750px}
#beg .hero h2 span{letter-spacing:.1em;line-height:1.6em;font-weight:bold}
#beg .hero h2 span:before{content:url(../img/beginner/icon_fork.png);display:inline-block;position:relative;top:.3em;margin-right:.5em}
#beg .hero h2 span:after{content:url(../img/beginner/icon_spoon.png);display:inline-block;position:relative;top:.3em;margin-left: .5em}
#beg .hero p{width:900px;margin:1em auto;font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";color:#80500c;line-height:2em;font-weight:bold;letter-spacing:.1em}

#beg .pics{display:flex;margin:0 auto 3em;}
#beg .pics figure{width:calc(100% / 3)}
#beg .pics figure img{width:100%}
#beg .wrap.point{background:#fcecdc;padding:3em 1.2em 2em;position:relative}

#beg h2.ribbon{background:#ff903d;color:#fff;font-weight:bold;font-size:1.4em;padding:0;text-align:center;line-height:2.3em;display:inline-block;margin:2em auto;position:absolute;left:0;right: 0;top:-4em;width:70%}
#beg h2.ribbon:before{content:url(../img/beginner/ribbon.png);position:absolute;left:-2em;top:0}
#beg h2.ribbon:after{content:url(../img/beginner/ribbon.png);position:absolute;right:-2em;top:0;transform:rotateY(180deg)}

#beg .flex.col3{padding:1em 0 0;background:#fcecdc;}
#beg .flex.col3 li{margin-bottom: 0}
#beg .flex.col3 img{width:100%;transform-origin:bottom center;transition:.4s}
#beg .flex.col3 figcaption{padding:.5em 1em;}
#beg .flex.col3 h4{text-align:center;margin:.5em auto;}
#beg .flex.col3 h4 b{display:inline-block;border-bottom:1px solid;margin:0 auto;letter-spacing:.1em;font-size:1.2em}
#beg .flex.col3 a:hover img{transform: scale(1.05);}
#beg .cake h4 b{color:#ff6d78;border-color:#ff6d78}
#beg .bread h4 b{color:#ff8702;border-color:#ff8702}
#beg .cook h4 b{color:#5cc103;border-color:#5cc103}
.wrap.point ol{counter-reset:numb}
.wrap.point ol>li{background:#fff;margin-bottom:1em;position:relative}
.wrap.point ol>li:before{counter-increment:numb;content:counter(numb);position: absolute;top:.5em;left:.5em;font-size:2em;color:#fff;font-weight:bold;text-align:center;width: 1.4em;line-height: 1.4em;background:#ff8702;border-radius:50%}
.wrap.point ol>li>p{padding:1em 0 1em 5em}
.wrap.point ol>li>figure{padding-left:5em;display:flex;justify-content:space-between;flex-wrap:wrap}
.wrap.point ol>li>figure figcaption{padding:1em 0}
.wrap.point ol>li>figure img{margin:0}

/*--orgbtn--*/
.orgbtn{width:55%;margin:3em auto;}
.orgbtn a{display:flex;justify-content:space-around;padding:1em;border:2px #fff dotted;outline:2px #ffad2d solid;background:#ffad2d;color:#fff;align-items:center}
.orgbtn a p{font-size:1.4em;}
.orgbtn h3{font-size:2.4em;position:relative}
.orgbtn h3 b{font-size:1.4em;font-weight:bold}
.orgbtn h3 strong{margin-left:.4em;font-size:1.1em;font-weight:bold;letter-spacing:.05em}
.orgbtn h3 span{font-size:.3em;position:absolute;left:2em;bottom:0}
.orgbtn a:hover{opacity:.8;transform:scale(1.05)}


/*--cake bread cooking---*/

.cake .hero{background:url(../img/course/cak_hero.png)no-repeat;background-size:cover}
.bread .hero{background:url(../img/course/bre_hero.png)no-repeat;background-size:cover}
.cooking .hero{background:url(../img/course/coo_hero.png)right no-repeat #7c4414;background-size:contain}
.cake .hero h2,.bread .hero h2,.cooking .hero h2{line-height:270px;color:#fff}
#bec section .wrap h2{font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";color: #4b2501;font-size: 2em;text-align: center;font-weight: bold;padding: 1.5em 0;letter-spacing:.1em}
#bec h2+h3{text-align:center;font-size:1.1em;font-weight:bold;font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"}
.voice h2{letter-spacing: .1em;font-weight: bold;padding: .5em 0;border-bottom: 2px #f5edda solid;margin-bottom: 2em;}

dl.voice.w85{width:85%;margin:0 auto}

ul.course{margin:2em auto;width:85%}
ul.course li{padding:2em;overflow:hidden;font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";position:relative;margin:1em auto 2em}
ul.course h3{font-weight:bold;font-size:1.4em;width:45%;display:block;text-align:center;border-radius:1em;padding:.5em 0;margin:1em 0 1em;color:#fff}
ul.course figure{float:right;margin:-5em 0 0 3em}
ul.course p{line-height:2em;}

.cake ul.course li{background:#ffebec}
.bread ul.course li{background:#fff5eb}
.cooking ul.course li{background:#f1f8f4}

.cake ul.course h3,.cake ul.recipi li a:hover{background:#ff6e78}
.bread ul.course h3,.bread ul.recipi li a:hover{background:#ff8700}
.cooking ul.course h3,.cooking ul.recipi li a:hover{background:#5bc103}

ul.recipi{align-items: center;width:85%}
ul.recipi li{position:relative;margin:.5em;height:5em}
ul.recipi li a{display:block;height:5em;border:1px #ccc solid;border-radius:1em;color:#4b2501}
ul.recipi li a p{position:absolute;top:0;bottom:0;left:0;right:0;margin: auto;text-align:center;height:1.4em}
ul.recipi li a p.dbl{height:2.8em}
ul.recipi li a p.sml{height:4.4em;font-size:.9em}
ul.recipi li a:hover{color:#fff;transform:scale(1.1)}
ul.recipi li>p{position: absolute;left:0;bottom:0}
ul.recipi+p{text-align: right;width:95%;margin:.5em auto}


/*---responsive---*/

@media screen and (max-width: 540px){
    
section{padding:1em 0}
    
.flex.col3 li,.flex.cake li{width:95%;margin:.5em auto}
.flex.col4 li,.flex.col2 li{width:49%}
#exp .flex.col2 li{width:95%;}
#exp .flex.bread figure,#exp .flex.cook figure{display:flex;}
#exp .flex.bread figcaption,#exp .flex.cook figcaption{width:100%;margin-left:.5em;padding:.5em 0}    
#exp .bread p.about,#exp .cook p.about{padding:0}
    
.flex.col4 .trim,.flex.col2 .trim,.flex.cake .trim{
width: 100%;/* トリミングしたい枠の幅 */
height: 120px;/* トリミングしたい枠の高さ */
}    

.cake .hero h2,.bread .hero h2,.cooking .hero h2{line-height: 2em;}
#taste .hero,#exp .hero{height:9em;background-position: 50vw;}
#taste .hero h2{line-height: 1.4em}
.hero h2{width:100%;background-size:cover;padding:1em .5em;text-shadow:1px 1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff} 
#taste section .wrap h2{margin: 1em auto}
#taste .hero{background-size: cover;}

#taste .hero p{left:1em;bottom:0;font-size:.7em;line-height:1.4em;text-shadow:1px 1px 1px #fff,1px -1px 1px #fff,-1px 1px 1px #fff,-1px -1px 1px #fff}    
    
/*--lesson--*/
#exp section h2{font-size:1.4em;margin-bottom:1em}
    
ul.flow{width:90%;margin:0 auto}
ul.flow li{width:100%;margin:.5em auto;padding:1em .5em}

@supports not (clip-path:polygon) {
ul.flow li:before{display:none}
ul.flow li:first-child:after{border-left:10px transparent solid}
ul.flow li:after{content:"";display:inline-block;width:20px;height:20px;border-left:10px transparent solid;border:10px transparent solid;border-top:10px #f00 solid;bottom:-1.5em;left:0;right:0;top:auto;margin:  auto}
ul.flow li:last-child:after{display:none;}
}

@supports (clip-path:polygon) {
ul.flow li{clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%); margin-right:-2%}
ul.flow li:last-child{clip-path: polygon(0 0,0 100%,100% 100%,100% 0%);}
}
    
#exp .pics figure{width:90%;margin:.5em auto 2em}
#exp .pics figure+figure:before{border-left-color:transparent;border-top:20px #ffac3d solid;left:45%;top:-2.5em}

dl.voice{width:90%}
dl.faq{margin:.5em auto;padding:0 .5em}
#exp .atte{width:90%;margin:1em auto;padding:.5em .8em} 
#exp ul.squ{line-height:1.6em}

/*--beginner--*/
/*#beg .hero{height:auto}*/
    
#beg .hero{height:18em;background-position: bottom;background-size: contain;}
#beg .hero h2,#beg .hero p{width:95%;margin:0 auto}    
#beg .hero h2{text-align:center;padding:.2em 0}
#beg .hero p{text-shadow:1px 1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff;line-height:1.2em;font-size:.8em;padding-bottom: .5em}   
#beg h2.ribbon{font-size:.8em;width:85%;padding:0 3em;line-height:2em}
.wrap.point ol>li>p{padding: 1em .5em 1em 2em;}
.wrap.point ol>li>figure{flex-direction:column-reverse;padding-left:0}
.wrap.point ol>li>figure figcaption{padding:.5em 1em;font-size:.9em}
.wrap.point ol>li:before{font-size:1em}

.orgbtn{width:95%;margin:1em auto}
.orgbtn a{flex-wrap:wrap}
.orgbtn h3{font-size:1.45em}
.orgbtn h3 span{font-size:.4em;bottom:-.5em}

/*--cake bread cooking---*/    
#bec section .wrap h2{width:95%;font-size:1.5em;letter-spacing:0;padding:.5em 0;margin:0 auto}    
.cooking h2+h3{width:95%;line-height:1.4em;margin:0 auto}

ul.course{width:95%;margin:1em auto}
ul.course li{padding:.5em 1em;margin:1em auto}
ul.course h3{width:100%;margin:.5em auto;font-size:1.1em}
ul.course figure{float:none;margin:.5em auto}
ul.course p{line-height:1.4em}

ul.recipi{width:95%}
ul.recipi li{margin:.5em 0}
ul.recipi li a{font-size:.9em;height:100%}

dl.voice.w85{margin:1em auto;width:95%}
}