@charset "utf-8";


/* all
-------------------------------------------------------------------*/
:root{
	--keycolor:#8d480d;
}
:root a{
	transition:opacity .4s, color .4s, border-color .4s,background .4s,border-color .4s,text-decoration .4s,transform .4s,box-shadow .4s,filter .4s;
	text-decoration-color:transparent;
}
:root a img,
:root a:before,
:root a:after{
	transition:opacity .4s, background .4s,transform .4s,border-color .4s,box-shadow .4s,filter .4s;
}
:root small{
	display:block;
	font-size:0.875rem;
	color:#000000;
}
html {
	background:#FFFFFF;
	color:var(--keycolor);
	font-family: 'M PLUS Rounded 1c', "游ゴシック Medium", "Yu Gothic Medium" ,"游ゴシック体", "Yu Gothic", YuGothic ,sans-serif;
	font-size:16px;
	line-height:1.4;
	letter-spacing:-0.03em;
}

body {
	width: 100%;
	font-size: 100%;
	text-align: center;
}

.sitewrap {
	width: 1100px;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
header,
footer {
	padding: 12px 0;
	background: #7cc4f8;
	text-align: center;
}
footer {
	padding-bottom:0;
}
footer small{
	display:block;
	background:#fff;
	padding:15px 0;
	margin-top:10px;
	font-size:0.75rem;
}
@media screen and (max-width:1200px) {
	.sitewrap {
		width: 100%;
		padding:0 1em;
	}
}

@media screen and (max-width:767px) {
	html {
		font-size:14px;
	}
	.sitewrap {
		padding:0;
	}
}

/* contents
-------------------------------------------------------------------*/

main{
	display: block;
	font-size:1.25rem;
}
.lead{
	background:url(../img/top/bg_01.png) no-repeat 50% 50% / auto 100%;
	padding-bottom: 3em;
}
.lead .day_wrap .sitewrap{
	max-width:1000px;
}
.lead .day_wrap .list{
	border:solid 10px #f4b3c1;
	background:#fff;
	border-radius:1em;
	padding:1.5em 1em 1.5em 2em;
	margin-block: 1.5em 1.75em;
	display:flex;
	align-items:center;
	font-size:1.2em;
	color:#ff8c9b;
	letter-spacing:0.01em;
	justify-content:space-between;
}
.lead .day_wrap .list .n-style{
	margin:0;
	gap:0.75em;
}
.lead .day_wrap .list .n-style h2{
	padding:0.5em;
	min-width:6em;
	font-weight:500;
}

.lead .day_wrap .list span{
	display:inline-flex;
	align-items:center;
	margin-right:0.5em;
	gap:0.25em;
}
.lead .day_wrap .list p{
	font-size:inherit;
}
.lead .day_wrap .list b{
	font-size:1.5em;
	display:inline-block;
	vertical-align:middle;
	font-weight:600;
}
.lead .day_wrap #menu{
	display:flex;
	align-items:center;
	max-width:1000px;
	justify-content:space-between;
	margin:0 auto;
}
.lead .day_wrap #menu a{
	display:block;
}
.lead .day_wrap #menu a:hover{
	transform:translateY(0.5em);
}
.lead ~ section{
	background:url(../img/top/bg_02.png);
	padding-block:3.5em 4.5em;
	--color00:#dff7e4;
	--color01:#00b0a8;
	--color02:#64bfaa;
	--color03:#abd9ce;
}
.lead ~ section#link02{
	background:url(../img/top/bg_03.png);
	--color00:#f48fad;
	--color01:#e52d8a;
	--color02:#ea6da4;
	--color03:#f6c3d9;
}
.lead ~ section#link03{
	background:url(../img/top/bg_04.png);
	--color00:#d3aaf2;
	--color01:#865ba2;
	--color02:#9a72af;
	--color03:#dfcbe2;
}
.lead ~ section#link04{
	background:url(../img/top/bg_05.png);
	--color00:#ec7969;
	--color01:#e95e60;
	--color02:#ec7969;
	--color03:#f9d5c5;
}
.lead ~ section#link05{
	background:url(../img/top/bg_06.png);
	--color00:#fa9c64;
	--color01:#f29800;
	--color02:#f5a700;
	--color03:#ffda00;
}
:root .n-style{
	display:flex;
	gap:1em;
	align-items:center;
}
:root .n-style:not(:last-child){
	margin-bottom:1em;
}
:root .n-style :is(h2,h3,h4,h5,h6){
	font-size:1.5rem;
	background:#ececec;
	font-weight:500;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:2em;
	padding: 0.35em 1em;
	min-width: 6em;
	color:var(--keycolor);
}
:root .n-style p{
	font-weight:600;
	font-size:1.75rem;
}

:root .tit{
	position:relative;
	z-index:10;
	color:#fff;
	z-index:5;
	margin: 0 auto 2.0em;
	display:flex;
	align-items:center;
	justify-content:center;
	width:860px;
	filter: drop-shadow(0px 4px 10px var(--color02));
}
:root .tit span{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:715px;
	margin-inline:auto;
	max-width:100%;
}
:root .tit span b{
	text-align:center;
	font-size:2.75rem;
	font-weight:bold;
	padding: 0.45em;
	display:block;
	border:solid 2px #fff;
	border-radius:2px;
	background: #64BFAA;
	background: linear-gradient(270deg, var(--color02) 0%, var(--color03) 50%, var(--color02) 100%);
	position:relative;
	z-index:5;
	flex-basis:100%;
	order:-1;
}
:root .tit span i{
	display:block;
	width: 92px;
	height: 27px;
	background:#fff;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
	position:relative;
}
:root .tit span i:after{
	content:"";
	display:block;
	background:var(--color01);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
	position:absolute;
	inset:0px 2px 2px 4px;
}
:root .tit span i:last-child{
	transform:scaleX(-1);
}
:root .tit:before,
:root .tit:after{
	position:absolute;
	display:inline-block;
	content:"";
	left:0;
	bottom:0;
	width:160px;
	height:103px;
	background:var(--color02);
	z-index:-1;
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% 100%,
        0% 100%,
        20% 50% );
	border:solid 2px #fff;
}
:root .tit:after{
	left:auto;
	right:0;
	transform:scale(-1,1);
}
:root .flex-wrap{
	display:flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap:wrap;
	--gap: 1em;
	gap:var(--gap);
}
:root .box-style{
	background:#fff;
	border:solid 15px var(--color00);
	border-radius:2em;
	padding: 2em 1.5em 2em;
}
:root .box-style + .box-style:not(.child){
	margin-top:2em;
}
:root .box-style .figure-wrap{
	margin:1em -0.5em;
}
:root p.caption,
:root ul.caption li{
	font-weight:600;
	margin-left: 1em;
	text-indent: -1em;
	font-size:1.375rem;
}
:root .caption:first-child{
	margin-top:0.75em;
}
:root .txt_red{
	color:#f00;
}
:root .btn{
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.575rem;
	font-weight:600;
	letter-spacing:0.03em;
	background:var(--keycolor);
	width:502px;
	margin:2em auto 0;
	min-height:4em;
	border-radius:4em;
	color:#fff;
	padding:0.25em 0.25em 0.25em 1em;
	box-shadow:0.2em 0.35em 0 #c6a386;
	gap:0.5em;
	border:var(--keycolor) solid 2px;
	max-width:100%;
}
:root .btn:after{
	content:"";
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
	display:block;
	background:#fff;
	aspect-ratio:0.75 / 1;
	width:0.75em;
}
:root .btn:hover{
	background:#fff;
	color:var(--keycolor);
	box-shadow:0 0 0 transparent;
	transform:translate(0.2em ,0.35em);
}
:root .btn:hover:after{
	background:var(--keycolor);
}
:root .box-style p:has( > em){
	font-size:2.15rem;
	font-weight:700;
	text-align:center;
	margin-bottom: 1.5em;
}
:root .l-style :is(h2,h3,h4,h5){
	font-size:2rem;
	font-weight:800;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	background:var(--color00);
	color:#fff;
	padding:0.25em;
	border-radius:3em;
	margin-bottom:1.0em;
}
:root .l-style hgroup :is(h2,h3,h4,h5){
	max-width:620px;
	margin-inline:auto;
}
:root .l-style hgroup{
	position:relative;
	z-index:2;
}
:root .l-style hgroup p{
	position:absolute;
	bottom:-0.5em;
	left:1em;
	z-index: 2;
}
:root .l-style > p{
	font-size:1.625rem;
	font-weight:700;
	margin-bottom:1em;
}
:root .s-style{
	text-align:center;
	font-size:2rem;
	color:var(--color00);
	font-weight:800;
	padding-bottom:0.75em;
	margin-bottom:1em;
	border-bottom:solid 2px var(--color00);
	line-height:1.25;
}
:root .subttl{
	font-size:1.875rem;
	font-weight:700;
	line-height:1.25;
	margin-bottom:0.75em;
}
:root .pc_center{
	text-align:center;
}
:root .sub-sec + .sub-sec{
	padding-top:4.5em;
	margin-top:2.5em;
	border-top:dotted 6px var(--color00);
}
#link01 .n-style{
	margin-block: 1.75em 2.75em;
}
#link01 .btn{
	margin-block:2em 1.75em
}
#link02 .flex-wrap{
	margin: 3em -0.75em 3.5em;
	gap:2em 2%;
}
#link02 .flex-wrap .child{
	flex-basis:49%;
}
#link02 .flex-wrap .child a{
	width:400px;
	margin-block:1em 0;
	min-height: 3.5em;
}
#link03 .flex-wrap .child p{
	font-weight:700;
	transform: skewX(0.03deg);
}
#link03 .flex-wrap .child{
	position:relative;
}
#link03 .flex-wrap .child .icon{
	position:absolute;
	transform:translateX(-30%)
}
#link05 .box-style{
	border-width:5px;
	flex-basis:49%;
	padding-inline:1.25em;
}
#link05 .box01 .flex-wrap{
	gap: 4%;
	letter-spacing:-0.03em;
}
#link05 .box01 .flex-wrap .child:has(.n-style){
	flex-grow:1;
}
#link05 .box01 .flex-wrap .n-style :is(h2,h3,h4,h5,h6){
	min-width:8.5em;
}
#link05 .flex-wrap:has( > .box-style){
	gap:2%;
	margin-top:2%;
	align-items:stretch;
}
#link05 .flex-wrap:has( > .box-style) h3{
	text-align:center;
	margin-bottom:1em;
}
#link05 .flex-wrap .box-style{
	padding:1.5em 1.25em;
}
#link05 .flex-wrap .flex-wrap{
	gap:0.25em;
	justify-content:space-between;
}
@media screen and (min-width:1201px) {
	#link05 .flex-wrap .n-style{
		gap:0.5em;
	}
	#link05 .flex-wrap .n-style :is(h2,h3,h4,h5,h6){
		font-size:1.35rem;
		min-width:4.75em;
		padding-inline:0.25em;
	}
	#link05 .flex-wrap .flex-wrap .n-style p{
		font-size:1.5rem;
	}
}
#link05 .flex-wrap .flex-wrap .subttl{
	font-size:1.65rem;
	margin-bottom:0;
}
#link05 .flex-wrap .caption li{
	font-weight:400;
	font-size:1.0em;
}
#link05 .flex-wrap .caption li{
	transform: skewX(0.03deg);
}
#link05 .flex-wrap small{
	margin-top:1em;
}
#link05 .box02{
	border-color:#bc81e8;
}
#link05 .box03{
	border-color:#fa6f64;
}

/* footer
-------------------------------------------------------------------*/
#pageTop {
    position: fixed;
    bottom: 1em;
    right: 1em;
    width: 126px;
    z-index: 500;
}
@media screen and (max-width:1200px) {
	:root{
		font-size:15px;
	}
	main section{
		padding-inline:2em;
	}
	main section img{
		max-width:100%;
		height:auto;
	}
	:root .tit{
		width:auto;
		margin-inline:-1.5em;
	}
	:root .tit span{
		max-width:calc(100% - 138px);
		width: 100%;
	}
	:root .box-style .scroll-wrap{
		overflow-x:auto;
	}
	#link02 .flex-wrap{
		margin-inline:0;
	}
	#link02 .flex-wrap .child a{
		width:auto;
	    min-height: 3.0em;
	}
	#link03 .flex-wrap .child img[width="404"]{
		aspect-ratio:404 / 318;
	}
	#link03 .flex-wrap .child img[width="504"]{
		aspect-ratio:504 / 318;
	}
	#link03 .flex-wrap .child img{
		max-height:25vw;
		width:auto;
	}
	#link03 .flex-wrap .child .icon{
		width:96px;
	}
	#link05 .box01 .flex-wrap{
		gap:2%;
	}
	#link05 .flex-wrap .child:has(img){
		flex-basis:350px;
	}
	#link05 .flex-wrap .child > img{
		width:auto;
	}
	#link05 .box01 .flex-wrap .child:has(.n-style){
		flex-basis:calc(98% - 350px);
	}
	#link05 .flex-wrap .child .n-style h4{
	    min-width: 8.5em;
	}
	#link05 .flex-wrap:has( > .box-style){
		flex-direction:column;
		gap:1em;
	}
	#link05 .flex-wrap .position{
		min-height:350px;
	}
	#link05 .flex-wrap .flex-wrap{
		position:relative;
		padding-left:calc(350px + 2%);
	}
	#link05 .flex-wrap .flex-wrap .child:has(img){
		position:absolute;
		left:0;
		max-width:350px;
	}
	#link05 .flex-wrap .flex-wrap ~ small,
	#link05 .flex-wrap .flex-wrap ~ .caption{
		padding-left:calc(350px + 2%);
	}
}
@media screen and (max-width:960px) {
	main {
		font-size:1rem;
    }
	main section{
		padding-inline:1em;
	}
	:root .btn{
		font-size:1.15em;
		min-height: 3.5em;
		padding-block:0.5em;
	}
	:root .box-style p:has( > em){
		font-size:1.75rem;
	}
	:root .l-style hgroup p{
		width:120px;
		left:0.5em;
	}
	:root .l-style hgroup h3 {
		padding-inline:2em 1em;
		margin-left:90px;
		line-height:1.25;
		padding-block:0.5em;
		font-size:1.875rem;
		text-align:left;
		justify-content:flex-start;
		max-width:100%;
		
	}
	.lead .day_wrap .list{
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
		gap:0.75em;
		padding:1em;
	}
	.lead .day_wrap #menu{
		gap:1%;
	}
	#link03 .flex-wrap .child .pc_center{
		text-align:left;
	}
	#link05 .box01 .flex-wrap{
		flex-direction:column;
		align-items:center;
		gap:1em;
	}
	#link05 .flex-wrap .child:has(img){
		flex-basis:auto;
	}
	#link05 .flex-wrap .child > img{
		max-width:390px;
		margin-inline:auto;
	}
	#link05 .flex-wrap .subttl {
		margin-inline:auto;
		width:fit-content;
	}
	#link05 .flex-wrap .flex-wrap{
		padding:0;
		flex-direction:column;
		align-items:center;
		gap:1em;
	}
	#link05 .flex-wrap .flex-wrap .child:has(img){
		position:static;
	}
	#link05 .flex-wrap .flex-wrap ~ .caption{
		padding:0;
		margin-inline:auto;
		width:fit-content;
	}
	#link05 .flex-wrap .flex-wrap ~ small{
		padding:0;		
	}
	#link05 .flex-wrap small{
		margin-inline:auto;
		width:fit-content;
	}
	#link05 .flex-wrap .flex-wrap .subttl br{
		display:none;
	}
}
@media screen and (max-width:767px) {
	:root small{
		font-size:0.75rem;
	}
	.lead{
		padding-bottom:2em;
	}
	.lead .day_wrap .list{
		border-width:5px;
		border-radius:0.75em;
		padding:0.5em 0.5em; 
		margin-block: 1.0em 1.0em;
		font-size:1em;
		gap:0.25em;
	}
	.lead .day_wrap .list .n-style{
		gap:0.5em;
	}
	.lead .day_wrap .list .n-style h2{
		min-width:5em;
		font-weight:500;
	}
	.lead .day_wrap .list p{
		font-size:1.11rem;
		display:flex;
		flex-direction:column;
	}
	.lead .day_wrap .list span{
		display:inline-blo;
		flex-wrap:wrap;
		gap:0 0.25em;
		margin:0;
	}
	.lead .day_wrap .list b{
		font-size:1.25em;
	}
	.lead .day_wrap #menu{
		flex-wrap:wrap;
		gap:0.5em 2%;
		justify-content:center;
	}
	.lead .day_wrap #menu a{
		flex-basis:49%;
	}
	.lead ~ section{
		padding-block:2.5em 3em;
	}
	:root .n-style:not(:last-child){
		margin-bottom:0.5em;
	}
	:root .n-style{
		gap:0.75em;
		/* flex-wrap:wrap; */
	}
	:root .n-style :is(h2,h3,h4,h5,h6){
		font-size:1.125rem;
		padding: 0.35em 0.5em;
		min-width: 5em;
	}
	:root .n-style p{
		font-size:1.11rem;
	}
	:root .tit{
		margin: 0 auto 2.0em;
		width:100%;
		filter: drop-shadow(0px 2px 8px var(--color03));
	}
	:root .tit span{
		max-width:calc(100% - 30px);
	}
	:root .tit span b{
		font-size: 1.66rem;
		padding: 0.45em;
	}
	:root .tit span i{
		width: 46px;
		height: 15px;
	}
	:root .tit:before,
	:root .tit:after{
		width:60px;
		height:50px;
	}
	:root .box-style{
		border-width:5px;
		border-radius:0.75em;
		padding: 1.5em 1em 1.5em;
	}
	:root .box-style + .box-style:not(.child){
		margin-top:2em;
	}
	:root .box-style .figure-wrap{
		margin:1em 0;
	}
	:root p.caption,
	:root ul.caption li{
		font-size:0.875rem;
	}
	:root .btn{
		font-size:1rem;
		min-height:3.75em;
	}
	:root .btn:after{
		width:0.66em;
	}
	:root .box-style p:has( > em){
		font-size:1.125rem;
		text-align:left;
	}
	:root .l-style :is(h2,h3,h4,h5){
		font-size:1.25rem;
		padding:0.5em 0.25em;
	}
	:root .l-style hgroup h3 {
		padding-inline:1.5em;
		margin-left:65px;
		font-size: 1.25rem;
	}
	:root .l-style hgroup p{
		left:-0.5em;
		width:86px;
		bottom:0.25em;
	}
	:root .l-style > p{
		font-size:1.125rem;
		font-weight:700;
		margin-bottom:1em;
	}	
	:root .s-style{
		font-size:1.5rem;
		padding-bottom:0.75em;
		margin-bottom:1em;
	}
	:root .subttl{
		font-size:1.11rem;
	}
	:root .pc_center{
		text-align:left;
	}
	:root .sub-sec + .sub-sec{
		padding-top:3em;
		margin-top:2.0em;
		border-top-width:3px;
	}
	#link01 .n-style{
		margin-block: 0em 2em;
	}
	#link01 .scroll-wrap img{
		max-width:514px;
	}
	#link01 .btn{
		margin-block:2em 0em
	}
	#link02 .flex-wrap{
		margin: 1.5em 0 1.5em;
		gap:2em 2%;
		flex-direction:column;
		align-items:center;
	}
	#link02 .flex-wrap img{
		display:block;
		max-width:253px;
		margin-inline:auto;
	}
	#link02 .flex-wrap .child{
		flex-basis:auto;
	}
	#link02 .flex-wrap .child a{
		margin-block:1em 0;
		min-height: 3.5em;
	}
	#link03 .flex-wrap .child .icon{
		width:67px;
		right:-0.5em;
		top:-2em;
		transform:none;
	}
	#link03 .flex-wrap .child{
		display:flex;
		gap:0.75em;
		align-items:center;
	}
	#link03 .flex-wrap .child:nth-child(2){
		flex-direction:row-reverse;
	}
	#link03 .flex-wrap .child .pc_center{
		font-size:0.875rem;
		flex-basis:calc(100% - 0.75em - 125px);
	}
	#link03 .flex-wrap .child img{
		max-height:fit-content;
	}
	#link03 .flex-wrap .child img[height="318"]{
		width:125px;
		max-height:fit-content;
	}
	#link03 .flex-wrap.image02 img{
		max-height:180px;
	}
	#link03 .flex-wrap.image03 .child img{
		max-height:162px;
	}
	#link05 .box-style{
		flex-basis:auto;
		padding-inline:1em;
	}
	#link05 .box01 .flex-wrap{
		gap:1em;
	}
	#link05 .flex-wrap:has( > .box-style){
		gap:1em;
		margin-top:1em;
	}
	#link05 .flex-wrap .child > img{
		max-width:calc(100% - 2em);
		display:block;
		margin-inline:auto;
	}
	#link05 .flex-wrap .box-style{
		padding:1.5em 1.25em;
	}
	#link05 .flex-wrap .flex-wrap{
		gap:1em;
	}
	#link05 .flex-wrap .flex-wrap .subttl{
		font-size:1.25rem;
		margin-bottom:0;
	}
	#link05 .flex-wrap h3 img{
		max-width:220px;
	}
	#link05 .flex-wrap .flex-wrap .child > img{
		width:270px;
	}
	#link05 .flex-wrap .caption li{
		font-size:0.875rem;
	}
	#link05 .flex-wrap .position{
		min-height:0;
	}
	#pageTop {
	    width: 63px;
	    right: 10px;
	    bottom: 10px;
	}
}