@charset "utf-8";
/* CSS Document */
article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
    }

body{
    background: #fff;
    font-size: 100%;
    font-family: "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    margin: 0;
    padding: 0;

}

.sp-only{
    display: none !important;
}
.pc-only{
    display: block !important;
}

p {
    font-size:100%;
	line-height:1.9em;
	margin:0;
}

strong {
    font-weight:bold;
}

figure{
    margin: 0;
    padding: 0;
}

img{
    vertical-align: top;
    max-width: 100%;
}

.inner{
    max-width: 1000px;
    margin: 0 auto;
    width: 96%;
}
*{
    box-sizing: border-box;
}

.indent li{
    text-indent: -1em;
    padding-left: 1em;
}

/*　clearfix--------------------------------　*/
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.clearfix {
    zoom: 1;
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}

/*　flex--------------------------------　*/
.flex{
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.flex-fs{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.flex-fe{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.flex-jcc{
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.flex-jcsb{
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flex-wrap{
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}



/*　ヘッダー--------------------------------　*/
#head {
    width:100%;
    margin: 0 auto;
    clear: both;
    overflow: hidden;
    position: relative;
}
#head .logo{
    padding: 2% 0;
    max-width: 1000px;
    margin: 0 auto;
    width: 96%;
}
#head h1{
    text-align: center;
    max-width: 230px;
    margin: 0 auto;
}

#head h1 a{
    display: block;
}

#head h1 span{
    display: none;
}


/*　ナビ表示--------------------------------　*/

/*　スマホ用ナビ非表示　*/

#navi-box-sp {
    display:none;
}
/*　ビジュアル--------------------------------　*/
.visual{
    position: relative;
}
.visual .inner{
    position: relative;
}

/*スクロールダウン全体の場所*/
.scrolldown{
	position:absolute;
	right:50px;
	bottom:10px;
    /*全体の高さ*/
	height:70px;
}

/*Scrollテキストの描写*/
.scrolldown span{
	position: absolute;
	left:-8px;
	top: -32px;
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 線の描写 */
.scrolldown:after{
	content: "";
	position: absolute;
	top: 10px;
	width: 1px;
	height: 70px;
	background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	/* animation: pathmove 1.4s ease-in-out infinite;
	opacity:0; */
}

/*高さ・位置・透過が変化して線が上から下に動く*/
/* @keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:40px;
		opacity: 1;
	}
	100%{
		height:0;
		top:70px;
		opacity: 0;
	}
} */

/*　コンテンツ外枠--------------------------------　*/

#contents {
	width:100%;
    margin:0 auto;
}
#contents:after {
	content:".";
	height:0;
	clear:both;
	visibility:hidden;
	display:block;
}
/*　コンテンツメイン--------------------------------　*/

#contents-main{
    width: 100%;
    position: relative;
}
/*幅940px　内枠*/
#contents-main .contents_inner{
    width: 96%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 0 80px;
}
/*floatした時の右端のマージン0*/
#contents-main .last{
    margin-right: 0 !important;
}

/*　背景設定　--------------------------------　*/

/*背景大枠*/

/*PC用背景*/

.special{
    background: #E4E3D8;
}
.recipestory{
    background: #fff;
}

.osusume{
    background: url(../img/contents_osusume_bg.jpg) no-repeat center;
    background-size: cover;
}
.nagare{
    background: #fff;
}


/*　本文　--------------------------------　*/

/*　文字色・サイズ　共通　*/
#contents-main p,
#contents-main table,
#contents-main ul ,
#contents-main ol {
	color:#333;
	font-size:100%;
	line-height:1.7em;
	}

/*　段落　*/
#contents-main p {
	margin:0 0 1em 0 ;
}

/* リンク文字色 */
a {
	color: #333;
    opacity: 1;
    text-decoration:none ;
    transition: 0.3s ease ;
}

a:hover {
	color:#666;
    text-decoration:none ;
    opacity: 0.7;
}


#contents-main a {
	color: #333;
    opacity: 1;
    text-decoration:none ;
    display: block;
    transition: 0.3s ease ;
}

#contents-main a:hover {
	color:#666;
    text-decoration:none ;
    opacity: 0.7;
}

#contents-main h2,
#footer h2{
    font-size: 150%;
    margin: 0 0 2em;
    line-height: 2;
    text-align: center;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 800;
    letter-spacing: 0.1em;
}
#contents-main h2 span,
#footer h2 span{
    display: none;
}

#contents-main h3,
#footer h3{
    font-size: 125%;
    line-height: 1.5;
    margin: 1em 0 10px;
    text-align: left;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 800;
}
#footer h3{
    font-size: 112.5%;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#contents-main .fs-small{
    font-size: 70%;
}
#contents-main .fs-large{
    font-size: 150%;
}


#contents-main .mb-0{
    margin-bottom: 0 !important;
}
#contents-main .mt-0{
    margin-top: 0 !important;
}
#contents-main .pt-0{
    padding-top: 0 !important;
}
#contents-main .mb-2em{
    margin-bottom: 2em !important;
}




#contents-main .tac{
    text-align: center;
}
#contents-main .serif{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}




/*about　--------------------------------　*/

#contents-main .tate {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-align: start;
}
#contents-main .about {
    padding-top: 60px;
}
#contents-main .about .tate{
    margin: 0 3em 0 2em;
    color: #b2a382;
}
.application .contents_inner{
    position: relative;
    background: url(../img/common_lessonset_img02.jpg) no-repeat top left;
    background-size: 50% auto;
}
.application_ct{
    width: 80%;
    margin-left: auto;
    padding: 4% 4%;
    background-color: rgba(255,255,255,0.9);
    border: 1px solid #b2a382;
}
#contents-main .application_ct h3{
    text-align: center;
    margin-bottom: 2em;
    color: #b2a382;
    letter-spacing: 0.1em;
}
#contents-main .bg-black {
    background-color: #b2a382;
    color: #fff;
}
#contents-main .bg-black.btn a{
    padding: 5%;
}

#contents-main .bg-black p,
#contents-main .bg-black table,
#contents-main .bg-black ul,
#contents-main .bg-black ol {
    color: #fff;
}

#contents-main .bg-black h2{
    width: 24%;
}

.note{
    margin: 2em 0 1em;
    padding: 0 2% 0 0;
}
.note-image{
    margin: 2em auto;
    text-align: center;
}
#contents-main  .cl-w {
    color: #ffffff;
}
#contents-main .about .bb {
    max-width: inherit;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #b2a384;
    max-width: 516px;
}
#contents-main .btn {
    display: inline-block;
    max-width: 400px;
    width: 52%;
    margin: 10px 4%;
    position: relative;
    text-align: center;
    border: 1px solid #fff;
}
#contents-main .about .btn img{
    width: 100%;
}
/* #contents-main .btn .text-btn{
    background: #333;
    color: #fff;
} */
#contents-main .btn .text-btn h3,
#footer .btn .text-btn h3 {
    margin: 0.4em auto 0;
    font-size: 140%;
    /* color: #fff; */
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    padding: 0 1em;
}
#contents-main .btn .text-btn p,
#footer .btn .text-btn p{
    /* color: #fff; */
    margin-bottom: 10px;
    text-align: center;
}
#contents-main .btn .text-btn p.price,
#footer .btn .text-btn p.price{
    font-size: 120%;
    font-weight: 700;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin: 8px 0 10px;
    color: #b2a382;
}
#contents-main .btn .in-btn {
    background: #b2a382;
    padding: 10px;
    color: #fff;
}
#contents-main .fs-s,
#footer .fs-s {
    font-size: 80%;
    display: inline-block;
}

#contents-main .fs-l,
#footer .fs-l {
    font-size: 140%;
}
#contents-main .about .toblog {
    position: absolute;
    top: 102%;
    line-height: 1.4;
}
#contents-main .pay table,
#footer .pay table {
    margin: 0 auto 10px;
}
#contents-main .pay table .fc-w,
#footer .pay table .fc-w{
    color: #fff;
    padding: 0 10px;
}
#contents-main .flex .pt{
    padding-top: 4.4%;
}
#contents-main .underline{
    border-bottom: 1px solid #c0b090;
    display: inline-block;
}

/*初級講座について*/
.about-lesson_ct{
    padding: 0 5%;
}
.about-lesson_ct h3{
    position: relative;
}
.about-lesson_ct h3{
    content: "";
    width: 130px;
    height: 1px;
    position: absolute;
    top: 44px;
    left: -40px;
    display: inline-block;
    transform: rotate(-45deg);
    background-color: #c0b090;
}
#contents-main .pc-tac{
    text-align: center;
}




/*recipestory　--------------------------------　*/
#contents-main .recipestory .contents_inner{
    max-width: 1000px;
}

#contents-main .recipestory h3{
    letter-spacing: 0.2em;
    color: #666;
}

#contents-main .recipe ul > li{
    width: 44%;
    max-width: 460px;
    margin: 0 3% 50px;
    text-align: center;
}
#contents-main .recipe .recipi_ttl{
    position: relative;
}
#contents-main .recipe .recipi_ttl span{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 150%;
    font-weight: 600;
}
#contents-main .recipe .recipi_ttl .serif span{
    padding-left: 18%;
}
#contents-main .recipe .recipi_ttl p{
    margin-left: 18%;
    text-align: left;
    margin-bottom: 10px;
    font-size: 12px;
}

#contents-main .recipe .recipi_ttl:after{
    content: "";
    width: 130px;
    height: 1px;
    position: absolute;
    top: 44px;
    left: -40px;
    display: inline-block;
    transform: rotate(-45deg);
    background-color: #444;
}


#contents-main .recipe ul > li p{
    text-align: center;
    margin-top: 5px;
}

/*　動画 movie--------------------------------　*/
#contents-main .movie iframe{
    max-width: 1000px;
    width: 100%;
}
/*　流れ--------------------------------　*/

.nagare {
    text-align: center;
}
#contents-main .nagare h3{
    text-align: center;
}
.yazirusi {
  position: relative;
  width: 1px;
  height: 70px;
  margin: 0 auto;
}
.line01 {
  height: 70px;
  background-color: #b2a382;
}
.line02 {
  position: absolute;
  bottom: 0;
  right: 0;
  transform-origin: right bottom;
  width: 1px;
  height: 12px;
  background-color: #b2a382;
  transform: rotate(45deg);
}




/* フッター--------------------------------　*/
#footer {
    width: 100%;
    padding: 0;
    margin: 0;
    background: #E4E3D8;
}
#footer .btn {
    display: inline-block;
    max-width: 440px;
    width: 45%;
    margin: 20px 2.5% 70px;
}
#footer .btn img{
    width: 100%;
}

#footer  .btn .text-btn{
    /* background: #a0bb35; */
    color: #fff;
}
#footer .bg{
    background: #a0bb35;
}
#footer .br {
    background: #dd423d;
}
#footer .flex .pt {
    padding-top: 17%;
}
#footer .banner{
    display: none;
}

#footer .footer-logo{
    line-height: 1;
    max-width: 320px;
}
#footer .footer-address,
#footer .footer-hp a{
    font-size: 90%;
    color: #ccc;
}

#footer .info{
    background: #333;
    color: #fff;
    padding: 1em 1em 1.5em;
}
#footer .info .flex{
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
    -webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}
#footer .sns{
    margin-left: 1em;
}
#footer .sns a{
    margin: 0 2px;
}
#footer .sns a img{
    max-width: 20px;
}

#footer small{
    font-size: 12px;
    color: #ccc;
}
    /* ページトップ */
p.pagetop {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	}
p.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #000;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
	filter: alpha(opacity=85); /* 透過設定 */
	  -moz-opacity:0.85;
	opacity:0.85;
	}
p.pagetop a:hover {
	background-color: #333;
	}

/* お問い合わせ--------------------------------　*/
#contents-main .contactform .contents_inner {
    max-width: 800px;
}

#soy_inquiry_message_information{
    margin: 0 10% 60px;
}
#contents-main .contactform table {
	width:100%;
	border-collapse:separate;
	border-spacing : 4px 4px;
	font-size:90%;
	margin:0 0 30px 0;
}
#contents-main .contactform table th {
	padding:6px 6px ;
	white-space:nowrap;
	vertical-align:middle;
	font-weight:400;
    width:15%;
}
#contents-main .contactform table td {
	background:none;
	padding:6px 6px;
	border:none;
}

/* nest table用 */
#contents-main table#inquiry_form table{
	width:350px;
	border:0;
}


/* テキストボックスなどの長さ */
#contents-main table#inquiry_form  td input,
#contents-main table#inquiry_form  td textarea{
	padding: 8px;
    border: none;
    background: #f5f5f5;
}

#contents-main table#inquiry_form  tr.check label{
    margin-right: 1em;
}

#contents-main table#inquiry_form  td input.name{
	width:100%;}
#contents-main table#inquiry_form  td input.address{
	width:100%;}
#contents-main table#inquiry_form  td input.mail{
	width:100%;}
#contents-main table#inquiry_form  td input.tel{
	width:100%;}
#contents-main table#inquiry_form  td input.company{
	width:100%;}
#contents-main table#inquiry_form  td input.kenmei{
	width:100%;}
#contents-main table#inquiry_form  td textarea {
	width:100%;
	padding: 8px;
}

.contactform input[type="submit"]{
    padding: 1em 2em;
}

/*  アニメーションスタイル
-------------------------------------------*/
/*右から左*/
.slide-left {
	opacity: 0;
	transform: translate(-50%, 0);
	transition: 2s;
  }
.slide-left.is-show {
	transform: translate(0, 0);
	opacity: 1;
}

/*左から右*/
.slide-right {
	opacity: 0;
	transform: translate(50%, 0);
	transition: 2s;
  }
.slide-right.is-show {
	transform: translate(0, 0);
	opacity: 1;
}


/*下からふわっと表示*/
.slide-up{
 position:relative;
 top:10%;
 opacity:0;
 transition: top 2s,opacity 2s;
}
.slide-up.is-show {
   top:0;
   opacity:1;
}

li.slide-up:nth-child(1){
	-moz-transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms;
	-ms-transition-delay: 100ms;
}
li.slide-up:nth-child(2){
	-moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    -o-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
}
li.slide-up:nth-child(3){
	-moz-transition-delay: 300ms;
    -webkit-transition-delay: 300ms;
    -o-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
}
li.slide-up:nth-child(4){
	-moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
	-ms-transition-delay: 400ms;
}
li.slide-up:nth-child(5){
	-moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    -o-transition-delay: 500ms;
	-ms-transition-delay: 500ms;
}
li.slide-up:nth-child(6){
	-moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    -o-transition-delay: 600ms;
	-ms-transition-delay: 600ms;
}
li.slide-up:nth-child(7){
	-moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    -o-transition-delay: 700ms;
	-ms-transition-delay: 700ms;
}
li.slide-up:nth-child(8){
	-moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    -o-transition-delay: 800ms;
	-ms-transition-delay: 800ms;
}
li.slide-up:nth-child(9){
	-moz-transition-delay: 900ms;
    -webkit-transition-delay: 900ms;
    -o-transition-delay: 900ms;
	-ms-transition-delay: 900ms;
}
li.slide-up:nth-child(10){
	-moz-transition-delay: 1000ms;
    -webkit-transition-delay: 1000ms;
    -o-transition-delay: 1000ms;
	-ms-transition-delay: 1000ms;
}
#contents-main .con-main-slide-bg {
	position: relative;
	background: none;
	padding: 10px 0;
}
#contents-main .con-main-slide-bg:after {
	position: absolute;
	content: "";
	width: 0%;
	height: 100%;
    margin: 0;
    padding: 10px 0 10px;
	background: #EEDED7;
	transition: 0.8s ease;
	top: 0;
	left: 0;
	z-index: 0;
}
#contents-main .con-main-slide-bg.is-show:after {
	width: 100%;
}
#contents-main .con-main-slide-bg h2 {
	margin-top: 30px;
}