@charset "UTF-8";
@import url("reset.css");

/*--------------------------------------------------
  font
--------------------------------------------------*/
/* NotoSansJP nomal */
@font-face {
	font-family: 'NotoSans';
	src: url('../share/font/NotoSansJP/NotoSansJP-Regular.woff') format('woff'),
	     url('../share/font/NotoSansJP/NotoSansJP-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
/* NotoSansJP bold */
@font-face {
	font-family: 'NotoSans';
	src: url('../share/font/NotoSansJP/NotoSansJP-Bold.woff') format('woff'),
	     url('../share/font/NotoSansJP/NotoSansJP-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}

/*--------------------------------------------------
  common
--------------------------------------------------*/
body {
	
}
@media screen and (max-width: 479px){
	body {
		min-width: initial;
	}
}

a:link    { color: #363636; }
/*a:visited { color: #363636; }*/
a:hover   { color: #666; }
a:active  { color: #f00; }

a {
    -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
         -o-transition: 0.2s linear;
            transition: 0.2s linear;
}
a:hover {
	filter: alpha(opacity=50);
	-moz-opacity: 0.50;
	opacity: 0.50;
}

#ef-cafe-wrapper {
	color: #000;
	background: #ffffd7;
	font-family: "NotoSans", 'Hiragino Sans', 'ヒラギノ角ゴ Pro', 'HiraKakuPro', Osaka, Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', san-serif;
	width: 100%;
	overflow: hidden;
}

	
.ef-cafe-mv img{
	display: block;	
	width: 900px;
	max-width: 100%;
	margin: 0 auto;
}


@media (min-width:480px) {
	#ef-cafe-wrapper {
		font-size: 24px;		
	}
	#ef-cafe-wrapper br.sp {
		font-size: 13px;
		display: none;
	}
}
@media (max-width:768px) {
	html body {
		font-size: 13px;
	}
	#ef-cafe-wrapper br.pc {
		display: none;
	}

}

.in-br{
	display: inline-block;
	line-height: 1.5;
}

#ef-smile_gift-work {
	position: relative;
}

.ef-smile_gift-work_ttl{
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}


.ef-smile_gift_ac-state{
    background-color: #fff;
	margin: 15px calc(50% - 50vw);
    padding: 100px 0px 100px calc(50vw - 50%);
}


@media (max-width:768px) {
	.ef-smile_gift_ac-state {
		margin: 0px calc(50% - 50vw);
        padding: 30px calc(50vw - 50%);
        margin-bottom: 40px;
}
	
	.ef-smile_gift-work_ttl {
    left: 25%;
    transform: translate(-17%, -17%);
    position: absolute;
	}
	
}


/*--------------------------------------------------
  こども食堂スタッフの一日
--------------------------------------------------*/

#ec-wrapper_one-day {
	color: #000;
	font-family: "NotoSans", 'Hiragino Sans', 'ヒラギノ角ゴ Pro', 'HiraKakuPro', Osaka, Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', san-serif;
	width: 100%;
	overflow: hidden;
	background-color: #fff;
}

#ef-cafe-one-day #container{
margin: 0 calc(50% - 50vw);
    padding: 50px calc(50vw - 50%);
	position: relative;
    background-color: #e0e6c4;
	z-index:1;
}

.ef-smile_gift_mv {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 0;
}

.ef-smile_gift_bgimg__r
 {
    position: absolute;
    width: 300px;
    height: auto;
    top: 0;
    right: 0;
    z-index: -1;
}

.ef-smile_gift_bgimg__l
 {
position: absolute;
    width: 300px;
    height: auto;
    bottom: 0;
    left: 0;
    z-index: -1;
}

@media (min-width:480px) {
			
	#ec-wrapper_one-day {
		font-size: 24px;		
	}
	#ef-cafe-one-day {
		font-size: 24px;		
	}
	#ec-wrapper_one-day br.sp {
		font-size: 13px;
		display: none;
	}
}

@media (max-width:768px) {
	
	#ec-wrapper_one-day br.pc {
		display: none;
	}
	
.ef-smile_gift_mv {
    width: 100%;
    margin: 0px auto;
    margin-bottom: 0;
}

.ef-smile_gift_bgimg__r
 {
        width: clamp(140px, 30vw, 300px);
        height: auto;
}

.ef-smile_gift_bgimg__l
 {
        width: clamp(140px, 30vw, 300px);
        height: auto;
}
	
}


/*--------------------------------------------------
  main
--------------------------------------------------*/
.main-layout {
  position: relative;
  display: flex;
  flex-wrap: nowrap; 
  max-width: 1000px;
  margin: auto;
  gap: 1rem;
}

.main-layout2 {
  position: relative;
  display: flex;
  flex-direction: column; 
  flex-wrap: nowrap; 
  max-width: 1000px;
  margin: auto;
  gap: 1rem;
}

.main-image {
  flex: 0 0 33%;
  overflow: hidden;
  margin-bottom: 1rem;
}

.main-image2 {
  flex: 0 0 33%;
  order: 2; 
  overflow: hidden;
  margin-bottom: 1rem;
}

.main-image img {
    width: 94%;
    object-fit: cover;
    padding: 0px 0px 30px 30px;
}

.main-image2 img {
    width: 94%;
    object-fit: cover;
    padding: 0px 0px 30px 30px;
}

.main-content {
  flex: 0 0 67%;
}

.main-content2 {
  flex: 0 0 67%;
  order: 1; 
}

.section-title {
  font-size: 3.5rem;
  font-weight: bold;
  color: #39a94a;
  line-height: 1.4;
  position: relative;
  padding-bottom: 0.5em;
  margin-bottom: 1rem;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: #9dc93a; 
}

.text1 {
    font-size: 1.8rem;
    color: #603813;
    line-height: 3.2rem;
    margin: 20px auto;
    width: 90%;
}

.group2 {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.image2 {
  display: block;
  margin: 0 auto;
  width: 76%;
  height: auto;
  object-fit: cover;
}

.text2 {
    width: 66%;
    font-size: 1.8rem;
    color: #603813;
    line-height: 3.2rem;
}


.line-wrapper {
  position: relative;
  max-width: 1000px;
  margin: 1.5em auto;
  height: 40px; 
}

.line {
  height: 2px;
  background-color: #39a94a;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.line-pic {
    position: absolute;
    bottom: 25px;
    right: 30px;
    transform: translateY(50%);
    pointer-events: none;
    max-width: 40px;
}
.line-pic2 {
    position: absolute;
    bottom: 25px;
    right: 30px;
    transform: translateY(50%);
    pointer-events: none;
    max-width: 120px;
}

.line-pic3 {
    position: absolute;
    bottom: 25px;
    right: 160px;
    transform: translateY(50%);
    pointer-events: none;
    max-width: 120px;
}

.img-pc,
.img-sp {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.overlay-image {
    position: absolute;
    bottom: 15px;
    left: -105px;
    height: auto;
    pointer-events: none;
    max-width: 95px;
    z-index: 2;
}

.overlay-image2 {
    position: absolute;
    bottom: -130px;
    right: -120px;
    height: auto;
    pointer-events: none;
    max-width: 120px;
    z-index: 2;
}

.overlay-image3 {
    position: absolute;
    top: 160px;
    left: -180px;
    height: auto;
    pointer-events: none;
    max-width: 130px;
    z-index: 2;
}

.overlay-image4 {
    position: absolute;
    bottom: 280px;
    right: -170px;
    height: auto;
    pointer-events: none;
    max-width: 115px;
    z-index: 2;
}

@media (min-width: 769px) {
  .img-pc {
    display: block;
  }
	.img-sp {
    display: none;
  }
}

@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
  }
  .group2 {
    flex-direction: row;
  }

  .main-image,
  .main-content {
    width: 100%;
  }
  .main-image2,
  .main-content2 {
    order: initial;
    width: 100%;
  }
	
.main-image img {
    width: 100%;
    object-fit: cover;
    padding: 10px;
}
	
.main-image2 img {
    width: 100%;
    object-fit: cover;
    padding: 10px;
}
	
.section-title {
    font-size: 2.4rem;
    text-align: center;
}
.section-title::after {
    width: 90%;      
    left: 50%;      
    transform: translateX(-50%); 
  }
.text1 {
    font-size: 1.6rem;
    line-height: 3rem;
}
.group2 {
    width: 90%;
    margin: auto;
	gap: 0rem;
}
.image2 {
    width: 75%;
}
.text2 {
    width: 78%;
    font-size: 1.4rem;
    line-height: 2.4rem;
}
 .img-pc {
    display: none;
  }
  .img-sp {
    display: block;
  }	
.line-pic {
    bottom: 20px;
    right: 23px;
    max-width: 32px;
}
.line-pic2 {
    bottom: 25px;
    right: 0px;
}
.line-pic3 {
    bottom: 20px;
    right: 25px;
    max-width: 100px;
}
.overlay-image {
	display: none;
}
.overlay-image2 {
	display: none;
}	
.overlay-image3 {
	display: none;
}
.overlay-image4 {
	display: none;
}	
	
}