@charset "UTF-8";

/* root
================================*/
:root{
  /* color */
  --c_sec-bg: #ffffffb3;
  --c_h01: #fff000;
  --c_white: #fff;
  --c_orange: #ed6c00;

  /* font */
  --f_main: 1rem;
  --f_h01: calc(var(--f_main) * 1.3);
}
/* 共通
================================*/
* {
	box-sizing: border-box;
}
body {
	line-height: 1.8;
	font-size: var(--f_main);
	color: #333;
	font-family: 
		"Helvetica Neue",
		"Arial",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Meiryo",
		sans-serif;
	font-weight: bold;
	margin: 0;
}
a {
	text-decoration: none;
	color: inherit;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
ul {
	list-style: none;
}
.txt_c {
	text-align: center;
}
.flex_box {
	display: flex;
	justify-content: space-between;
}
section {
	margin: 3.5em 2em;
}
.sp {
	display: none;
}

/* 装飾/ライン */
.line01 {
	position: relative;
	font-size: 26px;
	text-align: center;
	border-bottom: 5px solid #dddddd;
}
.line01::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 5px;
	background-color: #539a35;
}
/* =======共通======= */


/* =======HEADER======= */
header {
  max-width: 1440px;
  margin: 0 auto 1em;
}
header img{
	width: 70%;
	display: block;
	margin: 1rem auto 2rem;
}

/* =======HEADER======= */


/* =======MAIN======= */
.wrapper1 {
	background: url(../img/bg_01.jpg);
	background-repeat: no-repeat;
	background-size: 105%;
	background-position: top;
	width: 100%;
	background-color: #f6faed;
}
.inner{
	width: 85%;
	max-width: 1440px;
	margin: 0 auto;
}
.bk_white {
	background: var(--c_sec-bg);
	margin: 0 auto;
	padding: 1em 1.5em;
	border-radius: 15px;
}
.bk_flex_box section {
	margin: 0 0 4em;
}
.box-shadow section{
	box-shadow: 8px 8px 13px -12px;
	margin-bottom: 3em;
}
.image01 {
	width: 100%;
}
.outline {
	display: inline-block;
	letter-spacing: 2px;
	margin: 0 0 .5rem;
	font-size: 1.7rem;
	line-height: 1.3;
}
.txt_orange {
	color: var(--c_orange);
	font-size: 3rem;
}

/* 見出し */
.heading01  {
	position: relative;
	font-size: var(--f_h01);
	padding: 0.3em ;
	background: var(--c_h01);
	width: 64%;
	margin: 1.5rem auto 0;
	border-radius: 20px;
	margin-bottom: 16px;
	color: #333;
}
.heading01:before {
	position: absolute;
	top: -5px;
	left: -5px;
	width: 100%;
	height: 100%;
	content: '';
	border: 2px solid #707070;
	border-radius: 20px;
	box-shadow: 6px 6px 9px -9px #333;
}
/* .heading02 {
	display: inline;
	font-size: 26px;
	background-image: linear-gradient(#00000000 70%, #fcdd51 70%);
} */

/* ボタン */
.btn_set{
  vertical-align:middle; 
  text-align: center;
}
.btn_06 {
	display: inline-block;
  width: 300px;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  color: var(--c_white);
  background-color: #ea6da4;
  box-shadow: 0px 5px 0px #a02258;
	border: solid .8px #a02258;
  transition: .07s;
  border-radius: 100vh;
  &:hover {
    box-shadow: unset;
    transform: translateY(4px);
  }
  & .text{
    width: 100%;
    display: block;
    position: relative;
  }
  & .text::after {
    content: url(../img/arrow_right.png);
    color: var(--c_white);
    position: absolute;
    right: 1em;
    top: 52%;
    transform: translate(-50%, -50%);
  }
}


/* 場所・日時 */
section.box_left {
	width: 49%;
}
.box_left .read{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 地図 */
.place {
	width: 49%;
}
.place .image01{
	width: 85%;
	margin: 0 auto;
}


/* イベント内容 */
/* イベント情報table*/
table {
	border-collapse: collapse;
	margin: 0 auto;
}
tr {
	display: grid;
	margin-bottom: 4%;
}
th {
	background-color: #539a35;  
	color:  #fff;               
	font-size: calc(var(--f_main) * 1.5);
	font-weight:  normal;       
	position:  relative;        
	z-index: 10;                
	border-radius: 5px;
  padding: 10px 10px;
}
td {
	background-color:  #f3ffee; 
	text-align: center;
	border-radius: 5px;
	background-size: 40px 40px;
	background: repeating-linear-gradient( 45deg, #fff, #fff 2px, #f3ffee 10px, #f3ffee 50px ); 
	padding: 16px 15px 24px
}
.t_line{
	display: block;
	width: 94%;
	margin: 0 auto;
}
.read_img{
  display: block;
  width: 48%;
  margin: 1.5rem auto ;
}
.read_text{
  line-height: 1.3;
}


/* イベント　内容 */
.about_contents{
  margin-top: 4rem;
  & h3{
    width: 80%;
    margin: 0 auto;
  }
}
.contents_flex{
	display: flex; 
	flex-wrap:wrap; 
	justify-content:center;
	align-items: center;
  margin: 1rem 0 2.5rem;
}
.picturelayout{
	width: 47%;
	max-width: 380px;
	min-width: 330px;
	padding: 14px 8px;
	background-color: #ffffffbf;
	border-radius: 20px;
	margin:8px;
	text-align: center;
	box-shadow: 6px 6px 13px -11px #333;
	font-size: calc(var(--f_main) * 1.15);
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1/1.1;
  line-height: 1.2;
  & .read{
    margin-bottom: 1rem;
    height: 4rem;
    display: grid;
    align-content: center;
  }
  & .read.txt_orange{
    font-size: calc(var(--f_main) * 1.15);
    margin-bottom: 0;
  }
  & .organize{
    color: #333;
    font-size: calc(var(--f_main) * .9);
    margin-bottom: 1rem;
  }
  & img{
    width: 80%;
    margin: 0 auto;
    border-radius: 1rem;
    box-shadow: 2px 2px 6px -3px #333;
  }
}

.lo_green{
	color: #6fba2c;
	border: double 8px #6fba2c;
}
.lo_yellow{
	color: #ffed61;
	border: double 8px #ffed61;
}


/* 過去の様子 */
.imghead{
	display: flex;
	justify-content: space-evenly;
  gap: 1rem;
}
.imghead img{
	border-radius: 10px;
}

/* 申込み・規約 */
span.heading02 {
	font-size: 20px;
	letter-spacing: 0.7px;
}
.nkngo_btn{
	padding-top: 0;
}
.kiyaku{
	text-align: left;
  & p{
    font-size: 1.2rem;
    padding-left: 1rem;
  }
  & ul{
    list-style: circle; 
    margin-bottom: 1rem;
    padding-left: 2rem;
  } 
}
/* イベント情報のCSS　ここまで*/

/* ============================
* FOOTER
* ========================= */
footer {
	color: var(--c_white);
	font-weight: lighter;
	/* padding: 0.5em 0; */
	letter-spacing: 0.6px;
}
footer p {
	margin: 0;
	padding: 0.5em 0;
	font-size: 14px;
	background: #539a35;
}
.inf_syusai {
	display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 80%;
}
.inf_syusai dt {
	white-space: nowrap;
}
.inf_syusai dd {
	margin-left: 0;
	text-align: left;
}
.syusai_bg {
	background: #70af58;
}


/* スマホ版 CSS */
@media screen and (max-width: 820px){
	/* 共通 */
	body {
		font-size: 14px;
	}
	.inner{
		width: 95%;
	}
	table td {
		text-align: center;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.sp_box {
		display: block;
		width: 100%;
	}
	.outline,
	.heading01{
		font-size: 18px;
	}
	.heading02 {
		font-size: 18px;
	}
	.txt_orange {
		font-size: 17px;
	}

	header img{
		width: 90%;
	}

	/* イベント内容 */
	.box_left {
		margin-right: 0;
	}
	.bk_flex_box section {
    margin: 0 auto 2em;
	}
	section.box_left{
		width: 98%;
	}
	.bk_white {
		width: 98%;
		padding: 1em 1em;
	}
	.image01 {
		/* width: 330px; */
		width: 100%;
	}
	.btn_06 {
		width: 65%;
		min-width: 200px;
		line-height: 50px;
	}
	dl.inf_syusai {
		padding: 0.5em;
	}
	table tr {
    display: grid;
	}
	td {
		padding: 1.5em .5em;
	}
	th::after {
		position: initial;
	}
	.inf_syusai {
		font-size: 15px;
		width: 95%;
	}
	li{
		font-size: clamp(0.813rem, 0.573rem + 1.2vw, 1.188rem);
	}
	li.caption{
		font-size: 14px;
	}

  .read_img{
    width: 72%;
  }
  .about_contents h3{
    width: 95%;
  }
	.picturelayout{
		width: 100%;
		min-width: 0;
		margin: 8px 0;
		padding: 16px 8px;
    font-size: calc(var(--f_main) * 1);
		aspect-ratio: 1/1.1;
    justify-content: flex-start;
    & .read{
      height: auto;
    }
	}

	/* 過去の様子 */
	.imghead{
		display: block;
		padding: 1.5em 2em;
	}
	.heading03 img{
		margin-bottom: .8rem;
		max-width: 480px;
	}
	.contents_flex{
		flex-wrap:wrap; 
	}

	/* 申込み・規約 */
	.kiyaku{
    & p{
      padding-left: 0;
    }
		& ul{
      padding-left: 1.5rem;
    }
	}
}