@charset "utf-8";
@media only screen and (max-width:850px){

body { min-width:400px; font-size:100%;}

#header { display:none;}
#content{ width:100%;}
#footer { width:100%;}

#wrapper { background:#FFF; border-top:none;}
#base { width:auto; margin:0 !important;}

.pc { display:none;}
.sm { display:block;}

/*====================================================================================================
  HEADER
====================================================================================================*/
#header {}

/*====================================================================================================
  CONTENT
====================================================================================================*/
#content {}

/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer {}

/*====================================================================================================
  FIX CONTENT
====================================================================================================*/
#page {bottom:40px; right:30px;}



/*====================================================================================================
  TOP PAGE
====================================================================================================*/
#toppage .mainimg {
	padding-top:0;
	background: url("../../image/top/mainimg.jpg") no-repeat center center;
	background-size: cover;
}
#toppage .mainimg .catch { text-align: center;}
#toppage .mainimg .catch img { width: 80%; height: auto; max-width:739px;}
#toppage .mainimg .organic { position: relative; margin: auto; max-width: 1030px;}
#toppage .mainimg .organic img {
	position: absolute; bottom:-80px; right: 0;
	width:30%; height:auto;
}
#toppage h3 { padding: 10px 0; font-size: 130%; line-height: 110%;}
#toppage h3::before { left: -30px; }
#toppage h3::after { right: -30px;}
#toppage .btn {  width: 360px;}
#toppage .btn a { 	font-size:131.5%;}

/* ABOUT ******************************************************/
#toppage .about { padding: 10% 0; background:#fff;}
#toppage .about .main_come {
	margin:0 auto;
	width: 96%;
	padding:7% 0 5%;
	font-size:110%;
	line-height:200%;
}
#toppage .about .main_come::after {
	top:-40px; left:-50px;
	width: 180px; height:100px;
	background-size: 100% auto;
}
#toppage .about ul.tokucyo { margin:5% auto; width:70%;}
#toppage .about ul.tokucyo::before {
	bottom:-47%; left:-19%;
	width: 120px; height:200px;
	background-size: 100% auto;
}
#toppage .about ul.tokucyo li { float: left; width: 48%; margin: 1%;}
#toppage .about ul.tokucyo li img { width: 100%; height: auto;}



/* SET fEE ****************************************************/
#toppage .set_fee { padding: 10% 0;}
#toppage .set_fee h2 {  padding-bottom:10%; }
#toppage .set_fee h2 span { background-size:80% 80%;}
#toppage .set_fee h2 b { font-size:180%;}
#toppage .set_fee h2 span { font-size:131.5%;}
#toppage .set_fee h2::before {
	top:-100px; right:5%;
	width: 100px; height: 105px;
	background-size: 100% auto;
}
#toppage .set_fee .come {  padding: 5% 0;}
	


/* MARUAEAI ***************************************************/
#toppage .maruarai { padding:10% 0}
#toppage .maruarai h2 { font-size:180%;}
#toppage .maruarai h2 span::before {
	top:-100px; left:-150px;
	width:130px; height:100px;
	background-size: 100% auto;
}
#toppage .maruarai h2 span::after {
	bottom:-50px; right: -35px;
	width: 60px; height: 57px;
	background-size: 100% auto;
}
#toppage .maruarai .come {
	margin:0 auto;
	width: 96%;
	padding:7% 0 5%;
	font-size:110%;
	line-height:200%;
}


/* OBI ********************************************************/
#toppage .obi b { padding:0 0 5%; font-size:180%; text-align: center;}
#toppage .obi b::before {
	position: static;
	margin-bottom:5%;
	 width:100%; height:180px;
	border-radius:0;
	background-position: center center;
	background-size: cover;
}
#toppage .obi b::after {
	right:40px; bottom:-40px;
	width: 40px; height: 67px;
	background-size: 100% auto;
}


/* POINT ******************************************************/
#toppage .point { padding:10% 0 20%; }
#toppage .point h3 { margin-bottom:5%;  width: 80%; max-width:600px;}
#toppage .point ul { 
	float:none;
	margin:50px auto 0;
	padding: 7% 0 0;
	width:96%;
	font-size: 110%;
}
#toppage .point ul::before {
	top:-25px; left: 0; right: 0;
	width: 50px; height: 50px;
	background-size: 100% auto !important;
}
#toppage .point ul li:nth-child(1) { padding:  0 20px;}
#toppage .point .come { 
	margin:0 auto;
	width: 96%;
	padding:7% 0 5%;
	font-size:110%;
	line-height:200%;
}
#toppage .point .before_after { text-align: center;}
#toppage .point .before_after img { width: 96%; height: auto;}


/* HAPPY ******************************************************/
#toppage .happy {  padding:15% 0 10%; }
#toppage .happy h3 { position:absolute; top: -30px; width: 80%; max-width:600px;}
#toppage .happy dl { float:none;  margin: 2% auto; width:80%; overflow: hidden;}
#toppage .happy dt { float: left; width: 30%;}
#toppage .happy dd { float: right;  width: 65%; padding: 10% 0 0;;}


/* FLOW *******************************************************/
#toppage .flow { padding:0 0 10%;}
#toppage .flow .come::before {
	position: static;
	width:100%; height:250px;
	background-size:100% auto;
	border-radius:0;
	z-index:0;
 }
#toppage .flow .come::after {
	position: absolute; bottom:50px; right:10px;
	width:50px; height: 65px;
	background-size:100% auto;
	border-radius:0;
	z-index: 1;
 }
#toppage .flow h4 {
	margin: 5% 2%;
	font-size: 180%;
	line-height: 130%;
}
#toppage .flow .comment { margin: 0 2%;	font-size:110%; line-height:200%;}
#toppage .flow .btn { margin:10% auto;}
#toppage .flow_img { text-align: center;}
#toppage .flow_img img { width:360px !important; height: auto;}


/* VOICE ******************************************************/
#toppage .voice { padding:10% 2%;}
#toppage .voice h4 { font-size: 110%;}
#toppage .voice h4::after {
	width: 30px; height:30px;
	top:-20px; left: 0;
	background-size:100% auto;
}
#toppage .voice h4::before {
	width: 50px; height:50px;
	top:-30px; right: 0;
	background-size:100% auto;
}
#toppage .voice ul li { margin: 2%; width:46%;}
#toppage .voice ul li img { 
	width: 100%; height:150px;
	object-fit: cover;
}

/*====================================================================================================
  SUB PAGE
====================================================================================================*/
.pan { display: none;}
h2.sb_tit { padding:10% 0; background-size:120% auto;}
h2.sb_tit span { font-size:100%; }
h2.sb_tit b { font-size:125%; }
h2.sb_tit b {
	margin:10px auto 0;
	padding: 10px 0 0;
	width:auto;
	height: 35px;
	background-position: center center;
	background-size: auto 35px;
	box-sizing: border-box;
}
h2.sb_tit.message_tit { background-size:auto 100%;}

#subpage { 
	margin:0 auto !important;
	width:100%;
	box-sizing:border-box;
}

/* MIDASHI */
#subpage h3 {font-size:125%;}
#subpage h4.mid {font-size:112.5%;}
#subpage h4 {font-size:112.5%;}

/* CATCH COPY */
#subpage .catch {font-size:112.5%;}

/* COMMON */
#subpage .comment1 {}
#subpage .comment2 {padding:5%;}
#subpage .comment3 {padding:5%;}

/* HYOU */
#subpage table.hyou { width:96%; table-layout:auto;}
#subpage table.hyou th,
#subpage table.hyou td{
	table-layout:auto !important;
	display:block !important;
	padding:2% 5% !important;
	width:90% !important;
	height:auto !important;
}
#subpage table.pc_tit { display:none;}
#subpage table.hyou .sm_mid { display:block;}

/* 2RETU */
#subpage table.hyou2 td table {}
#subpage table.hyou2 td table th,
#subpage table.hyou2 td table td {
	display:table-cell !important;
	padding:2% 5% !important;
	width:auto !important;
	height:auto !important;
}

/* 3RETU */
#subpage table.hyou3 { border-top:1px solid #DDD;}
#subpage table.hyou3+table.hyou3 { border-top:1px solid #DDD;}

/* 4RETU */
#subpage table.hyou4 {border-top:1px solid #DDD;}
#subpage table.hyou4+table.hyou4 { border-top:1px solid #DDD;}

/* 5RETU */
#subpage table.hyou5 { border-top:1px solid #DDD;}
#subpage table.hyou5+table.hyou5 { border-top:1px solid #DDD;}

/* FREE */
#subpage .pc_table { display:none;}
#subpage .sm_table { display:block;}
#subpage .sm_table table td { padding:5% !important;}
	
/* FREE2 */
#subpage table.free { margin:20px 2% 0; border-top:1px solid #DDD !important; border-bottom:1px solid #DDD !important;}
#subpage table.free td {
	table-layout:auto !important;
	display:block !important;
	padding:5% !important;
	width:90% !important;
	height:auto !important;
	border-bottom:none;
}
#subpage table.free td:last-child {border-bottom:none;}
#subpage table.free td div.sm {display:block !important; text-align:center; border-bottom:none !important /*1px solid #1F266C*/;}
#subpage table.free tr:nth-child(1) td:nth-child(1),
#subpage table.free tr:nth-child(1) td:nth-child(3) {border-bottom:1px dotted #DDD !important;}

/* FIX */
#subpage .fix_table { width: 100%; overflow-x: scroll;}
#subpage .fix_table table { padding: 0; width: auto !important;}
#subpage .fix_table table th,
#subpage .fix_table table td { padding:2%;}
#subpage .fix_table .scroll-hint-text-new {
    letter-spacing:-1px;
    font-size:75%;
    font-weight:500;
    color: #FFF;
    margin-top:-3px;
}

/* LIST */
#subpage ul.list-ul {}

/* LINK */
#subpage .link2,
#subpage .link3,
#subpage .link4 {clear:none !important; float:none !important; width:auto;}
#subpage .file2,
#subpage .file3,
#subpage .file4 {clear:none !important; float:none !important; width:auto;}

/* EMBEDDED */
#subpage .embedded {}
#subpage .embedded iframe { width: 100%; height: 300px;}

/* PHOTO BOX */
#subpage ul.photo_box { clear:none !important; float:none !important; margin:20px 2% 60px; width:96% !important;}
#subpage ul.g1 li,
#subpage ul.g2 li,
#subpage ul.g3 li,
#subpage ul.g4 li,
#subpage ul.g5 li{ width:100%;}
#subpage ul.g1 li.photo {text-align:center;}
#subpage ul.g1 li.photo img,
#subpage ul.g2 li.photo img,
#subpage ul.g3 li.photo img,
#subpage ul.g4 li.photo img,
#subpage ul.g5 li.photo img { max-width:100% !important; height:auto !important;}
#subpage ul.photo_box li.youtube {position: relative; width: 100%;}
#subpage ul.photo_box li.youtube iframe { width: 100% !important;  height: 100% !important;}

/* BOX */
#subpage .box1,
#subpage .box2 { float:none; margin:20px 2% 60px; width:96%;}
#subpage .photo-c,
#subpage .photo-l,
#subpage .photo-r { float:none; padding:0; width:100%; text-align:center;}
#subpage .photo-c img,
#subpage .photo-l img,
#subpage .photo-r img { max-width:100% !important; height:auto !important; padding:0 0 20px;}
#subpage .temple-box {}

/* LINE */
#subpage .line {}

/* BUTTON */
#subpage .btn { float:none;}
#subpage .b1,
#subpage .b2,
#subpage .b3 { width: 96%;}

/* COLUMNBOX */
#subpage .column {}
#subpage .column .col2,
#subpage .column .col3,
#subpage .column .col4,
#subpage .column .col5  { float:none; width: 96%;}

/* FLOW */
#subpage ul.flow_box {}
#subpage ul.flow_box:after { display:none;}
#subpage ul.flow_box li { float:none; width:96% !important;}
#subpage ul.flow_box li a:hover {}
#subpage .flow1+.flow1 { margin-top:30px;}
#subpage .flow1+.flow1:before { top:-30px;}
#subpage ul.flow_box li+li { margin-top:30px;}
#subpage ul.flow_box li+li:before {
	position:absolute;
	top:-30px;
	left:0;
	display:block;
	clear:both;
	content:"";
	width:100%;
	height:30px;
	background:url(../image/flow_bg_sm.png) no-repeat center center;
}
#subpage .flow1a+.flow1a {margin-top:30px;}
#subpage .flow1a+.flow1a:before { top:-30px; width:100%;}
#subpage .flow1a li+li { margin-top:5px !important; padding: 0 !important;}


/* FAQ */
#subpage dl.faq dt { font-size:112.5%;}



/*==============================================================
  REASON
==============================================================*/
#reason {}
#reason .comment { padding:2% 0 5%; font-size:110%; line-height:200%;}
#reason .column_box { padding: 3% 0 0;}
#reason .column_box dl { float:none; padding: 5%; width:96%; overflow: hidden; background:rgba(185,151,111,0.05);}
#reason .column_box dl+dl { margin-top: 5px;}
#reason .column_box dt { float:right; margin-left: 20px;}
#reason .column_box dt img { width: 150px; height: auto;}
#reason .column_box dd {}
#reason .column_box dd b {
	padding: 2% 0 !important;
	font-size:150%;
	text-align:left;
}


/*==============================================================
  FLOW
==============================================================*/
/*** --- ******************************************************/


/*==============================================================
  FAQ
==============================================================*/
/*** --- ******************************************************/


/*==============================================================
  VOICE
==============================================================*/
/*** --- ******************************************************/


/*==============================================================
  MESSAGE
==============================================================*/
/*** --- ******************************************************/


/*==============================================================
  COMPANY
==============================================================*/
/*** --- ******************************************************/


/*==============================================================
  CONTACT
==============================================================*/
/*** --- ******************************************************/


/*==============================================================
  PRIVACY
==============================================================*/
/*** --- ******************************************************/


/*==============================================================
  SITEMAP
==============================================================*/
/*** --- ******************************************************/





}