/*----------------------------------------
 * Global
----------------------------------------*/
html {
	font-size: 62.5%;
}
body {
	font-size: 1.4rem;
	line-height: 2em;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
#header .nav, .inner {
	width: 1024px;
	margin: 0 auto;
}
/* 画面サイズの横幅が 1024px より小さい場合に適用 */
@media screen and (max-width: 1024px) {
	#header .nav, .inner {
		width: 95%;
	}
}
section {
	padding: 1em 0;
}
h1 {
	font-size: 1.3em;
	padding-bottom: 0.5em;
	text-align: center;
	color: #8071b2;
}
h2 {
	padding: 0.8em 0 0.5em 0;
	text-align: center;
	color: #7F7F7F;
	font-size: 50px;
}
h2 .ff_gothic{
	font-size: 18px;
}
.bg {
	background-color: #fafafa;
}
/*----------------------------------------
 * Catch
----------------------------------------*/
section#catch,
section#catch2025 {
	width: 100%;
	height: 88%;
	padding: 0;
	background-image: url(images/catch-img.jpg);
	background-position: center center;
	background-size: auto 100%;
	position: relative;
}
#catch h2,
#catch2025 h2{
	color: #fff;
	padding-top: 2em;
}
/*----------------------------------------
 * Start
----------------------------------------*/
#start-try {
	background-color: #ccb094;
	font-size: 1.2em;
	line-height: 2em;
	color: #fff;
	background-image: url(images/start1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1024px auto;
}
#start-try .inner {
	padding: 2em 0 2em 340px;
}
#start-try span {
	border-radius: 3px;
	-webkit-border-radius: 3px;
	/* for Safari and Chrome */
	-moz-border-radius: 3px;
	/* for Firefox */
	-o-border-radius: 3px;
	/* for opera */
	border: 1px solid #fff;
	padding: 0.3em;
}
/* start-change */

#start-change {
	padding: 3em 0 3em 230px;
	line-height: 2em;
	background-image: url(images/start2.jpg);
	background-repeat: no-repeat;
	text-align: center;
}
#start-change h3 {
	font-size: 1.3em;
}
#start-change li {
	display: inline-block;
	border: 2px solid #fff;
}
#start-change span {
	border-radius: 3px;
	-webkit-border-radius: 3px;
	/* for Safari and Chrome */
	-moz-border-radius: 3px;
	/* for Firefox */
	-o-border-radius: 3px;
	/* for opera */
	border: 1px solid #8071b2;
	;
	padding: 0.3em 0.8em;
	color: #fff;
	background-color: #8071b2;
}
/*----------------------------------------
 * Abuot gluten free
----------------------------------------*/
#abuot-gluten-free ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#abuot-gluten-free li {
	width: 48%;
	padding: 230px 0 3em 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
/*#abuot-gluten-free li.leftbox {
	float: left;
}
#abuot-gluten-free li.rightbox {
	float: right;
}*/
#abuot-gluten-free .box1 {
	background-image: url(images/about-gluten-free1.jpg);
}
#abuot-gluten-free .box2 {
	background-image: url(images/about-gluten-free2.jpg);
}
#abuot-gluten-free .box3 {
	background-image: url(images/about-gluten-free3.jpg);
}
#abuot-gluten-free .box4 {
	background-image: url(images/about-gluten-free4.jpg);
}
#abuot-gluten-free h1 {
	width: 75%;
	padding: 0.8em 0;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	/* for Safari and Chrome */
	-moz-border-radius: 0 5px 0 0;
	/* for Firefox */
	-o-border-radius: 0 5px 0 0;
	/* for opera */
	border: 1px solid #fff;
	background-color: #fff;
}
/*----------------------------------------
 * Btn
----------------------------------------*/
#btn div {
	width: 50%;
	padding: 1em 0;
	margin: 0 auto;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	/* for Safari and Chrome */
	-moz-border-radius: 6px;
	/* for Firefox */
	-o-border-radius: 6px;
	/* for opera */
	background-color: #6CF;
	color: #fff;
	text-align: center;
}
#btn div h1 {
	display: inline-block;
	color: #fff;
	padding: 0;
}
#btn div a {
	color: #fff;
}
/*----------------------------------------
 * Recipe
----------------------------------------*/

#recipe img {
	width: 100%;
	height: auto;
}
/*----------------------------------------
 * Powder
----------------------------------------*/
#powder {
	position: relative;
	height: 790px;
	text-align: center;
	background-image: url(images/powder.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1140px auto;
	padding-bottom: 0;
}
#powder .text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	height: 66%;
}
#powder p {
	color: #666666;
}
#powder h2 {
	padding: 1em 0 0.3em 0;
}
#powder h1 {
	width: 550px;
	font-size: 24px;
	border-top: 1px solid #ccc;
	margin: 0 auto;
	padding: 0.5em 0 2em;
}
#powder p.ff_main {
	padding-top: 3em;
	font-size: 24px;
	color: #8071b2;
}
/*----------------------------------------
 * Courses
----------------------------------------*/
#courses_top {
	padding-top: 1.5em;
}
#courses {
	overflow: hidden;
	line-height: 1.5em;
}
#courses .title {
	width: 34%;
	float: left;
}
#courses .title img {
	width: 100%;
	height: auto;
}
#courses dl {
	width: 32%;
	float: left;
	padding: 0 0 2.5em 3%;
}
#courses dt {
	text-align: center;
	padding: 0.5em 0;
	border-top: 3px solid #68DBD9;
	border-bottom: 1px solid #ccc;
	color: #6CF;
	font-size: 1.2em;
	line-height: 1.8em;
	font-weight: bold;
}
#courses dd {
	padding-top: 1em;
}
#courses dt span {
	display: block;
}
a#courses_top {
	padding-top: 80px;
}
/*----------------------------------------
 * Greeting
----------------------------------------*/
#greeting .inner {
	padding: 2em 0;
	overflow: hidden;
	background-image: url(images/greeting.jpg);
	background-repeat: no-repeat;
}
#greeting .text {
	width: 80%;
	height: 310px;
	overflow-y: scroll;
	padding: 2em;
	background-color: rgba(255, 255, 255, 0.7);
	float: right;
}
#greeting .text p {
	text-indent: 1em;
}
/*----------------------------------------
 * about-teacher
----------------------------------------*/
#about-teacher {
	overflow: hidden;
}
#about-teacher .inner {
	padding-top: 2em;
}
#about-teacher .inner div {
	float: left;
}
#about-teacher .prof {
	width: 35%;
	text-align: center;
	line-height: 1.5em;
}
#about-teacher .name {
	font-size: 1.3em;
	padding: 0.5em 0;
}
#about-teacher .prof img {
	width: 40%;
}
#about-teacher .text {
	width: 60%;
	height: 250px;
	overflow-y: scroll;
}
#about-teacher .text .list span {
	color: #6CF;
}
/*----------------------------------------
 * Start2
----------------------------------------*/

#start2 #start-try2 {
	background-color: #ccb094;
}
#start2 #start-try2 .inner {
	background-image: url(images/course-start.jpg);
	background-repeat: no-repeat;
	background-position: -130px 0;
	-webkit-background-size: auto 110%;
	background-size: auto 110%;
	padding: 2em 0 2em 415px;
	color: #fff;
	font-size: 18px;
}
#start2 h1 {
	font-size: 30px;
	text-align: left;
	color: #fff;
	padding-bottom: 0.8em;
}
#start-try2 span {
	border-radius: 3px;
	-webkit-border-radius: 3px;
	/* for Safari and Chrome */
	-moz-border-radius: 3px;
	/* for Firefox */
	-o-border-radius: 3px;
	/* for opera */
	border: 1px solid #fff;
	padding: 0.3em;
}
#start2 h1 span {
	border: none;
	padding: 0;
}
/*----------------------------------------
 * about-ifca
----------------------------------------*/

#about-ifca {
	padding-bottom: 0;
}
#about-ifca h2 {
	background-image: url(images/ifca-kabu.jpg);
	-webkit-background-size: auto 80px;
	background-size: auto 80px;
	background-repeat: no-repeat;
	background-position: center;
}
#about-ifca .inner {
	padding: 2em 100px 1em 100px;
	font-size: 0.8em;
	line-height: 1.5em;
	overflow: hidden;
}
#about-ifca .mark {
	width: 120px;
	float: left;
}
#about-ifca .text {
	width: 600px;
	float: left;
}
#about-ifca .text h3 {
	font-size: 1.2em;
	font-weight: bold;
	padding: 0.5em 0;
}
/*----------------------------------------
 * Footer
----------------------------------------*/
footer {
	text-align: center;
	font-size: 0.7em;
	background-color: #fafafa;
	padding: 3em 0 1em 0;
}
/*----------------------------------------
 * Form
----------------------------------------*/
.botton input#request {
	border-color: #6CF;
	background-color: #6CF;
}
.botton input#apply {
	border-color: #8071b2;
	background-color: #8071b2;
}


/*----------------------------------------
* スマホ用
----------------------------------------*/
@media screen and (max-width: 767px) {
	body {
		font-size: 1.4em;
	}
	h1 {
		font-size: 1.2em;
	}
	h2 {
		padding: 0.8em 0 0.5em 0;
		text-align: center;
		color: #7F7F7F;
		font-size: 32px;
	}
	h2 .ff_gothic{
		font-size: 12px;
	}
	section {
		width: 100%;
	}
	#start-try .inner, #start-change.inner, #greeting .text, #start2 #start-try2 .inner {
		width: 100%;
		padding: 1em;
	}
	#abuot-gluten-free li.leftbox, #abuot-gluten-free li.rightbox, #courses .title, #courses dl, #reeting .text, #about-teacher .inner div, #about-ifca .inner, #about-ifca .mark, #about-ifca .text {
		width: 100%;
		padding: 0;
		float: none;
	}
	/*
	h2 {
		font-size: 200%;
	}
	/*----------------------------------------
	 * Catch
	----------------------------------------*/
	section#catch,
    section#catch2025 {
		display: block;
		height: 0;
		width: 100%;
		padding-bottom: 100%;
		/*background-image: url(images/smart-catch-img-btn.jpg);*/
		background-image: url(images/smart-catch-img.jpg);
		background-size: cover;
	}
	#catch h2,
	#catch2025 h2 {
		padding-top: 0.3em;
	}
	/*----------------------------------------
	 * Start
	----------------------------------------*/
    #start {
        padding-top: 0;
    }
     
	#start-try {
		background-position: -120px 0;
	}
	#start-try .inner {
		padding-left: 25%;
		font-size: 90%;
		line-height: 1.8em;
	}
	#start-change {
		background-position: center -1em;
	}
	#start-change h1 {
		padding-top: 7em;
	}
	/*----------------------------------------
	 * Abuot gluten free
	----------------------------------------*/
	#abuot-gluten-free li.leftbox, #abuot-gluten-free li.rightbox {
		padding-bottom: 3em;
	}
	#abuot-gluten-free li.leftbox, #abuot-gluten-free li.rightbox {
	  width:100%;
	}
	#abuot-gluten-free li.leftbox::before,
	#abuot-gluten-free li.rightbox::before {
	  content: '';
	  display:block;
	  padding-top:50%;
	}
	#abuot-gluten-free h1 {
		width: 90%;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		/* for Safari and Chrome */
		-moz-border-radius: 4px;
		/* for Firefox */
		-o-border-radius: 4px;
		/* for opera */
		margin: 0 auto;
		font-size: 95%
	}
	/*----------------------------------------
	 * Btn
	----------------------------------------*/
	#btn div {
		width: 80%;
		padding: 0.5em 0;
	}
	#btn div h1 {
		display: block;
		font-size: 1.2em;
		font-weight: bold;
	}
	/*----------------------------------------
	 * Powder
	----------------------------------------*/
	#powder-smart {
		background-image: url(images/smart-powder.jpg);
		background-position: center 0;
		background-size: 90% auto;
		background-repeat: no-repeat;
		font-size: 100%;
		line-height: 1.6em;
		padding-top: 8em;
	}
	#powder-smart h1 {
		width: 100%;
		font-size: 1.2em;
		border-top: 1px solid #ccc;
		padding: 0.5em 0 2em;
	}
	#powder-smart p {
		padding: 0 2%;
	}
	#powder-smart h3.ff_main {
	padding: 1em 0 0 0;
	font-size: 15px;
	color: #8071b2;
	text-align: center;
}
	/*----------------------------------------
	 * Courses
	----------------------------------------*/
	a#courses_top {
		padding: 0;
		margin-top: -50px;
		padding-top: 50px;
	}
	#courses_top {
		padding-top: 0;
	}
	#courses dt {
		text-align: left;
		font-size: 1.2em;
	}
	#courses dt span {
		display: inline;
		padding: 0 1em 0 0;
	}
	#courses dd {
		padding-bottom: 2em;
		font-size: 1.4rem;
	}
	/*----------------------------------------
	 * Greeting
	----------------------------------------*/
	#greeting .inner {
		padding: 5em 0 3em 0;
	}
	#greeting .text {
		width: 100%;
	}
	/*----------------------------------------
	 * About-teacher
	----------------------------------------*/
	#about-teacher .inner div {
		padding-bottom: 2em;
	}
	/*----------------------------------------
	 * Start2
	----------------------------------------*/
	#start2 #start-try2 {
		background-image: url(images/start1.jpg);
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: -200px 0;
	}
	#start2 #start-try2 .inner {
		background-image: url();
		padding-left: 20%;
		font-size: 17px;
	}
	#start2 h1 {
		text-align: center;
	}
	#start2 h1 span {
		display: block;
		border: none;
	}
	/*----------------------------------------
	 * about-ifca
	----------------------------------------*/
	#about-ifca h2 {
		-webkit-background-size: auto 50px;
		background-size: auto 50px;
	}
	#about-ifca .inner {
		padding: 2em 0 1em 0;
	}
	#about-ifca .mark, #about-ifca .text {
		margin: 0 auto;
		width: 80%;
		padding-bottom: 1em;
	}
	#about-ifca .mark {
		text-align: center;
	}
	/*----------------------------------------
	 * Footer-nav
	----------------------------------------*/
	#footer-nav {
		overflow: hidden;
		padding: 0;
	}
	#footer-nav li {
		padding: 0;
		width: 34%;
		float: left;
	}
	#footer-nav .f-title {
		line-height: 1.3em;
		padding-top: 0.5em;
		padding-left: 0.5em;
		width: 32%;
	}
	#footer-nav .f-title span {
		display: block;
		width: 100%;
	}
	#footer-nav .ff_main {
		font-size: 24px;
	}
	#footer-nav .ff_gothic {
		font-size: 10px;
	}
	#footer-nav .request a,
	#footer-nav .application a {
		text-align: center;
		padding: 0.5em 0;
		color: #fff;
	}
	#footer-nav .request a {
		background-color: #6CF;
	}
	#footer-nav .application a {
		background-color: #8071b2;
	}
	/*----------------------------------------
	 * Program
	----------------------------------------*/
	#container img {
		width: 85%;
	}
	.sns_icon.bottom {
		margin: 0 auto;
		padding-top: 2em;
	}
}

/* 動画のボタン */
.movie-btn.inner {
	text-align: right;
}

/*
 * 20221101 member btn 追加
*/
.smart_btn_member {
    display: none;
    padding: 2em 15% 1em 15%;
}
.smart_btn_member img {
    width: 100%;
}
@media screen and (max-width: 767px) {
    #openBtn.member20221101 {
        display: none;
    }
    .smart_btn_member {
        display: block;
    }
}


/*
 * ページによってカラーの変更
 * header navi　と色を揃える
 *各ページのスタイルシート一番下へ
*/
#page-header-main .nav li.btn a.request,
.botton input#request {
    background: #6CF;/*背景色*/
}
#page-header-main .nav li.btn a.apply,
.botton input#apply {
    background: #8071b2;/*背景色*/
}
/* 折りたたみ */
#page-header-main .nav li.btn-smart a.request {
	color: #6CF;/*文字の色*/
}
#page-header-main .nav li.btn-smart a.apply {
    color: #8071b2;/*文字の色*/
}
#page-guide-area .guide {
	background-color: #fff;
}

/*
 * twのズレ修正
*/
#page_footer .sns {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 2em 0;
}
#page_footer .sns .tw {
	padding: 14px 0 0 10px;
}