@charset "utf-8";

/*normalize*/
html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:0 0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type="button"]{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}address,div,em,h1,h2,h3,h4,h5,ul,ol,li,p,small,span,strong,figure{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start: 0;}
html{
    font-size: 62.5% !important;
    margin:0;
    padding: 0;
    -webkit-margin-before:0em;
    -webkit-margin-after:0em;
    margin-before:0px;
    margin-after:0px;
}
body{
    color:#333;
    font-family: "Cormorant Infant", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","Noto Serif JP", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝","Sawarabi Mincho", serif;
    box-sizing: border-box;
    line-height: 2;
    text-align: center;
    font-weight: normal;
    word-break: break-all;
}
h1, h2, h3, p, li, a, span{
    font-weight: normal;
}
section p{
    font-size: 1.6rem;
    text-align: left;
}
h2{
    font-size: 2.8rem;
    line-height: 1.5;
}
h3{
    line-height: 1.5;
}
h4,h5,h6{
    line-height: 1.5;
    font-weight: normal;
}
li{
    font-size: 1.6rem;
    text-align: left;
    line-height: 2;
    list-style: none;
}
a{
    display: block;
    text-decoration: none;
    border-radius: 2px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
a:link,a:active, a:visited{
    text-decoration: none;
    color: #333;
}
a:hover{
    cursor: pointer;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
}
.text-link:link, .text-link:active, .text-link:visited{
    text-decoration: underline;
    color: #ff5a24;
}
.text-bullet{
    list-style-type: square;
    margin-left: 20px;
}
.text-bold{
    font-weight: bold;
}

span{
    display: block;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.text-bold{
    display: inline;
    font-weight:bold;
}

.entry-button{
    font-size: 2rem;
    line-height: 3;
    border-radius: 50px;
    border : 1px solid #ffb100;
}

.entry-live-button{
    color: #fff;
    background:#ffb100;
}
.fixed-header-official-link:link, .fixed-header-official-link:active, .fixed-header-official-link:visited,
.entry-monthly-button:link, .entry-monthly-button:active, .entry-monthly-button:visited,
.entry-monthly-button-top:link, .entry-monthly-button-top:active, .entry-monthly-button-top:visited{
    color: #fff;
}

@media all and (min-width: 641px) {
    body{
        line-height: 2;
        text-align: left;
    }
    li{
        font-size: 1.6rem;
    }
    section p{
        font-size: 1.6rem;
    }
    .br-sp{
        display: none;
    }
}
@media all and (max-width: 640px) {
    .br-pc{
        display: none;
    }
}

.preface, .biencuit-monthly-apply, .recommend-lessons,.notice ,.entry{
    margin: 64px 24px;
}

@media all and (min-width: 768px) {
    .preface, .biencuit-monthly-apply, .recommend-lessons, .notice, .entry{
        width: 100%;
        max-width: 768px;
        margin: 80px auto 120px;
        padding: 0 24px;
        box-sizing: border-box;
    }
}

.fixed-header{
    position: fixed;
	top: 0;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding:8px 16px;
    background: rgba(255,255,255,0.8);
    border-bottom: 1px solid #ccc;
	z-index: 999;
	transition: .3s;
	transform: translateY(-500%);
}
.fixed-header img{
    float: left;
    width: 160px;
    margin-top: 4px;
}

.fixed-header-show{
    display: block;
}
.is-show {
	transform: translateY(0);
}
.fixed-header-official-link{
    float: right;
    width: 112px;
/*    border: 1px solid #333;*/
    font-size:1.4rem;
    background: #ffb100;
    color: #fff;
    line-height: 1.3;
    padding-top: 4px;
    padding-bottom: 3px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 100px;
}
@media all and (min-width: 961px){
        .header-wrap{
        position: relative;
        left: 50%;
        width: 960px;
        margin-left: -480px;
    }
}
@media all and (min-width: 641px){
    header img, .fixed-header img{
        width: 200px;
    }
    .header-official-link, .fixed-header-official-link{
        width: 280px;
        font-size: 2.4rem;
        text-align: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .header-official-link span, .fixed-header-official-link span{
        display: inline;
        font-size:1.4rem;
        line-height: 1.8;
    }
}

.fv-toplogo{
    display: flex;
    flex-direction: row-reverse;
    margin: 0 auto;
    z-index: 100;
    
}
.fv-toplogo img{
    position: absolute;
    top: 16px;
    left: 16px;
    display: block;
    width: 160px;
    margin-top: 4px;
}

.firstview{
    min-height: 300px;
  
}
.firstview_wrap{
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    margin-top: 280px;
}

.firstview .firstview_logo{
    display: block;
    width: 280px;
    margin:  160px auto 40px;
}

.firstview_wrap h1{
    font-size: 3.6rem;
    line-height: 1.3;
    margin-bottom: 40px;
}


@media all and (max-width: 320px) {
    .firstview{
        min-height: 580px;
    }
}

@media all and (min-width: 376px) {
    .firstview{
        min-height: 400px;
    }
    .firstview_wrap{
        margin-top: 300px;
    }
}

@media all and (min-width: 640px) {
    .firstview{
        min-height: 400px;
    
    }
    .firstview_wrap h1{
        font-size: 6.4rem;
    }
}

@media all and (min-width: 768px){
    .firstview_wrap{
        margin-top:  320px;
    }
}

.section-title{
    margin-top: -80px;
    padding-top: 80px;
}
.section-title span, .section-title-small{
    text-align: center;
}
.section-title-small{
    font-size: 1.6rem;
    padding-bottom: 8px;
}
.section-title-large{
    padding-bottom: 64px;
    font-size: 3.2rem;
    line-height: 1.2;
}

@media all and (min-width: 640px) {
    .section-title-eng{
        font-size:  5.6rem;
    }

    .section-title-large{
        font-size:  4rem;
    }
    
}

.preface{
    counter-reset: count1;
}
.preface-wrap{
    margin-bottom: 160px;
}
.preface-point{
    margin-bottom: 64px;
}
.preface-point img{
    margin: 0 auto;
    display: block;
    width: 100%;
}

.preface-description{
    margin-bottom: 40px;
}
.preface-detail-text{
    margin-bottom: 40px;
}
.preface-detail{
    margin-bottom: 80px;
}

.recommend-lessons .section-title-large{
    padding-bottom: 0px;
}

.recommend-lessons{
    counter-reset: recommend-lessons;
}

.recommend-lessons-case{
    margin-top: 80px;
    margin-bottom: 80px;
}

.case-title-text-small{
    font-size: 3.2rem;;
    line-height: 1;
    padding-bottom: 16px;
}

.case-title-text{
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 24px;
}

.recommend-case-image{
    width: 100%;
}
.recommend-case-text{
    margin: 12px auto;
}


.recommend-lesson-example-title{
    padding-top: 40px;
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 40px;
}

.recommend-lessons-case-title{
    text-align: center;
}


.recommend-lessons-list-wrap{
    position: relative;
    margin: 24px 0 24px;
    text-align: left;
    border-bottom: 1px #ccc dashed;
}
.recommend-lessons-list-wrap:last-of-type{
    border: none;
}
.recommend-lessons-list-title{
    position: relative;
    padding-bottom: 24px;
    margin-top: 24px;
    cursor: pointer;
}

.recommend-lessons-list-title-small{
    display: block;
    padding-bottom: 2px;
    margin-left: 80px;
    font-size: 1.2rem;
    line-height: 1.2;
}
.recommend-lessons-list-title h3{
    font-size: 1.8rem;
    margin-right: 48px;
    padding-left: 80px;
    counter-increment:recommend-lessons;
    line-height: 1.3;
}
.lesson-chef-img{
    position: absolute;
    top: -5px;
    width: 72px;
}
.lesson-detail-img{
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 640px;
    margin-bottom: 40px;

}
.lesson-visit-button{
    text-align: center;
    display: block;
    max-width: 240px;
    margin:40px auto;
    padding: 8px 24px;
    font-size: 2rem;
    background: #ffb100;
    color: #fff;
    border-radius:  50px;
}
.lesson-visit-button:link, .lesson-visit-button:active, .lesson-visit-button:visited{
    color: #fff;
}
.recommend-lessons-list-title::after {
    font-family: 'FontAwesome';
    content: "\f107";
    position: absolute;
    top:27px;
    right: 16px;
    margin-top: -12px;
    transition: all  0.3s ease;
    font-size: 4rem;
    line-height: 1;
}
.toggle-clicked:after {
    transform: rotate(180deg);
    transition: all  0.3s ease;
}
.recommend-lessons-description{
    padding-bottom: 24px;
}

.recommend-lessons-others p, .recommend-lessons-others a{
    text-align: center;
    font-size: 2rem;
}

@media all and (min-width: 640px) {
    .case-title-text{
        font-size: 3.2rem;
        margin-bottom: 40px;
    }
    
}


.biencuit-monthly-apply li{
    margin-top: 12px;
    margin-left: 24px;
    margin-bottom: 12px;
    list-style-type:decimal;
}


.notice li{
    position: relative;
    margin-left: 16px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.notice li:before{
    font-family: FontAwesome;
    content: "\f00c";
    position: absolute;
    left : -2rem;
}
.notice li:before{
    color: #ff5a24;
}

.entry p{
    margin-top: 40px;
    text-align: center;
    line-height: 1.5;
}
.entry-button-bottom{
    margin-top: 24px;
}
.entry-monthly-button{
    color: #fff;
    background: #ffb100;
}
.entry .privacy-policy{
    padding-top: 40px;
    font-size: 1.6rem;
    text-decoration: underline;
}
.entry-link-officialpage{
    padding-top: 40px;
    font-size: 1.6rem;
}
@media all and (min-width: 641px){
    .entry{
        text-align: center;
    }
    .entry a{
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        font-size: 2.4rem;
        padding: 16px 0;
        line-height: 2;
    }
    .entry .entry-link-officialpage{
        font-size: 1.6rem;
    }
    .logo-bottom{
        width: 240px;
        margin-bottom: 72px;
    }
}
footer{
    margin-top: 120px;
}
.logo-bottom{
    display: block;
    width: 160px;
    margin: 0 auto 24px;
}
@media all and (min-width: 641px){
    footer{
        text-align: center;
    }
}