@charset "UTF-8";
@media screen and (max-width:768px) {
/* ===================================================================

	Setting

=================================================================== */
html { color:#333; background:#FFF; line-height:1.6; text-align:left; font-size:65.5%; }
body { font-size:1.5rem; font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro'; overflow-x:hidden; }
img { max-width:100%; height:auto; }
.containar { width:100%; height:100%; margin:0 auto; position:relative; }
.containar:after { content:""; display:block; clear:both; }
body h1 { font-size: 1.0em; color: #D05257; font-weight:800; letter-spacing: 0.05em;}

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

　　/* link set
	------------------------------------------------------------------- */
	a { color:#5B463F; text-decoration:none; transition:0.3s ease-in-out; }
	a img { transition:0.3s ease-in-out; }
	a:hover { color:#47676F; }
	
	/* float対策：背景色表示用
	------------------------------------------------------------------- */
	.clearfix:after { display: block; clear: both; height: 0px; line-height: 0px; visibility: hidden; content: "."; }
	.clearfix {	display: block; /* for IE8 */ }
	.both { clear:both; }	
	.hidden { display: none; }
	
	/* 	imgホバーアクション
	------------------------------------------------------------------- */
	/*.imgWrap { overflow: hidden; width: 100%;　height: auto; cursor: pointer; background-color: #737065; }
	.imgWrap img{ display: block; transition-duration: 0.3s; margin-top: -1px; }
	.imgWrap img:hover{ opacity: 0.6; transform: scale(1.1); transition-duration: 0.3s; }
	*/
	/* 	背景画像＆テキスト使用時スマホ用
	------------------------------------------------------------------- */
	.bg.spTxt { text-indent: 0; width: auto !important; height: auto !important; background-image: none !important; }
	
	/*	アルバム用	@keyframes
	----------------------------------------------------------------------*/
			@keyframes album {
					0% {
						opacity: 0;
					}
					12.5% {
						opacity: 1;
					}
					37.5% {
						opacity: 1;
					}
					50% {
						opacity: 0;
					}
				}
				
				@-webkit-keyframes album {
					0% {
						opacity: 0;
					}
					12.5% {
						opacity: 1;
					}
					37.5% {
						opacity: 1;
					}
					50% {
						opacity: 0;
					}
				}

/* ===================================================================

	Header

=================================================================== */

body > header{ width:100%; background: #fff; position: relative; z-index:9999; transition:0.3s ease-in-out; height: auto;}
body > header .containar { display: block; width: 100%;}
body > header .logo{ width: 100%;}
body > header .logo p{ display:none;}
body > header .logo h1{ width: 90%; margin: 0 auto; padding:0.5em; text-align:center;}
body > header .h_r { width: 100%; background: #fff; position: fixed; display:block; bottom: 0; }
body > header .h_r ul{ display: flex; flex-flow: row wrap; justify-content: space-between ; padding: 0; }
body > header .h_r ul li{ padding-left: 0; width: 33.3333%;}
body > header .h_r ul li p{ font-size: 9px; color: #333; padding:0; display: block;} 
body > header .h_r ul li p span{ font-weight: 600; font-size: 9px;}
body > header .h_r ul li .mail{ padding: 0;}
body > header .h_r ul li a img { width:100%; }
body > header .h_r ul li a img:hover{ -webkit-transform: none; -moz-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none;}
		  
body > header .h_r .modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  text-align: center;
  background: #fff;
  padding: 40px 20px;
  width:85%;
  border: 3px solid #55b530;
}
 
body > header .h_r .modal-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0,0,0,0.65);
  z-index: 1;
}
body > header .h_r .modal-cont p {
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
	margin-bottom:10px;
}
body > header .h_r .modal-cont a img {
	margin:20px 0;
}
 
body > header .h_r .modal-open,
body > header .h_r .modal-close {
  cursor: pointer;
}
body > header .h_r .btn-modal-close {
	position: absolute;
    top: 0;
    right: 10px;
    font-size: 25px;
}

		 
		  /* nav
		  ------------------------------------------------------------------- */
		  body > header nav { display: none; }
		  
		  
	/* smh_menu
		  ------------------------------------------------------------------- */
		  #smh_menu { display: none; }
		  
		  
/* ===================================================================
	/
	/	smh_menu　トグルメニュー
	/
	=================================================================== */
	#smh_menu { display: block; position: relative;	z-index: 9999; }
	.drawer-nav ul li { margin-right: 0px; float: none; }
		
	
	
			  
		  
/* ===================================================================
	/
	/	s1
	/
	=================================================================== */
	.s1 { background: url(../images/fl_main_sp.png) center top no-repeat; margin-top: 0; padding: 77px 20px 50px;}
	.s1 .containar{ text-align: center; padding: 0;}
	.s1 h1 { text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff; text-align: center; padding:0 1em;}
	.s1 ul { display:block!important; flex-flow: row wrap; justify-content: space-between ; width:100%; }
	.s1 ul li p { color: #333; letter-spacing: 0.15em; text-align: left; line-height: 2em; font-size: 0.8em; padding:2em 3em;}
	
	.album { margin: auto; position: relative;}
	.album img { width: 70%; animation-name: album; -webkit-animation-name: album; animation-duration: 10s; -webkit-animation-duration: 10s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; opacity: 0;}
	.album .img1 { display: block; margin: 0 auto;}
	.album .img2 { animation-delay:5s; -webkit-animation-delay:5s; position: absolute; top: 0; left: 17%;}







	
	
/* ===================================================================
	/
	/	s2
	/
	=================================================================== */
	.s2 { padding: 0;}
	.banner_banner {
    padding: 25px 1em ;
    text-align: center;
	}
	.s2 .containar{ background: url(../images/fl_cnt01_sp.png) left 1% no-repeat; background-size: contain; padding: 4em 1em 2em;}
	.s2 .s2cnt{ width: 90%; margin: 0 auto; padding: 0 0 32px;} 
	.s2 h1 { margin-bottom:0; }
	.s2 h2 { font-size: 0.6em; font-weight:800; letter-spacing: 0.05em; padding:3% 0 10%; line-height: 1.5em; color: #d05257;}
	.s2 h2.no2{ padding: 1em 0;}
	.s2 h3 { margin:30px 0 0; font-size: 1.2em; color: #D05257; font-weight:900; letter-spacing: 0.1em;}
	.s2 p { margin-bottom:0; letter-spacing: 0.15em; line-height: 1.5em; color: #333; font-size: 0.9em;}
	.s2 ul li .bk{ background: rgba(255,255,255,255.0.5);}
	.s2 .flexbox{ display: block; flex-flow: row wrap; justify-content: space-between; width:100%; }
	.s2 .flexbox dl { width:100%; margin: 20px 0; border: 1px solid #ccc; text-align: center;}
	.s2 .flexbox dl dt{     text-align: center; padding: 0 5% 0; font-size: 0.9em;}
	.s2 .flexbox dl dd{ padding: 1em 1em; font-size: 0.9em;}
	.s2 .flexbox dl dd.dllast{ padding-bottom:30px;}
	
/* ===================================================================
	/
	/	s3
	/
	=================================================================== */
	.s3 { background:url(../images/f_slice_r36_c1.png) top center no-repeat; text-align: center;}
	.s3 h1 { padding: 40px 0;}
	.s3 .flexbox{ display: flex; flex-flow: row wrap; justify-content: space-between; width:100%; }
	.s3 .flexbox dl{ width: 50%; color: #fff; margin-bottom: 0; height: 170px;}
	.s3 .flexbox dl dt{ font-size: 0.9em; font-weight: 600; text-align: center; padding: 15px 0;}
	.s3 .flexbox dl dd{ font-size: 0.8em; font-weight: 600; text-align: left; padding-bottom: 0; margin: 0 2em;}
	.s3 .flexbox dl.sh ul{ display: block; flex-flow: row wrap; }
	.s3 .flexbox dl.sh ul .box{ width: 90px;}
	.s3 .flexbox dl.sh{ background: #7BB3B3;} 
	.s3 .flexbox dl.jh{ background: #839DAE;}
	.s3 .flexbox dl.rh{ background: #DE9B84;}
	.s3 .flexbox dl.ih{ background: #CEA7B3;}
	.s3 .flexbox dl.suh{ background: #AAB052;}
	.s3 .flexbox dl.lh{ background: #A59B7C;}
	.s3 .soudann{ background: url(../images/soudannback.png) left 50% repeat-y; display: block; flex-flow: row wrap; justify-content: space-between; width: 100%; margin: 0 auto; padding: 0 2em 1em;}
	.s3 .soudann h3{ padding: 2em 0 1em;}
	.s3 .soudann p{ text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff; color: #333; letter-spacing: 0.15em; line-height: 1.0em; padding-left: 0; text-align: left; font-size:0.9em; font-weight: 600;}
	.s3 .soudann .soudannImg01{ padding: 10% 0 5% 0;}
	.s3 .soudann .soudannImg02{ padding: 0 0 10px 0;}
	
/* ===================================================================
	/
	/	s4
	/
	=================================================================== */	
	.s4 { padding: 0;}
	.s4 .containar{ display: block; flex-flow: row wrap; justify-content: space-between; padding: 2em 2em;}
	.s4 .banner{ width:100%; display: block; flex-flow: row wrap; justify-content: space-between; padding-top: 2em;}
	.s4 .banner img{ padding-bottom: 20px;}
	.s4 .banner a.s4img{ width:50%;}
	
/*==================What'snew==========================================================*/
	.s4 .news { width:100%;}
	.s4 .news .newsh2{ display: block; flex-flow: row wrap; border-bottom: 2px solid #666; padding-bottom: 10px; margin-bottom:35px;}
	.s4 .news .newsh2 h2{ width: 35%;}
	.s4 .news .newsh2 p{ width: 100%; color: #666; font-size: 0.7em; padding: 10px 0 0; letter-spacing: 0.15em;}
	.s4 .news ul li { background: url(../images/fp_slice_r4_c2.png) center left no-repeat; border-bottom: 1px dashed #666; padding: 15px 0;}
	.s4 .news ul li dl dd { padding-left: 70px;} 
			

/* ===================================================================
	/
	/	footer
	/
	=================================================================== */
	body > footer { background: #F3F3F3; padding: 0 2em; margin-bottom: 70px;}
	body > footer > .containar { margin-bottom:0; display: flex; flex-flow: row wrap; justify-content: space-between; padding-top:30px;}
	body > footer  ul { width: 100%; display: none; flex-flow: row wrap; }
	body > footer  ul li{ padding: 20px 35px 0 0; color: #666; font-size: 0.8em; letter-spacing: 0.15em;}
	body > footer h1{ text-align:center; padding-top: 30px;}
	body > footer .btm{ text-align: center; padding: 20px 0; font-size: 0.6em;}
	body > footer a{ color: #666;}
	body > footer a:hover { border-bottom: 1px solid #47676F; color: #47676F;}