/* CSS Document */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

img {
	max-width:100%;
}
a { 
	outline: none; 
}
a:hover { 
	opacity: .7;
	text-decoration: none;
}
button{
	cursor: pointer;
}

/* head */
#utility{
	padding-top:10px;
	padding-bottom:10px;
}
#utility h1{
	float:left;
}
#utility ul{
	float:right;
}
#utility ul li{
	padding-left:10px;
	float:left;
}
#utility ul li.sns_fb{
	width:100px;
	overflow:hidden;
}

/* cont -------------------*/
#contents {
	width:100%;
	background:#fff;
	padding:177px 0 0;
	position:relative;
	z-index:2;
}
.wrap {
	/* width:974px; */
	width:1020px;
	margin:0 auto;
}
@media only screen and (max-width:640px){
	#contents {
		width:100%;
	}
	.wrap {
		width: 100%;
	}
}
.bdr-b{
	border-bottom: 1px solid #DDDDDD;
}
/* パンくず -------------------*/
#breadcrumb {
	font-size:14px;
}
#breadcrumb a {
	color:#000;
}

/* MV -------------------*/
#main-visual {
	width: 1020px;
	height:auto;
	margin: 116px auto 0;
	z-index:1;
	text-align: center;
}

/* brand-info -------------------*/
#brand-info {
	background:#eee;
	padding:25px 0;
}
#brand-info .inner-wrap {
	display:table;
	background:#fff;
	width:760px;
}
#brand-info .logo {
	display:table-cell;
	vertical-align:middle;
	width:280px;
	padding-top:20px;
	padding-bottom:20px;
	text-align:center;
}
#brand-info .logo em {
	display:block;
	text-align:center;
	margin-bottom:35px;
}
#brand-info a.brandBtn {
	display:block;
	width:233px;
	margin-left:auto;
	margin-right:auto;
	line-height:40px;
	text-align:center;
	background-color:#6b6b6b;
	color:#fff;
	font-size:13px;
	text-decoration:none;
}
#brand-info a.brandBtn:hover {
	background-color:#000000;
}
#brand-info .brand_right {
	display:table-cell;
	width:480px;
	vertical-align:middle;
	padding-top:20px;
	padding-bottom:20px;
}
#brand-info .brand_right p.title_txt {
	display: block;
	padding-bottom: 5px;
	font-size: 20px;
	font-weight: 600;
	font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#brand-info .brand_right h4.title {
	display: block;
	font-size: 13px;
	font-weight: normal;
	padding-bottom: 20px;
}
#brand-info .brand_right p{
	line-height:2;
	font-size: 12px;
}

/* ページトップ -------------------*/
#pagetop {
	text-align: right;
	padding-right:90px;
	margin-bottom:10px;
	margin-top: 100px;
}
#pagetop a {
	display:inline-block;
	text-align:center;
	color:#939393;
	text-decoration:none;
	padding-top:55px;
	background:url(/img/usr/freepage/common/logo/pagetop.png) no-repeat center top;
}
#pagetop a span {
	font-size:10px;
}
#pagetop a:hover {
	filter: alpha(opacity=75);
	-moz-opacity:0.75;
	opacity:0.75;
}


/* page content -------------------*/
#contents .wrap {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	color: #555454;
}
#contents .wrap a {
	color: #555454;
}
#contents .font--robot {
	font-family: 'Roboto', sans-serif;
}


#contents .lead {
	text-align: center;
}
#contents .lead__ttl {
	margin: 0 auto 40px;
	width: 356px;
}
#contents .lead__sub {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.04em;
}
#contents .lead p {
	font-size: 16px;
	letter-spacing: 0.08em;
	line-height: 1.875;
}
#contents .lead p:nth-of-type(n+2) {
	margin-top: 30px;
}


#contents .pagenav {
	margin-top: 145px;
}
#contents .pagenav__ttl {
	margin-bottom: 10px;
	text-align: center;
	font-size: 41px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #6994A7;
}
#contents .pagenav__scroll {
	display: flex;
	overflow-x: hidden;
	width: 660px;
	margin: 0 auto;
	padding-top: 20px;
}
#contents .pagenav__list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0px 5px;
	animation: infinity-scroll-left 27s linear infinite both;
}
@keyframes infinity-scroll-left {
	0% {
		transform: translateX(0)
	}
	to {
		transform: translateX(-100%)
	}
}
#contents .pagenav__list a {
	display: block;
	/* width: initial; */
	position: relative;
	height: 234px;
	padding: 0 55px;
	transition: .2s;
}
#contents .pagenav__list a:nth-of-type(6) img{
	transform: translateX(calc(-10px - 50%));
}
#contents .pagenav__list a:hover {
	transform: translateY(-20px);
	opacity: 1;
}
#contents .pagenav__list a:hover img{
	opacity: 1;
}
#contents .pagenav__list img{
	width: auto;
	max-width: none;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
#contents .pagenav__num{
	width: 144px;
	margin: 30px auto 0;
}



#contents .js-fadeIn {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 1.5s;
	/* transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0s; */
}
#contents .js-fadeIn.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}
#contents .js-fadeIn .deco{
	opacity: 0;
	/* transition: all 1.5s .5s; */
	transition: opacity .88s .75s ease-out, transform .88s .75s cubic-bezier(0.23, 1, 0.32, 1);
	transition: opacity .7s 1s ease-out, transform .7s 1s cubic-bezier(0.23, 1, 0.32, 1);
}
#contents .js-fadeIn.scrollin .deco{
	opacity: 1;
	transform: translate(0, 0)!important;
}


#contents .section {
	margin: 150px auto 0;
	width: 860px;
}
#contents #sec01 {
	margin-top: 135px;
}



#contents .section .item__list{
	margin-top: 31px;
}
#contents .section .item__wrap{
	display: flex;
	align-items: center;
	white-space: nowrap;
}
#contents .section .item__wrap p{
	font-size: 16px;
}
#contents .section .item__wrap:nth-of-type(n+2){
	margin-top: 15px;
}
#contents .section .item__wrap .item:nth-of-type(n+2)::before{
	content: "/";
	margin: 0 12px 0 14px;
}
#contents .section .item__wrap .item__btn{
	margin-left: 25px;
	font-weight: 700;
	text-decoration: underline;
}
#contents .section .item__wrap .item__schedule{
	font-size: 15px;
	margin-left: 25px;
	font-weight: 700;
}


#contents #sec01 .section__ph-group--1 {
	display: block;
	width: 100%;
	margin: 0 auto 30px;
}
#contents #sec01 .section__ph-group--2 {
	display: flex;
	align-items: end;
	position: relative;
}
#contents #sec01 .section__ph-group--2 .deco{
	position: absolute;
	top: 208px;
	left: 370px;
	width: 195px;
	transform: translateX(30px);
}
#contents #sec01 .section__ph-group--2 img{
	position: relative;
	width: 417px;
}
#contents #sec01 .item__list {
	margin-left: 30px;
}


#contents #sec02 .section__ph-group--1 {
	display: block;
	width: 340px;
	margin: 0 0 0 auto;
}
#contents #sec02 .section__ph-group--2 {
	position: relative;
	z-index: 1;
	display: block;
	width: 416px;
	margin-top: -410px;
}
#contents #sec02 .section__ph-group--2::after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: -1;
	display: block;
	width: 100%;
	height: 625px;
	background: #A8D2D0;
}
#contents #sec02 .section__ph-group--3 {
	display: flex;
	flex-direction: row-reverse;
	align-items: end;
	margin-top: -248px;
}
#contents #sec02 .section__ph-group--3 img.deco{
	position: absolute;
	top: 190px;
	right: 347px;
	width: 160px;
	transform: translateX(-30px)
}
#contents #sec02 .section__ph-group--3 img:first-of-type{
	display: block;
	width: 340px;
}
#contents #sec02 .item__list {
	margin-top: 43px;
}


#contents #sec03 .section__ph-group--1 {
	display: block;
	width: 100%;
	text-align: center;
}
#contents #sec03 .section__ph-group--1 .deco{
	width: 352px;
	margin: 34px auto 30px;
	transform: translateX(-30px);
}
#contents #sec03 .section__ph-group--2 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}
#contents #sec03 .section__ph-group--2 img{
	width: 420px;
}
#contents #sec03 .item__wrap {
	justify-content: center;
}


#contents #sec04 .section__ph-group--1 {
	display: block;
	width: 506px;
	margin: 0 auto;
}
#contents #sec04 .item__list{
	margin-top: 28px;
}
#contents #sec04 .item__wrap{
	justify-content: center;
}


#contents #sec05 .section__ph-group--1 {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 76px;
}
#contents #sec05 .section__ph-group--1-1 .deco{
	position: absolute;
	left: 310px;
	top: 70px;
	width: 123px;
	transform: translateX(30px);
}
#contents #sec05 .section__ph-group--1-1 img:nth-of-type(1){
	width: 340px;
}
#contents #sec05 .section__ph-group--1-2{
	width: 415px;
	margin: 240px 15px 0 auto;
}
#contents #sec05 .section__ph-group--1-2::before{
	content:"";
	position: absolute;
	bottom: -15px;
	right: -15px;
	z-index: -1;
	background: #DC894B;
	width: 415px;
	height: 625px;
}
#contents #sec05 .section__ph-group--2 {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
#contents #sec05 .section__ph-group--2 img{
	display: block;
	width: 506px;
}
#contents #sec05 .item__list{
	margin-left: 30px;
}


#contents #sec06 .section__ph-group--1 {
	display: block;
	width: 100%;
	margin: 0 auto 30px;
}
#contents #sec06 .section__ph-group--2 {
	display: flex;
	align-items: end;
}
#contents #sec06 .section__ph-group--2 img{
	width: 417px;
}
#contents #sec06 .item__list {
	margin-left: 30px;
}


#contents #sec07 .section__inner {
	margin: 0 80px 0 158px;
}
#contents #sec07 .section__ph-group--1 {
	display: block;
	width: 416px;
}
#contents #sec07 .item__list {
	position: relative;
	z-index: 1;
}
#contents #sec07 .section__ph-group--2 {
	position: relative;
	display: block;
	width: 461px;
	margin: -286px 0 0 auto;
}
#contents #sec07 .section__ph-group--2 .deco{
	position: absolute;
	top: 227px;
	right: 262px;
	width: 	137px;
	transform: translateX(-30px);
}


#contents #sec08 .section__ph-group--1 {
	display: block;
	width: 100%;
	margin: 0 auto 30px;
}
#contents #sec08 .section__ph-group--2 {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	align-items: end;
}
#contents #sec08 .section__ph-group--2 .deco{
	position: absolute;
	right: 320px;
	top: 55px;
	width: 216px;
	transform: translateX(-30px);
}
#contents #sec08 .section__ph-group--2 img:nth-of-type(2){
	width: 417px;
}
#contents #sec08 .item__list {
	margin-right: 30px;
}


#contents #sec09 .section__ph-group--1 {
	display: block;
	margin-bottom: 20px;
}
#contents #sec09 .section__ph-group--1 img {
	display: block;
	width: 420px;
}
#contents #sec09 .section__ph-flex{
	display: flex;
	justify-content: space-between;
}
#contents #sec09 .section__ph-group--2 {
	display: flex;
	align-items: flex-end;
}
#contents #sec09 .section__ph-group--2 img{
	display: block;
	width: 420px;
}
#contents #sec09 .item__list{
	margin-left: 30px;
}


#contents #sec10 .section__ph-group--1 {
	position: relative;
	display: block;
	width: 506px;
	margin: 0 auto;
}
#contents #sec10 .section__ph-group--1::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -15px;
	top: 15px;
	width: 100%;
	height: 760px;
	background: #A8D2D0;
}

#contents #sec10 .item__list{
	margin-top: 43px;
}
#contents #sec10 .item__wrap{
	justify-content: center;
}


#contents .pagetop {
	margin: 150px auto 44px;
	width: 78px;
}
#contents .link{
	margin: 0 auto 98px;
	width: 280px;
}
#contents .link a{
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border: 1px solid #707070;
	color: #555454;
}
#contents .sbu{
	display: flex;
	justify-content: center;
	margin-bottom: 240px;
	text-align: center;
}
#contents .sbu p{
	font-size: 18px;
	line-height: calc(36/18);
	color: #555454;
}

@media only screen and (max-width:640px){
	.pc {
		display:none !important;
	}
	.sp {
		display:block;
	}
	img.sp {
		display:inline;
	}
	#contents img {
		width: 100%;
	}
	a:hover {
		opacity: 1;
	}
	#contents .wrap {
		width:auto;
		overflow-x: hidden;
	}
	/* cont -------------------*/
	#contents {
		padding: 95px 0 0;
	}

	/* パンくず -------------------*/
	#breadcrumb {
		font-size:10px;
		margin-bottom:10px;
		padding:0 20px;
	}

	/* MV -------------------*/
	#main-visual {
		height:auto;
		position: relative;
		top: auto;
		width:100%;
		margin: 0 auto;
	}

/* brand-info -------------------*/
	#brand-info {
		padding: 10px 0;
	}
	#brand-info .inner-wrap {
		display:block;
		padding:20px 20px;
	}
	#brand-info .logo {
		display:block;
		width:auto;
		text-align:center;
		margin-bottom:0;
	}
	#brand-info .logo em {
		display:block;
		width:auto;
		margin-bottom:0;
	}
	#brand-info .logo em img{
		width:40%;
	}
	#brand-info .brand_right {
		display:block;
		width:auto;
		font-size:100%;
	}
	#brand-info .brand_right p.title_txt,#brand-info .brand_right h4.title {
		text-align:center;
	}
	#brand-info .brand_right p {
		line-height:1.8;
		width:auto;
	}
	#brand-info p br {
		display:none;
	}

/* ページトップ -------------------*/
	#pagetop {
		display: none;
	}

	/* page content -------------------*/
	#contents .lead__ttl {
		width: 100%;
		max-width: 330px;
		margin: 0 auto 22px;
	}
	#contents .lead__sub {
		margin-bottom: 12px;
		font-size: 20px;
	}
	#contents .lead p {
		font-size: 13px;
		letter-spacing: 0.04em;
		line-height: calc(26/13);
	}
	#contents .lead p:nth-of-type(n+2) {
		margin-top: 25px;
	}


	#contents .pagenav {
		margin-top: 120px;
	}
	#contents .pagenav__ttl {
		font-size: 28px;
	}
	#contents .pagenav__list a{
	height: 200px;
	padding: 0 50px;
}
	#contents .pagenav__num{
		width: 118px;
		margin: 25px auto 0;
	}


	#contents .section {
		width: auto;
	}
	#contents .section,
	#contents #sec01 {
		margin-top: 100px;
	}


	#contents .section .item__list{
		margin-top: 15px;
	}
	#contents .section .item__wrap{
		flex-wrap: wrap;
    white-space: normal;
	}
	#contents .section .item__wrap p{
		font-size: 14px;
		line-height: 1.8;
	}
	#contents .section .item__wrap:nth-of-type(n+2){
		margin-top: 0px;
	}
	#contents .section .item__wrap .item:nth-of-type(n+2)::before{
		margin: 0 6px 0 10px;
	}
	#contents .section .item__wrap .item__btn{
		margin-left: 10px;
	}
	#contents .section .item__wrap .item__schedule{
		font-size: 13px;
		margin-left: 10px;
	}


	#contents #sec01 .section__ph-group--1 {
		margin: 0 auto 40px;
	}
	#contents #sec01 .section__ph-group--2 {
		display: block;
	}
	#contents #sec01 .section__ph-group--2 .deco{
		top: calc(200/375*100vw);
		left: calc(210/375*100%);
		width: calc(150/375*100%);
	}
	#contents #sec01 .section__ph-group--2 img{
		width: calc(269/375*100%);
	}
	#contents #sec01 .item__list {
		margin-left: 20px;
	}


	#contents #sec02 .section__ph-group--1 {
		width: calc(240/375*100%);
		margin: 0 0 30px auto;
	}
	#contents #sec02 .section__ph-group--2 {
		width: calc(269/375*100%);
		height: 100%;
		margin: 0;
	}
	#contents #sec02 .section__ph-group--2::after {
		content: "";
		position: absolute;
		top: 10px;
		left: 10px;
		height: 100%;
	}
	#contents #sec02 .section__ph-group--3 {
		display: block;
		position: relative;
		z-index: 1;
		margin: 0 0 0 auto;
	}
	#contents #sec02 .section__ph-group--3 img.deco{
		top: calc(143/375*100vw);
		right: calc(200/375*100%);
		width: calc(135/375*100%);
	}
	#contents #sec02 .section__ph-group--3 img:first-of-type {
		margin: calc(-46/375*100vw) -45px 30px auto;
		width: calc(250/375*100%);
	}
	#contents #sec02 .item__list {
		margin: 0 15px 0 auto;
    width: 168px;
		width: fit-content;
	}


	#contents #sec03 .section__ph-group--1 .deco{
		width: calc(272/375*100%);
		margin: 24px auto 20px;
	}
	#contents #sec03 .section__ph-group--2 {
		margin-bottom: 15px;
	}
	#contents #sec03 .section__ph-group--2 img{
		width: calc(182/375*100%);
		height: 100%;
	}


	#contents #sec04 .section__ph-group--1 {
		width: 100%;
	}
	#contents #sec04 .item__list{
		margin-top: 15px;
	}


	#contents #sec05 .section__ph-group--1 {
		display: block;
		margin-bottom: 58px;
	}
	#contents #sec05 .section__ph-group--1-1 .deco{
		top: calc(150/375*100vw);
		left: calc(190/375*100%);
		width: calc(95/375*100%);
	}
	#contents #sec05 .section__ph-group--1-1 img:nth-of-type(1){
		width: calc(203/375*100%);
	}
	#contents #sec05 .section__ph-group--1-2{
		display: flex;
    align-items: flex-end;
		width: calc(269/375*100%);
		margin: 30px 28px 0 auto;
	}
	#contents #sec05 .section__ph-group--1-2::before{
		bottom: -10px;
		right: -10px;
		width: 100%;
		height: 100%;
	}
	#contents #sec05 .section__ph-group--2 {
		display: block;
		margin: 0 20px 0 20px;
	}
	#contents #sec05 .section__ph-group--2 img{
		width: 100%;
	}
	#contents #sec05 .item__list{
		margin-left: 0;
	}
	#contents #sec05 .item__wrap{
		justify-content: center;
	}


	#contents #sec06 .section__ph-group--1 {
		margin: 0 auto 40px;
	}
	#contents #sec06 .section__ph-group--2 {
		display: block;
		width: calc(269/375*100%);
		/* margin: 0 20px 0 auto; */
	}
	#contents #sec06 .section__ph-group--2 img{
		width: 100%;
	}
	#contents #sec06 .item__list {
		margin-left: 20px;

	}


	#contents #sec07 .section__inner {
		margin: 0;
	}
	#contents #sec07 .section__ph-group--1 {
		width: calc(241/375*100%);
	}
	#contents #sec07 .section__ph-group--2 {
		width: calc(355/375*100%);
		margin: calc(-130/375*100vw) 0 0 auto;
	}
	#contents #sec07 .section__ph-group--2 .deco{
		top: calc(180/375*100vw);
		right: calc(220/375*100%);
		width: calc(105/375*100%);
	
	}
	#contents #sec07 .item__list {
		margin-top: calc(-90/375*100vw);
		margin-left: 20px;
	}


	#contents #sec08 .section__ph-group--1 {
		width: auto;
		margin: 0 20px 65px;
	}
	#contents #sec08 .section__ph-group--2 {
		display: block;
	}
	#contents #sec08 .section__ph-group--2 .deco{
		position: absolute;
		left: 20px;
		top: -40px;
		width: calc(168/375*100%);
	}
	#contents #sec08 .section__ph-group--2 img:nth-of-type(2){
		display: block;
		width: calc(269/375*100%);
		margin: 0 20px 0 auto;
	}
	#contents #sec08 .item__list {
    width: fit-content;
    margin: 15px 20px 0 auto;
	}	


	#contents #sec09 .section__ph-group--1 {
		margin-bottom: 0;
	}
	#contents #sec09 .section__ph-group--1 img {
		width: 50%;
		height: 100%;
	}
	#contents #sec09 .section__ph-group--2 img{
		width: 50%;
		height: 100%;
	}
	#contents #sec09 .item__list{
		width: 50%;
		margin-left: 20px;
	}


	#contents #sec10 .section__ph-group--1 {
		width: calc(295/375*100%);
	}
	#contents #sec10 .section__ph-group--1::before {
		right: -10px;
		top: 10px;
		height: calc(442/375*100vw);
		height: 100%;
	}
	#contents #sec10 .item__list{
		margin-top: 27px;
	}


	#contents .pagetop {
		margin: 120px auto 30px;
		width: 60px;
	}
	#contents .link{
		margin: 0 auto 56px;
		width: 200px;
	}
	#contents .link a{
		height: 32px;
		font-size: 18px;
	}
	#contents .sbu{
		display: block;
		text-align: left;
		padding: 0 20px;
    margin: 0 auto 120px;
	}
	#contents .sbu p{
		font-size: 14px;
		line-height: calc(25/14);
	}
}

	@media only screen and (min-width:641px){
		.sp {
			display:none !important;
		}
		.pc {
			display:block;
		}
		img.pc {
			display:inline;
		}
	
	}