@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;700;900&family=Bebas+Neue&display=swap");
/* design size variable */
/* constance variable */
/* device width variable */
/* font responsive ratio */
/* spacer responsive ratio */
/* noto sans font weight */
/* general method */
/* linear */
/* easeSineIn */
/* easeSineOut */
/* easeSineInOut */
/* easeQuadIn */
/* easeQuadOut */
/* easeQuadInOut */
/* easeCubicIn */
/* easeCubicOut */
/* easeCubicInOut */
/* easeQuartIn */
/* easeQuartOut */
/* easeQuartInOut */
/* easeQuintIn */
/* easeQuintOut */
/* easeQuintInOut */
/* easeExpoIn */
/* easeExpoOut */
/* easeExpoInOut */
/* easeCircIn */
/* easeCircOut */
/* easeCircInOut */
/* easeBackIn */
/* easeBackOut */
/* easeBackInOut */

/* == オールクリア ========================================================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin : 0 ;
	padding : 0 ;
	border : 0 ;
	outline : 0 ;
	font-size : 100% ;
	vertical-align : baseline ;
	background : transparent ;
	list-style-type : none ;
	font-style: normal;
}


/* == body設定 ============================================================= */

body {
	color:#6a3906 ;
	font-size : 100% ;
	line-height : 180% ;
	background : #f08300 url("../images/back.png") top left repeat-x ;
	text-align: center ;
	font-family : "Noto Sans JP","メイリオ","Meiryo","ＭＳ Ｐゴシック",Arial,Helvetica,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,sans-serif ;
	-webkit-text-size-adjust: none;
}

* { box-sizing : border-box ; }
div.pc_none { display : none ; }


a:link		{ color: #a00062 ; text-decoration : underline ; }
a:hover		{ color: #c0182a ; text-decoration : underline ; }
a:visited	{ color: #493e39 ; text-decoration : underline ; }
a:active	{ color: #493e39 ; }


a:hover img{
  filter: alpha(opacity=80);
  opacity:0.8;
}

br.n { display : none ; }

@media only screen and (max-width : 568px) {
	br.n { display : inline ; }
}

p{
	text-align : left ;
	line-height: 180% ;
	margin : 0px 0px 10px 0px ;
}

@media only screen and (max-width: 568px) {
	p { font-size: 90%; }
  }



strong		{ font-weight: bold; }
.small		{ font-size : 90% ; }
.large		{ font-size : 120% ; line-height:180%; }
.center		{ text-align : center ; }
.red		{ color:#990000 ; }
.curry		{ color:#c85529 }


/* == ボタン設定 =========================================================== */

a.button {
	color : #ffffff ;
	text-decoration : none ;
	text-align : center ;
	margin : 10px auto 0px auto ;
	padding: 10px 50px ;
	background-color : #c85529 ;
	border-radius : 50px ;
}
a.button:hover { background-color : #ff7548 ; }

@media only screen and (max-width : 768px) {
	a.button { width : 80% ; padding: 10px 100px ; }
}


/* == 共通ベース設定 ===================================================== */

div#base {
	overflow : hidden ;
	text-align: center ;
	position: relative;
	margin-top : 0px ;
}


img.w100 { width : 100% ; }

@media only screen and (max-width : 768px) {
	img.w100 { width : 100% ; }
	img.image100 { width : 100% ; }
}


@media only screen and (max-width : 568px) {
	img.image100 { width : 100% ; }
}




/* == 共通ヘッダー設定 ===================================================== */

div#header {
}

div#header div.namasute-profile {
	margin : 10px auto ;
	width : 70% ;
	float : left ;
	text-align : center ;
	line-height: 180% ;
}

div#header div.namasute-img {
	margin : 10px auto ;
	width : 30% ;
	float : right ;
}

div#header div.namasute {
	margin : 10px auto ;
	background-color : #ffffff ;
	border-radius : 10px ;
	padding: 10px 15px ;
	text-align : left ;
	line-height : 180% ;
}




@media only screen and (max-width : 768px) {

	div#header div.namasute-profile {
		width : 100% ;
		float : none ;
	}

	div#header div.namasute-img {
		width : 100% ;
		float : none ;
	}
	
	div#header div.namasute-img img {
		width : 100% ;
		max-width : 350px ;
	}

}


div#instagram {
	position : fixed ;
	z-index : 200 ;
	right : 55px ;
	top : 15px ;
}

div#instagram img {
	width : 50px ;
}




/* == メイン画像設定 ======================================================= */



div#box_slider {
	text-align : center ;
	line-height : 0% ;
	margin : 100px 0px 0px 0px ;

}

div#box_slider img {
	width : 100% ;
}




/* == コンテンツ設定 ===================================================== */


div.bg {
	background-color : #d7caa5 ;
}

div.bg2 {
	background-color : #560000 ; color:#f08300;
}

div.bg3 {
	background-color : #ffffff ;
}



div.main {
	width : 100% ;
	max-width : 1600px ;
	text-align:center;
	margin : 0px auto 0px auto ;
	padding : 50px 10px ;
}

div.para {
	width : 100% ;
	padding : 0px 10px 0px 10px ;
	margin : 0px auto 100px auto ;
	border : 0px solid #ff0000 ;
	clear : both ;
}

div.para70 {
	width : 70% ;
	padding : 0px 10px 0px 10px ;
	margin : 0px auto 20px auto ;
	border : 0px solid #ff0000 ;
	clear : both ;
}



div.para50 {
	width : 46% ;
	display : inline-block ;
	padding : 0px 10px 0px 10px ;
	margin : 10px auto 10px auto ;
	vertical-align:top;
}

div.para50n {
	width : 46% ;
	padding : 0px 10px 0px 10px ;
	margin : 10px auto 10px auto ;
	vertical-align:top;
}

div.para30 {
	width : 32% ;
	color:#000000;
	display : inline-block ;
	padding : 0px 0px 0px 0px ;
	margin : 10px 5px 10px 5px ;
	vertical-align:top;
	background-color : #ffffff ;
}

div.bg4 {
	background-color : #fafbe9!important ;
}




div.para30n {
	width : 32% ;
	color:#000000;
	padding : 0px 0px 0px 0px ;
	margin : 10px 5px 10px 5px ;
	vertical-align:top;
	background-color : #ffffff ;
}

div.detail {
	padding : 0px 10px 0px 10px ;
}

.w500{
	width : 100% ;
	max-width : 500px ;
	margin : 0px auto 10px auto ;
}


@media only screen and (max-width : 768px) {


	div.main {
		padding : 50px 10px ;
	}


	div.para70 {
		width : 100% ;
	}

	div.para50 {
		width : 100% ;
		display : block ;
		padding : 0px 10px 0px 10px ;
		margin : 10px auto 10px auto ;
	}

	div.para50n {
		width : 100% ;
		padding : 0px 10px 0px 10px ;
		margin : 10px auto 10px auto ;
	}

	div.para30 {
		width : 100% ;
		display : block ;
		padding : 0px 10px 0px 10px ;
		margin : 10px auto 20px auto ;
	}

	div.para30n {
		width : 100% ;
		padding : 0px 10px 0px 10px ;
		margin : 10px auto 20px auto ;
	}

	div.detail {
		font-size : 100% ;
	}


}


div.box {
	border : 2px solid #000000 ;
	border-radius : 10px ;
	width : 80% ;
	padding : 10px 10px ;
	margin : 10px auto 10px auto ;
	clear : both ;
}

div.box2 {
	border : 2px solid #000000 ;
	background-color:#ffffff;
	border-radius : 10px ;
	width : 60% ;
	padding : 10px 10px ;
	margin : 10px auto 10px auto ;
	clear : both ;
}

@media only screen and (max-width : 768px) {

	div.box {
		width : 90% ;
	}

	div.box2 {
		width : 90% ;
	}

}



/* == 見出し設定 ======================================================= */


h2 {
	color : #560000 ;
	text-align : center ;
	font-size :160% ;
	line-height :130% ;
	font-weight : bold ;
	margin : 0px auto 20px auto ;
	padding : 10px ;
	border : 5px solid #f08300 ;
	background-color : #f08300 ;
	border-radius: 50px;
	width : 70% ;
}

h3 {
	font-size :140% ;
	text-align : center ;
	text-decoration : underline ;
	font-weight : bold ;
	margin : 70px 0px 30px 0px ;
}

h4 {
	font-size :110% ;
	font-weight : bold ;
	margin : 0px 0px 20px 0px ;
}


@media only screen and (max-width : 568px) {

	h2 {
		font-size :140% ;
		font-weight : bold ;
		margin : 20px auto ;
		padding-bottom : 10px ;
		width : 90% ;
		border : 0px solid #f08300 ;
	}

	h3 {
		font-size :140% ;
		margin : 50px 0px 30px 0px ;
	}

	h4 {
		font-size :110% ;
		font-weight : bold ;
		margin : 0px 0px 20px 0px ;
	}


}

/* == ページナビゲーション ================================================= */


#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 10px;
	bottom: 0;
	background: #d58b90;
	opacity: 0.8;
	border-radius: 50%;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}
#page_top a::before{
	font-family: FontAwesome;
	content: '\f102';
	font-size: 25px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}



/* == フェードイン ======================================================== */


.fadein {
    opacity : 0;
    transform : translate(0, 70px);
    transition:all 0.7s;
}

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}


/* == 回り込み解除 ======================================================== */

.clearfix:after
{
	content: url('../images/clear.gif');  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix
{
	min-height: 1px;
}

* html .clearfix
{
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}





/* == ナマステ紹介 ===================================================== */


div.para50 div.profile {
	width : 100% ;
	margin-bottom : 10px ;
	font-size : 90% ;
	text-align : left ;
}

div.para50 div.profile-title {
	padding : 0px 0px 5px 0px ;
}


div.para50 div.profile-title a:link	{ color: #e42b26 ; text-decoration : underline ; }


div.para50 div.profile-body {
	padding : 7px 7px 7px 7px ;
	background-color : #ffffff ;
	display: none;
}


@media only screen and (max-width : 768px) {

	div.para50 strong {
		font-size : 116% ;
	}


	div.para50 div.profile {
		font-size : 100% ;
		margin-bottom : 20px ;
	}

	div.para50 div.profile-body {
		padding : 10px ;
	}



}




div.para30 div.profile {
	width : 100% ;
	margin-bottom : 0px ;
	font-size : 90% ;
	text-align : left ;
}

div.para30 div.profile-title {
	padding : 0px 0px 5px 0px ;

}


div.para30 div.profile-title a:link	{ color: #e42b26 ; text-decoration : underline ; }


div.para30 div.profile-body {
	padding : 0px ;
	display: none;
}


@media only screen and (max-width : 768px) {

	div.para30 strong {
		font-size : 116% ;
	}


	div.para30 div.profile {
		font-size : 100% ;
		margin-bottom : 20px ;
	}

	div.para30 div.profile-body {
		padding : 10px ;
	}

}





/* == common ===================================================== */


div.mainimage {
	background-color : #560000 ;
	margin-bottom : 0px ;
}

div.mainimage img {
	vertical-align:top;
}

div.catch {
	color:#f08300 ;
	background-color : #560000 ;
	margin-bottom : 0px ;
}

div.catch div {
	display : none ;

}


@media only screen and (max-width: 768px) {
	div.catch img {
		display : none ;
	}

	div.catch div {
		display : block ;
	}

  }




h1 {
	color: #c85529;
	font-size:200%;
	margin : 10px auto 20px auto ;
}

@media only screen and (max-width: 568px) {
  h1 {  font-size: 130%; }
  }

div.date {
  color: #c85529;
  font-family: "Bebas Neue", sans-serif!important;
  font-size: 4.39238653vw;
  text-align: center;
	margin-bottom : 10px ;
}
@media only screen and (max-width: 568px) {
  div.date {
    font-size: 9.6vw;
  }
}
div.date strong {
  font-size: 6.2225475842vw;
  font-weight: normal;
}
@media only screen and (max-width: 568px) {
  div.date strong {
    font-size: 13.6vw;
  }
}
div.time {
  color: #c85529;
  margin-bottom: 2.9282576867vw;
  font-size: 1.8301610542vw;
  font-weight: 500;
  text-align: center;
}
@media only screen and (max-width: 568px) {
  div.time {
    margin-bottom: 6.6666666667vw;
    font-size: 6vw;
  }
}
div.place {
  color: #c85529;
  font-size: 1.4641288433vw;
  font-weight: 500;
  text-align: center;
}
@media only screen and (max-width: 568px) {
  div.place {
    font-size: 3.2vw;
  }
}
div.place strong {
  font-size: 2.196193265vw;
}
@media only screen and (max-width: 568px) {
  div.place strong {
    font-size: 4.8vw;
  }
}






/* == 募集要項 ===================================================== */



dl.detail	{ margin : 20px auto 20px auto ; width:100%; max-width:800px; }
dl.detail dt	{
	width : 180x ;
	background-color : #560000  ;
	float : left ;
	font-weight : bold ;
	padding : 0px 20px ;
	color:#f08300;
}
dl.detail dd	{
	padding-left : 180px ;
	margin-bottom : 20px ;
	text-align : left ;
	padding-bottom : 5px ;
	border-bottom:1px solid;
}

@media only screen and (max-width: 768px) {
dl.detail	{ width:90%; }
	dl.detail dt	{
		width : auto ;
		float : none ;
		font-weight : bold ;
		padding : 0px 20px ;
	}
	dl.detail dd	{
		padding : 10px 0px ;
		margin-bottom : 20px ;
		text-align : left ;
		border-bottom:0px solid;
	}

}