@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------

	HOME							[ / ]
	イベント						[ /event/ ]
	お知らせ						[ /news/ ]
	ひつじサミット尾州について		[ /about/ ]
	これまでの歩み					[ /history/ ]
	よくある質問					[ /qa/ ]
	お問い合わせ					[ /contact/ ]

------------------------------------------------------------------------ */

/* ========================================================================
	HOME							[ / ]
======================================================================== */
@media screen and (max-width:767px){
#home{
	margin:50px 0 0 0;
}
}


/* ----------------------------------------
	hero
---------------------------------------- */
#home .hero{
	position:relative;
	margin:0 40px 40px;
	padding:0 60px;
}

#home .hero::before{
	content:"";
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
	width:12px;
	height:250px;
	background:url(../../img/home/bg_hero.png) no-repeat center;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#home .hero{
	margin:0 20px 40px;
}
}

@media screen and (max-width:767px){
#home .hero{
	margin:0 0 65px 0;
	padding:0;
}

#home .hero::before{
	content:none;
}
}


/* splide
---------------------------------------- */
#home .hero .splide__pagination{
	display:block;
	bottom:auto;
	top:50%;
	left:-60px;
	transform:translateY(-50%);
	padding:0;
}

#home .hero .splide__pagination li{
	display:block;
	padding:5px 0;
}

#home .hero .splide__pagination__page{
	display:block;
	position:relative;
	width:10px;
	height:10px;
	margin:0;
	padding:0;
	background:#f1f5f5;
	border-radius:50%;
	transition-property:all;
	transition-duration:0.2s;
	opacity:1;
}

#home .hero .splide__pagination__page.is-active,
#home .hero .splide__pagination__page:hover{
	background:#0e8187;
	transform:none;
}

@media screen and (max-width:767px){
#home .hero .splide__pagination{
	display:flex;
	justify-content:flex-start;
	top:auto;
	bottom:-25px;
	left:20px;
	transform:none;
}

#home .hero .splide__pagination li{
	padding:0 5px;
}
}


/* ----------------------------------------
	info
---------------------------------------- */
#home .info{
	margin:0 0 100px 0;
}

#home .info h2{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:11px;
	left:11px;
	width:160px;
	height:78px;
	background:#288087;
	border:1px solid #324b4d;
	border-radius:40px;
	font-size:2.4rem;
	color:#ffffff;
	letter-spacing:0.2em;
	z-index:1;
}

#home .info p{
	margin:0;
}

#home .info p a{
	display:flex;
	align-items:center;
	position:relative;
	height:100px;
	padding:0 80px 0 170px;
	background:#e7f4f1;
	border:1px solid #324b4d;
	border-radius:50px;
	font-weight:500;
	line-height:2.6rem;
	text-decoration:none;
}
#home .info p a:hover span{ text-decoration:underline; }

#home .info p a::before{
	content:"";
	position:absolute;
	top:0;
	right:42px;
	width:18px;
	height:100%;
	background:url(../../img/common/icon_hitsuji.png) no-repeat center;
	background-size:18px 15px;
}

#home .info p time{
	padding:0 40px 0 60px;
	color:#0e8187;
}

@media screen and (max-width:767px){
#home .info{
	margin:0 0 60px 0;
}

#home .info h2{
	top:-20px;
	left:auto;
	right:20px;
	width:100px;
	height:40px;
	font-size:1.8rem;
}

#home .info p{
	margin:0;
}

#home .info p a{
	display:block;
	height:auto;
	padding:20px;
	border-radius:20px;
	line-height:2.6rem;
}
#home .info p a:hover span{ text-decoration:none; }
#home .info p a::before{ content:none; }

#home .info p time{
	display:block;
	padding:0;
}
}


/* ----------------------------------------
	movie
---------------------------------------- */
#home .movie{
	margin:0 0 80px 0;
}

#home .movie h2{
	margin-bottom:40px;
}

#home .movie .youtube{
	text-align:center;
}

@media screen and (max-width:767px){
#home .movie{
	margin:0 0 60px 0;
}

#home .movie iframe{
	aspect-ratio:1000/560;
	width:100%;
	height:100%;
}
}


/* ----------------------------------------
	bnr
---------------------------------------- */
#home .bnr ul{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
	margin:0 0 80px 0;
}

@media screen and (max-width:767px){
#home .bnr ul{
	grid-template-columns:repeat(2,1fr);
	place-items:center;
	gap:10px;
	margin:0 0 60px 0;
}
}


/* ----------------------------------------
	what
---------------------------------------- */
#home .what{
	margin:0 40px;
	padding:130px 0 60px 0;
	background:url(../../img/home/bg_what.jpg) no-repeat center;
	background-size:cover;
	border-radius:20px;
	text-align:center;
}

#home .what h2{
	margin:0 0 80px 0;
}

#home .what p{
	font-weight:500;
	color:#ffffff;
}

#home .what p.lead{
	margin:0 0 50px 0;
	font-size:3.2rem;
	font-weight:900;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#home .what{
	margin:0;
}
}

@media screen and (max-width:767px){
#home .what{
	margin:0 20px;
	padding:60px 0 10px 0;
}

#home .what h2{
	margin:0 0 40px 0;
}

#home .what p{
	margin:0 0 40px 0;
	text-align:left;
}

#home .what p.lead{
	margin:0 0 30px 0;
	text-align:center;
	font-size:max(4.2666vw, 2.0rem);
}
}


/* widget_btn
---------------------------------------- */
#home .what .widget_btn a{
	background:none;
	border-color:#ffffff;
	color:#ffffff;
}
#home .what .widget_btn a:hover{
	background:#ffffff;
	color:#324b4d;
}
#home .what .widget_btn a::before{ background-image:url(../../img/common/arrow_02.png); }
#home .what .widget_btn a:hover::before{ background-image:url(../../img/common/arrow_01.png); }


/* ----------------------------------------
	event
---------------------------------------- */
#home .event{
	padding:120px 0 60px 0;
}

@media screen and (max-width:767px){
#home .event{
	padding:60px 0 20px 0;
}
}


/* ----------------------------------------
	official
---------------------------------------- */
#home .official{
	margin:0 40px 40px;
	padding:120px 0 60px 0;
	background:url(../../img/home/bg_official.png) no-repeat center bottom #e7f4f1;
	border-radius:20px;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#home .official{
	margin:0 0 40px 0;
}
}

@media screen and (max-width:767px){
#home .official{
	margin:0 20px 40px;
	padding:60px 0 20px 0;
	background-size:925px 355px;
}
}


/* ----------------------------------------
	news
---------------------------------------- */
#home .news{
	overflow:hidden;
	position:relative;
	margin:0 40px;
	padding:120px 0 60px 0;
	background:#f1f5f5;
	border-radius:20px;
}

#home .news::before{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	width:892px;
	height:486px;
	margin:0 0 0 30px;
	background:url(../../img/home/bg_news-01.png) no-repeat center;
}

#home .news::after{
	content:"";
	position:absolute;
	bottom:0;
	right:50%;
	width:978px;
	height:492px;
	margin:0 -38px 0 0;
	background:url(../../img/home/bg_news-02.png) no-repeat center;
}

#home .news .inner{
	z-index:1;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#home .news{
	margin:0;
}
}

@media screen and (max-width:767px){
#home .news{
	margin:0 20px;
	padding:60px 0 20px 0;
}

#home .news::before{
	width:446px;
	height:243px;
	background-size:cover;
}

#home .news::after{
	width:489px;
	height:246px;
	background-size:cover;
}
}


/* ----------------------------------------
	support
---------------------------------------- */
#home .support{
	padding:120px 0;
}

#home .support p.note{
	margin:0 0 30px 0;
	text-align:center;
	font-size:1.6rem;
	font-weight:500;
}

#home .support ul{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:40px 45px;
}

@media screen and (max-width:767px){
#home .support{
	padding:60px 0;
}

#home .support p.note{
	margin:0 0 20px 0;
}

#home .support ul{
	grid-template-columns:repeat(2,1fr);
	gap:20px;
}
}


/* rank_01
---------------------------------------- */
#home .support .rank_01 li{
    border:1px solid #324b4d;
}


/* rank_02
---------------------------------------- */
#home .support .rank_02{
	gap:15px 45px;
	padding:75px 0 0 0;
}

#home .support .rank_02 li{
	font-size:2.0rem;
	font-weight:700;
	line-height:3.0rem;
}

@media screen and (max-width:767px){
#home .support .rank_02{
	gap:10px 20px;
	padding:35px 0 0 0;
}

#home .support .rank_02 li{
	font-size:1.6rem;
	line-height:2.6rem;
}
}


/* ========================================================================
	イベント						[ /event/ ]
======================================================================== */

/* ----------------------------------------
	list
---------------------------------------- */
#event .list{
	padding:0 0 60px 0;
}

@media screen and (max-width:767px){
#event .list{
	padding:0 0 20px 0;
}
}


/* ----------------------------------------
	official
---------------------------------------- */
#event .official{
	overflow:hidden;
	position:relative;
	margin:0 40px 40px;
	padding:100px 0 60px 0;
	background:#f1f5f5;
	border-radius:20px;
}

#event .official::before{
	content:"";
	position:absolute;
	bottom:0;
	right:50%;
	width:1242px;
	height:658px;
	margin:0 -310px 0 0;
	background:url(../../img/event/bg_official.png) no-repeat center;
}

#event .official h2{
	margin:0 0 60px 0;
	text-align:center;
	font-size:4.0rem;
	font-weight:700;
	line-height:1;
	letter-spacing:0.08em;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#event .official{
	margin:0 0 40px 0;
}
}

@media screen and (max-width:767px){
#event .official{
	margin:0 20px 40px;
	padding:60px 0 20px 0;
}

#event .official::before{
	width:621px;
	height:329px;
	margin:0 -155px 0 0;
	background-size:cover;
}

#event .official h2{
	margin:0 0 40px 0;
	font-size:2.4rem;
}
}


/* ----------------------------------------
	entry
---------------------------------------- */
#event .entry{
	margin:-60px 0 0 0;
	padding:0 0 120px 0;
}

#event .entry .key{
	margin:0 0 50px 0;
	text-align:center;
}

#event .entry h1{
	margin:0 0 40px 0;
	padding:0 0 0 90px;
	background:url(../../img/common/bg_h.png) no-repeat left 18px;
	font-size:4.8rem;
	font-weight:700;
	line-height:6.8rem;
	letter-spacing:0.08em;
}

#event .entry p.lead{
	margin:0 0 40px 0;
	font-size:3.2rem;
	font-weight:700;
	line-height:5.6rem;
}

#event .entry dl{
	display:flex;
	align-items:flex-start;
	margin:0 0 20px 0;
}
#event .entry dl:last-of-type{ margin-bottom:40px; }

#event .entry dl dt{
	display:flex;
	justify-content:center;
	align-items:center;
	min-width:100px;
	height:40px;
	padding:0 20px;
	background:#7dbec3;
	border-radius:20px;
	font-weight:700;
	color:#ffffff;
	letter-spacing:0.08em;
}

#event .entry dl dd{
	flex:1;
	padding:0 0 0 40px;
	line-height:4.0rem;
}

@media screen and (max-width: 767px){
#event .entry{
	margin:-40px 0 0 0;
	padding:0 0 20px 0;
}

#event .entry .key{
	margin:0 0 40px 0;
}

#event .entry h1{
	margin:0 0 20px 0;
	padding:0 0 0 50px;
	background:url(../../img/common/bg_h.png) no-repeat left 11px;
	background-size:40px auto;
	font-size:2.4rem;
	line-height:4.4rem;
}

#event .entry p.lead{
	font-size:2.0rem;
	line-height:2;
}

#event .entry dl{
	display:block;
}
#event .entry dl:last-of-type{ margin-bottom:20px; }

#event .entry dl dt{
	display:block;
	width:fit-content;
	height:auto;
	margin:0 0 10px 0;
	padding:2px 20px;
	text-align:center;
}

#event .entry dl dd{
	padding:0;
	line-height:2;
}
}


/* title
---------------------------------------- */
#event .entry .title{
	margin:0 0 40px 0;
	padding:0 0 0 90px;
	background:url(../../img/common/bg_h.png) no-repeat left 8px;
	font-size:3.2rem;
	font-weight:700;
	line-height:1.5;
	letter-spacing:0.08em;
}
#event .entry .toc .title,
#event .entry .company .title{
	margin-left:-60px;
}

@media screen and (max-width: 767px){
#event .entry .title{
	margin:0 0 30px 0;
	padding:0 0 0 50px;
	background:url(../../img/common/bg_h.png) no-repeat left 4px;
	background-size:40px auto;
	font-size:2.0rem;
}
#event .entry .toc .title,
#event .entry .company .title{
	margin-left:-20px;
}
}


/* cat
---------------------------------------- */
#event .entry .cat{
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	margin:0 0 60px 0;
}

#event .entry .cat li{
	padding:10px 18px;
	border:1px solid #00181a;
	border-radius:20px;
	font-weight:500;
	color:#00181a;
	line-height:1;
}

#event .entry .cat img{
	width:auto;
	height:18px;
	margin:0 10px 0 0;
}

@media screen and (max-width: 767px){
#event .entry .cat{
	gap:20px 10px;
	margin:0 0 40px 0;
}
}


/* ---------- reservation ---------- */
#event .entry .cat .reservation{
	background:#ff8945;
	color:#ffffff;
}


/* toc
---------------------------------------- */
#event .entry .toc{
	margin:0 0 60px 0;
	padding:60px 60px 30px;
	background:#e7f4f1;
	border-top-right-radius:20px;
	border-bottom-left-radius:20px;
}

#event .entry .toc ol li{
	position:relative;
	margin:0 0 30px 0;
	padding:0 0 0 50px;
	font-size:2.4rem;
	font-weight:700;
	line-height:3.4rem;
}

#event .entry .toc ol li span{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:4px;
	left:0;
	width:30px;
	height:30px;
	background:#7dbec3;
	border-radius:50%;
	font-size:2.0rem;
	color:#ffffff;
}

@media screen and (max-width: 767px){
#event .entry .toc{
	margin:0 0 40px 0;
	padding:40px 20px 20px;
}

#event .entry .toc ol li{
	margin:0 0 20px 0;
	padding:0 0 0 38px;
	font-size:1.8rem;
	line-height:2.8rem;
}

#event .entry .toc ol li span{
	top:0;
	width:28px;
	height:28px;
	font-size:1.8rem;
}
}


/* outline
---------------------------------------- */
#event .entry .outline{
	margin:0 0 120px 0;
	padding:50px 60px 20px;
	border:2px solid #7dbec3;
	border-radius:40px;
}

#event .entry .outline h3{
	margin:0 0 40px 0;
	font-size:2.4rem;
	font-weight:700;
	line-height:3.4rem;
	letter-spacing:0.08em;
}

#event .entry .outline dl dd p{
	margin:0;
}

#event .entry .outline dl dd a{
	font-weight:500;
}

@media screen and (max-width: 767px){
#event .entry .outline{
	margin:0 0 40px 0;
	padding:40px 20px 20px;
	border-radius:20px;
}

#event .entry .outline h3{
	margin:0 0 20px 0;
	font-size:2.0rem;
	line-height:3.0rem;
}
}


/* company
---------------------------------------- */
#event .entry .company{
	margin:0 0 120px 0;
	padding:60px 60px 20px;
	background:#f1f5f5;
	border-radius:40px;
}
#event .entry .company dl dd a{ text-decoration:none; }
#event .entry .company dl dd a:hover{ text-decoration:underline; }

#event .entry .company p{
	margin:0 0 40px 0;
}

@media screen and (max-width: 767px){
#event .entry .company{
	margin:0 0 40px 0;
	padding:40px 20px 20px;
	border-radius:20px;
}
#event .entry .company dl dd a:hover{ text-decoration:none; }

#event .entry .company p{
	margin:0 0 20px 0;
}
}


/* widget_end
---------------------------------------- */
#event .entry .widget_end{
	margin-bottom:40px;
}

@media screen and (max-width: 767px){
#event .entry .widget_end{
	margin-bottom:20px;
}
}


/* widget_entry
---------------------------------------- */
#event .entry .widget_title-02 + .widget_entry{
	padding:0;
}

@media screen and (max-width: 767px){
#event .entry .widget_entry{
	padding:0;
}
}


/* ========================================================================
	お知らせ						[ /news/ ]
======================================================================== */

/* ----------------------------------------
	list
---------------------------------------- */
#news .list{
	margin:0 40px 40px;
	padding:60px 0;
	background:#f1f5f5;
	border-radius:40px;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#news .list{
	margin:0 0 40px 0;
}
}

@media screen and (max-width:767px){
#news .list{
	margin:0 20px 40px;
	padding:40px 0 20px 0;
	border-radius:20px;
}
}


/* ----------------------------------------
	entry
---------------------------------------- */
#news .entry{
	padding:0 0 120px 0;
}

@media screen and (max-width:767px){
#news .entry{
	padding:0 0 20px 0;
}
}


/* widget_btn
---------------------------------------- */
#news .entry .widget_btn{
	position:relative;
	margin-top:132px;
}

#news .entry .widget_btn::before{
	content:"";
	position:absolute;
	top:-132px;
	left:50%;
	transform:translateX(-50%);
	width:194px;
	height:12px;
	background:url(../../img/news/bg_back.png) no-repeat center;
}

@media screen and (max-width:767px){
#news .entry .widget_btn{
	margin-top:72px;
}

#news .entry .widget_btn::before{
	top:-72px;
}
}


/* ========================================================================
	ひつじサミット尾州について		[ /about/ ]
======================================================================== */
#about{
	margin:-80px 0 0 0;
}

#about > div{
	position:relative;
	padding:120px 0 60px 0;
}

#about h2{
	margin:0 0 40px 0;
	font-size:3.2rem;
	font-weight:700;
	line-height:1.75;
	letter-spacing:0.08em;
}

@media screen and (max-width:767px){
#about{
	margin:-40px 0 0 0;
}

#about > div{
	padding:60px 0 20px 0;
}

#about h2{
	font-size:2.4rem;
}
}


/* ----------------------------------------
	hero
---------------------------------------- */
#about .hero{
	overflow:hidden;
	margin:0 40px 40px;
	padding:1000px 0 280px 0;
	color:#ffffff;
	clip-path:inset(0 round 20px);
}

#about .hero::before{
	content:"";
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:url(../../img/about/bg_hero.jpg) no-repeat center;
	background-size:cover;
}

#about .hero h1{
	position:fixed;
	top:50%;
	right:50%;
	transform:translateY(-50%);
	width:600px;
	font-size:4.2rem;
	font-weight:700;
	line-height:16.0rem;
}

#about .hero p{
	margin:0 0 120px 600px;
	line-height:4.0rem;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#about .hero{
	margin:0 0 40px 0;
}

#about .hero h1{
	right:auto;
	left:80px;
}
}

@media screen and (max-width:767px){
#about .hero{
	margin:0 20px 40px;
	padding:40px 0 20px 0;
}

#about .hero h1{
	position:static;
	transform:none;
	margin:0 0 40px 0;
	font-size:6.25vw;
	line-height:18.75vw;
}

#about .hero p{
	margin:0 0 30px 0;
}
}


/* ----------------------------------------
	special
---------------------------------------- */
#about .special{
	margin:0 40px 40px;
	background:#e7f4f1;
	border-radius:20px;
}

#about .special .flex{
	justify-content:space-between;
}

#about .special figure{
	margin:0 0 60px 70px;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#about .special{
	margin:0 0 40px 0;
}
}

@media screen and (max-width:767px){
#about .special{
	margin:0 20px 40px;
}

#about .special .flex{
	display:block;
}

#about .special figure{
	margin:0 0 40px 0;
	text-align:center;
}
}


/* block
---------------------------------------- */
#about .special .block{
	width:560px;
	padding:0 0 24px 0;
}

#about .special .block p{
	margin:0 0 2em 0;
}

@media screen and (max-width:767px){
#about .special .block{
	width:auto;
	padding:0 0 8px 0;
}
}


/* ----------------------------------------
	fun
---------------------------------------- */
#about .fun{
	overflow:hidden;
	position:relative;
	margin:0 0 40px 40px;
	padding:120px 40px 0 0;
	background:url(../../img/about/bg_fun.png) repeat-y left top;
	border-radius:40px;
}

#about .fun h2{
	margin-bottom:120px;
	text-align:center;
	line-height:1;
	letter-spacing:0.1em;
}

#about .fun h2 .en{
	vertical-align:text-bottom;
	font-size:6.0rem;
	color:#288087;
}

#about .fun h2 .ja{
	display:inline-block;
	padding:0 56px 0 4px;
	background:url(../../img/about/h2_fun.png) no-repeat right 6px;
	line-height:1;
}

#about .fun h3{
	margin:0 0 40px 0;
	font-size:3.2rem;
	font-weight:500;
	line-height:1;
	letter-spacing:0.08em;
}

#about .fun h3 span{
	margin:0 34px 0 0;
	vertical-align:sub;
	font-size:6.0rem;
	color:#288087;
}

#about .fun p{
	margin:0;
}

#about .fun img{
	border-radius:20px;
}

@media screen and (max-width:767px){
#about .fun{
	margin:0 20px 40px;
	padding:60px 0 0 0;
	background-size:102px auto;
	border-radius:20px;
}

#about .fun h2{
	margin-bottom:60px;
}

#about .fun h2 .en{
	font-size:4.0rem;
}

#about .fun h2 .ja{
	padding:0 50px 0 4px;
	background-position:right bottom;
	background-size:40px auto;
}

#about .fun h3{
	margin:0 0 20px 0;
	font-size:2.4rem;
}

#about .fun h3 span{
	margin:0 10px 0 0;
	vertical-align:sub;
	font-size:4.0rem;
}

#about .fun p{
	margin:0 0 40px 0;
}
}


/* list
---------------------------------------- */
#about .fun .list > li{
	position:relative;
	margin:0 0 160px 0;
}
#about .fun .list > li:last-child{ margin-bottom:120px; }

#about .fun .list ul li{
	margin:0 0 60px 0;
}

@media screen and (max-width:767px){
#about .fun .list > li,
#about .fun .list > li:last-child{
	margin:0;
	padding:0 0 20px 0;
}

#about .fun .list ul li{
	margin:0;
}

#about .fun .list li > img{
	display:block;
	margin:0 auto 20px;
}
}


/* ---------- nth-child(1) ---------- */
#about .fun .list > li:nth-child(1){
	min-height:474px;
	padding:0 640px 0 0;
}

#about .fun .list > li:nth-child(1)::before{
	content:"";
	position:absolute;
	bottom:-98px;
	right:-264px;
	width:490px;
	height:260px;
	background:url(../../img/about/fun_01-02.png) no-repeat center;
}

#about .fun .list > li:nth-child(1) > img{
	position:absolute;
	top:0;
	left:50%;
}

@media screen and (max-width:767px){
#about .fun .list > li:nth-child(1){
	min-height:auto;
	padding:0 0 20px 0;
}

#about .fun .list > li:nth-child(1)::before{
	content:none;
}

#about .fun .list > li:nth-child(1) > img{
	position:static;
}
}


/* ---------- nth-child(2) ---------- */
#about .fun .list > li:nth-child(2){
	padding:0 0 0 200px;
}

#about .fun .list > li:nth-child(2)::before{
	content:"";
	position:absolute;
	top:130px;
	right:-134px;
	width:370px;
	height:360px;
	background:url(../../img/about/fun_02-02.png) no-repeat center;
}

#about .fun .list > li:nth-child(2) h3{
	position:absolute;
	top:20px;
	left:0;
	writing-mode:vertical-rl;
	text-orientation:upright;
}

#about .fun .list > li:nth-child(2) h3 span{
	margin:0 0 24px 0;
	vertical-align:middle;
}

#about .fun .list > li:nth-child(2) > img{
	position:relative;
	margin:0 0 60px 0;
}

#about .fun .list > li:nth-child(2) p{
	padding:0 0 0 400px;
}

@media screen and (max-width:767px){
#about .fun .list > li:nth-child(2){
	padding:0 0 20px 0;
}

#about .fun .list > li:nth-child(2)::before{
	content:none;
}

#about .fun .list > li:nth-child(2) h3{
	position:static;
	writing-mode:horizontal-tb;
}

#about .fun .list > li:nth-child(2) h3 span{
	margin:0 10px 0 0;
	vertical-align:sub;
}

#about .fun .list > li:nth-child(2) > img{
	margin:0 0 20px 0;
}

#about .fun .list > li:nth-child(2) p{
	padding:0;
}
}


/* ---------- nth-child(3) ---------- */
#about .fun .list > li:nth-child(3){
	min-height:550px;
	padding:0 720px 0 0;
}

#about .fun .list > li:nth-child(3)::before{
	content:"";
	position:absolute;
	bottom:70px;
	left:334px;
	width:102px;
	height:50px;
	background:url(../../img/about/fun_03-02.png) no-repeat center;
}

#about .fun .list > li:nth-child(3) > img{
	position:absolute;
	bottom:0;
	right:0;
}

@media screen and (max-width:767px){
#about .fun .list > li:nth-child(3){
	min-height:auto;
	padding:0 0 20px 0;
}

#about .fun .list > li:nth-child(3)::before{
	bottom:30px;
	left:auto;
	right:-20px;
}

#about .fun .list > li:nth-child(3) > img{
	position:static;
}
}


/* ---------- nth-child(4) ---------- */
#about .fun .list > li:nth-child(4){
	min-height:700px;
}

#about .fun .list > li:nth-child(4) > img{
	position:absolute;
	bottom:0;
	right:0;
}

#about .fun .list > li:nth-child(4) .key{
	margin:0 0 40px 0;
}

#about .fun .list > li:nth-child(4) h3{
	padding:40px 0 0 0;
}

#about .fun .list > li:nth-child(4) p{
	padding:0 440px 0 0;
}

@media screen and (max-width:767px){
#about .fun .list > li:nth-child(4){
	min-height:auto;
}

#about .fun .list > li:nth-child(4) > img{
	position:static;
}

#about .fun .list > li:nth-child(4) .key{
	margin:0 0 20px 0;
}

#about .fun .list > li:nth-child(4) h3,
#about .fun .list > li:nth-child(4) p{
	padding:0;
}
}


/* ---------- nth-child(5) ---------- */
#about .fun .list > li:nth-child(5){
	min-height:724px;
	padding:0 0 0 170px;
}

#about .fun .list > li:nth-child(5)::before{
	content:"";
	position:absolute;
	top:198px;
	right:354px;
	width:340px;
	height:340px;
	background:url(../../img/about/fun_05-04.png) no-repeat center;
}

#about .fun .list > li:nth-child(5) h3{
	position:absolute;
	top:0;
	left:0;
	writing-mode:vertical-rl;
	text-orientation:upright;
}

#about .fun .list > li:nth-child(5) h3 span{
	margin:0 0 24px 0;
	vertical-align:middle;
}

#about .fun .list > li:nth-child(5) ul{
	position:relative;
}

#about .fun .list > li:nth-child(5) li:nth-child(2){
	position:absolute;
	top:104px;
	right:0;
}

#about .fun .list > li:nth-child(5) li:nth-child(3){
	padding:14px 0 0 90px;
}

#about .fun .list > li:nth-child(5) p{
	position:absolute;
	bottom:10px;
	right:0;
}

@media screen and (max-width:767px){
#about .fun .list > li:nth-child(5){
	min-height:auto;
	padding:0 0 20px 0;
}

#about .fun .list > li:nth-child(5)::before{
	content:none;
}

#about .fun .list > li:nth-child(5) h3{
	position:static;
	writing-mode:horizontal-tb;
}

#about .fun .list > li:nth-child(5) h3 span{
	margin:0 10px 0 0;
	vertical-align:sub;
}

#about .fun .list > li:nth-child(5) ul{
	display:flex;
	flex-wrap:wrap;
	margin:0 -10px;
}

#about .fun .list > li:nth-child(5) li,
#about .fun .list > li:nth-child(5) li:nth-child(2),
#about .fun .list > li:nth-child(5) li:nth-child(3){
	position:static;
	width:100%;
	margin:0;
	padding:0 10px 20px;
}
#about .fun .list > li:nth-child(5) li:nth-child(2),
#about .fun .list > li:nth-child(5) li:nth-child(3){ width:50%; }

#about .fun .list > li:nth-child(5) img{
	margin-bottom:0;
}
#about .fun .list > li:nth-child(5) li:nth-child(2) img,
#about .fun .list > li:nth-child(5) li:nth-child(3) img{
	aspect-ratio:420/310;
	width:100%;
	height:100%;
	object-fit:cover;
}

#about .fun .list > li:nth-child(5) p{
	position:static;
}
}


/* ---------- nth-child(6) ---------- */
#about .fun .list > li:nth-child(6) li:nth-child(2){
	position:absolute;
	top:234px;
	right:0;
}

@media screen and (max-width:767px){
#about .fun .list > li:nth-child(6) li:nth-child(2){
	position:static;
}
}


/* ----------------------------------------
	goals
---------------------------------------- */
#about .goals{
	margin:0 40px 40px;
	background:#e7f4f1;
	border-radius:20px;
}

#about .goals h2{
	text-align:center;
}

#about .goals h3{
	margin:0 0 40px 0;
	font-size:2.4rem;
	font-weight:500;
}

#about .goals figure{
	margin:0 0 100px 0;
	text-align:center;
}

#about .goals p{
	margin:0 0 100px 0;
}

#about .goals ul{
	margin:0 0 60px 0;
}

#about .goals ul li{
	position:relative;
	padding:0 0 0 32px;
	font-weight:500;
}

#about .goals ul li::before{
	content:"";
	position:absolute;
	top:12px;
	left:0;
	width:12px;
	height:12px;
	background:#7dbec3;
	border-radius:50%;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#about .goals{
	margin:0 0 40px 0;
}
}

@media screen and (max-width:767px){
#about .goals{
	margin:0 20px 40px;
}

#about .goals h3{
	font-size:2.0rem;
}

#about .goals figure,
#about .goals p,
#about .goals ul{
	margin:0 0 40px 0;
}

#about .goals ul li{
	padding:0 0 0 20px;
}

#about .goals ul li::before{
	top:11px;
	width:10px;
	height:10px;
}
}


/* ----------------------------------------
	logo
---------------------------------------- */
#about .logo{
	margin:0 40px;
	background:#e5f2f3;
	border-radius:20px;
}

#about .logo ul{
	display:flex;
	justify-content:center;
	gap:0 80px;
	margin:0 0 60px 0;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#about .logo{
	margin:0;
}
}

@media screen and (max-width:767px){
#about .logo{
	margin:0 20px;
}

#about .logo ul{
	display:flex;
	justify-content:center;
	gap:0 20px;
	margin:0 0 40px 0;
}
}


/* ----------------------------------------
	committee
---------------------------------------- */
#about .committee h2{
	text-align:center;
}

#about .committee figure{
	margin:0 60px 60px 0;
}

#about .committee figure img{
	border-radius:50%;
}

#about .committee dl{
	flex:1;
	padding:50px 0 60px 0;
}

#about .committee dl dt{
	margin:0 0 30px 0;
	font-size:3.2rem;
	font-weight:500;
	line-height:1;
}

#about .committee dl dt span{
	display:block;
	margin:24px 0 0 0;
	font-size:1.6rem;
}

@media screen and (max-width:767px){
#about .committee .flex{
	display:block;
}

#about .committee figure{
	margin:0 0 30px 0;
	text-align:center;
}

#about .committee figure img{
	width:280px;
}

#about .committee dl{
	padding:0 0 40px 0;
}

#about .committee dl dt{
	text-align:center;
	font-size:2.4rem;
}

#about .committee dl dt span{
	margin:20px 0 0 0;
	font-size:1.4rem;
}
}


/* ========================================================================
	これまでの歩み					[ /history/ ]
======================================================================== */
#history .section{
	margin:0 40px 40px;
	padding:120px 0 100px 0;
	background:#e5f2f3;
	border-radius:20px;
}
#history .section:nth-of-type(even){ background:#f1f5f5; }

#history .section h2{
	margin:0 0 60px 0;
	padding:0 0 0 80px;
	background:url(../../img/common/bg_h.png) no-repeat left center;
	font-size:4.8rem;
	color:#0e8187;
	line-height:1;
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#history .section{
	margin:0 0 40px 0;
}
}

@media screen and (max-width:767px){
#history .section{
	margin:0 20px 40px;
	padding:40px 0 20px 0;
}

#history .section h2{
	margin:0 0 30px 0;
	padding:0 0 0 50px;
	background:url(../../img/common/bg_h.png) no-repeat left center;
	background-size:40px auto;
	font-size:4.0rem;
}
}


/* ----------------------------------------
	youtube
---------------------------------------- */
#history .section .youtube{
	margin:0 0 40px 0;
	text-align:center;
}

#history .section .youtube iframe{
	width:1000px;
	height:560px;
}

@media screen and (max-width:767px){
#history .section .youtube iframe{
	aspect-ratio:1000/560;
	width:100%;
	height:100%;
}
}


/* ----------------------------------------
	ul
---------------------------------------- */
#history .section ul li a{
	display:block;
	margin:0 0 20px 0;
	background:#ffffff;
	border:1px solid #324b4d;
	border-radius:40px;
	text-decoration:none;
}

#history .section dl{
	display:flex;
	align-items:center;
	height:78px;
	padding:0 70px 0 40px;
	background:url(../../img/common/arrow_01.png) no-repeat right 30px center;
	background-size:10px;
}

#history .section dl dt{
	min-width:140px;
	margin:0 30px 0 0;
	padding:0 10px;
	background:#0e8187;
	border-radius:4px;
	text-align:center;
	font-size:1.6rem;
	font-weight:500;
	color:#ffffff;
}

#history .section dl dd{
	flex:1;
	font-weight:500;
	line-height:2.6rem;
}
#history .section ul li a:hover dd{ text-decoration:underline; }

@media screen and (max-width:767px){
#history .section ul li a{
	border-radius:20px;
}

#history .section dl{
	display:block;
	height:auto;
	padding:20px 50px 20px 20px;
	background-position:right 20px center;
}

#history .section dl dt{
	width:fit-content;
	margin:0 0 10px 0;
	padding:5px 10px;
	font-size:1.4rem;
	line-height:2.0rem;
}
#history .section ul li a:hover dd{ text-decoration:none; }
}


/* ========================================================================
	よくある質問					[ /qa/ ]
======================================================================== */
#qa{
	padding:0 0 120px 0;
}

#qa dl dt{
	margin:0 0 30px 0;
}

#qa dl dd{
	position:relative;
	margin:0 0 60px 0;
	padding:0 0 0 78px;
}

#qa dl dd > span{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:9px;
	left:20px;
	width:38px;
	height:38px;
	background:#7dbec3;
	border-radius:50%;
	font-size:2.4rem;
	color:#ffffff;
}

@media screen and (max-width: 767px){
#qa{
	padding:0 0 20px 0;
}

#qa dl dt{
	margin:0 0 20px 0;
}

#qa dl dd{
	margin:0 0 40px 0;
	padding:0 0 0 50px;
}

#qa dl dd > span{
	top:1px;
	left:10px;
	width:30px;
	height:30px;
	font-size:1.8rem;
}
}


/* ========================================================================
	お問い合わせ					[ /contact/ ]
======================================================================== */
#contact{
	padding:0 0 120px 0;
}

#contact table{
	margin:0 0 60px 0;
}
#contact table tr{ border-top:4px solid #ffffff; }
#contact table tr:first-child{ border:none; }

#contact table th{
	width:400px;
	padding:35px 40px;
	background:#e5f2f3;
	text-align:left;
	vertical-align:top;
	font-size:2.2rem;
	font-weight:700;
	line-height:3.0rem;
	letter-spacing:0.08em;
}

#contact table th span{
	float:right;
	width:64px;
	background:#7dbec3;
	border-radius:2px;
	text-align:center;
	font-size:1.6rem;
	color:#ffffff;
}

#contact table td{
	padding:20px;
	background:#f1f5f5;
}

@media screen and (max-width: 767px){
#contact{
	padding:0 0 20px 0;
}

#contact table{
	margin:0 0 40px 0;
}

#contact table th{
	display:block;
	width:auto;
	padding:20px;
	font-size:1.8rem;
}

#contact table td{
	display:block;
}
}


/* ----------------------------------------
	privacy
---------------------------------------- */
#contact .privacy{
	margin:0 0 60px 0;
	line-height:3.4rem;
}

@media screen and (max-width: 767px){
#contact .privacy{
	margin:0 0 40px 0;
	line-height:3.0rem;
}
}