@charset "utf-8";
/* CSS Document */

@media screen and (min-width:961px) { /*PC*/
	.mbonly {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.pconly {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
}

/*メニュー*/

.p-menu-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	width: 100%;
}

.p-top-menu ul {
	display: flex;
}

.p-top-menu ul li a {
	display: block;
}


@media screen and (min-width:729px) { /*PC*/
	.p-menu-wrap {
		padding:25px 0;
	}
	.p-top-logo {
		width: 131px;
	}
	.p-top-logo a {
		display: block;
		width: 131px;
		height: 43px;
		background:url("../img/logo.webp") left top no-repeat;
		background-size: cover;
	}
	.p-top-menu ul {
		gap:40px;
	}
	.p-top-menu ul li a {
		display: block;
		height: 43px;
	}
	li.p-menu01 a {background:url("../img/menu_01.webp") left top no-repeat; width:104px;}
	li.p-menu02 a {background:url("../img/menu_02.webp") left top no-repeat; width:101px;}
	li.p-menu03 a {background:url("../img/menu_03.webp") left top no-repeat; width:110px;}
}
@media screen and (max-width:728px) { /*MB*/
	.p-top-logo {
		width: 25%;
		position: relative;
	}
	.p-top-logo a {
		display: block;
		width: 100%;
		max-width: 93px;
		aspect-ratio:1 / 1;
		margin:0 auto;
		background:url("../img/mob_menu01.webp") left top no-repeat;
		background-size: cover;
	}
	.p-top-menu {
		width: 75%;
		position: relative;
	}
	.p-top-menu ul {
	}
	.p-top-menu ul li {
		width: calc(100% / 3);	
		position: relative;
	}
	.p-top-menu ul li a {
		display: block;
		width: 100%;
		max-width: 93px;
		aspect-ratio:1 / 1;
		margin:0 auto;
	}
	li.p-menu01 a {background:url("../img/mob_menu02.webp") left top no-repeat;background-size: cover;}
	li.p-menu02 a {background:url("../img/mob_menu03.webp") left top no-repeat;background-size: cover;}
	li.p-menu03 a {background:url("../img/mob_menu04.webp") left top no-repeat;background-size: cover;}
}

/*メインビジュアル*/

.swiper-slide {
	box-sizing: border-box;
	border:5px solid #fff;
	border-radius: 15px;
	overflow: hidden;
}

@media screen and (min-width:961px) { /*PC*/
	.p-slide01 {
		display: block;
		background:url("../img/slide_01.png") center top no-repeat;
		background-size: cover;
		width: 100%;
		max-width: 1260px;
		aspect-ratio: 16 / 9;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-slide01 {
		display: block;
		background:url("../img/slide_mob_01.png") center top no-repeat;
		background-size: cover;
		width: 100%;
		aspect-ratio: 2 / 3;
	}
}


.p-slide02 {
	display: block;
	background:url("../img/slide_02.jpg") center top no-repeat;
	background-size: cover;
	width: 100%;
	max-width: 1260px;
	aspect-ratio: 16 / 9;
}

/*ページネーション*/

.swiper-pagination {
	bottom: -38px !important;
}

.swiper-pagination-bullet {
	background-color: #8e92a3;
	border-radius: 8px;
	width: 15px;
	height: 15px;
	margin: 0 10px !important;
	opacity: 1;
}
.swiper-pagination-bullet-active {
	/*アクティブなドットの透過度を1にする*/
	background-color: #ff9bb6;
	opacity: 1;
}

/*コンテンツ枠*/

.p-head {
	margin:0 auto 32px;
}

/*リンク列*/

.p-link-wrap {
	width: 100%;
	padding:20px;
	background-color:#fff;
	box-sizing: border-box;
	border:1px solid #ffd0ee;
	box-shadow:0 0 5px rgba(255,208,238,0.5);
	position: relative;
}

.p-link-wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	
	position: relative;
	width: 100%;
}

.p-link-wrap ul li {
	position: relative;
	display: block;
}

@media screen and (min-width:641px) { /*PC*/
	.p-link-wrap ul {
		gap:12px 48px;
	}
	.p-link-wrap ul li {
		width: 240px;
	}
}
@media screen and (max-width:640px) { /*MB*/
	.p-link-wrap ul {
		gap:12px;
	}
	.p-link-wrap ul li {
		width:calc((100% - 12px) / 2);
	}
}

.p-link-wrap ul li a {
	display: block;
	width: 100%;
}

/*ムービーとSNS*/

.p-sns-wrap {
	display: flex;
	flex-wrap: wrap;
	gap:30px;
	position: relative;
}

.p-movie-wrap {
	background-color:#fff;
	box-sizing: border-box;
	border:1px solid #ffd0ee;
	padding:20px 0 20px;
	position: relative;
	box-shadow:0 0 5px rgba(255,208,238,0.5);
}

.p-x-wrap {
	background-color:#fff;
	box-sizing: border-box;
	border:1px solid #ffd0ee;
	padding:20px 0 20px;
	box-shadow:0 0 5px rgba(255,208,238,0.5);
}

@media screen and (min-width:961px) { /*PC*/
	.p-movie-wrap {
		width:calc(70% - 30px);
	}
	.p-x-wrap {
		width:30%;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-movie-wrap {
		width:100%;
	}
	.p-x-wrap {
		width:100%;
	}
}

.p-movie-topics {
	width: 180px;
}

.p-youtube-movie {
	width: calc(100% - 40px);
	margin: 0 auto;
	position: relative;
}

.p-youtube-movie iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.p-movie-topics {
	width: 180px;
	margin-bottom: 20px;
}

.p-x-topics {
	width: 160px;
	margin-bottom: 20px;
}

.p-twidget {
	width: calc(100% - 40px);
	margin: 0 auto;
	max-height: 432px;
}

/*製品一覧*/

ul.p-product-wrap {
	display: flex;
	justify-content: center;
	gap:30px;
	flex-wrap: wrap;
}

ul.p-product-wrap li {
	min-width: 340px;
	max-width: 540px;
}

@media screen and (min-width:961px) { /*PC-LARGE*/
	ul.p-product-wrap li {
		width: calc((100% - 60px) / 3);
	}
}
@media screen and (max-width:960px) { /*PC-MIDDLE*/
	ul.p-product-wrap li {
		width: calc((100% - 30px) / 2);
	}
}
@media screen and (max-width:640px) { /*MB*/
	ul.p-product-wrap li {
		width: 100%;
	}
}

ul.p-product-wrap li figure {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
}

ul.p-product-wrap li figure figcaption {
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	box-sizing: border-box;
	padding:15px 0 10px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.85+10 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.85) 10%,rgba(255,255,255,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

ul.p-product-wrap li figure figcaption p {
	font-weight: 700;
	color:#95567f;
	font-size: 1.6rem;
	margin-bottom:8px;
}

ul.p-product-wrap li figure figcaption a {
	color:#fff;
	background-color:#fea3de;
	width: 80%;
	display: block;
	margin:0 auto;
	box-sizing: border-box;
	padding:4px;
	font-size: 1.7rem;
	font-weight: 700;
}

ul.p-product-wrap li figure figcaption a:hover {
	text-decoration: none;
	background:#f312a4;
}

/*フッター*/

.p-foot-logo {
	width: 100%;
	max-width: 250px;
	margin:0 auto 32px;
}

.p-foot-copyright {
	color: #fff;
	font-size: 1.5rem;
	margin-bottom:32px;
}

.p-foot-policy {
	color: #fff;
	font-size: 1.5rem;
	line-height: 1.6;
}

/*お問い合わせ*/

#formPos {
	width:100%;
	margin:0 auto;
	position: relative;
}

.p-faq-text {
	font-size: 1.7rem;
	line-height: 1.5;
	margin-bottom: 32px;
}

@media screen and (min-width:961px) { /*PC*/
}
@media screen and (max-width:960px) { /*MB*/
	.p-faq-text {
		text-align: left;
	}
}

.form-wrap {
	width:100%;
	margin:0 auto;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	color:#555555;
	border:1px solid #fea3de;
	padding:32px;
	background-color:rgba(255,255,255,1.00);
	gap:0 4%;
}

.form-wrap dl {
	text-align: left;
	font-size:1.8rem;
	margin-bottom:24px;
}

.form-wrap dt {
	margin-bottom:8px;
}

.form-wrap dl dt p {
	font-weight: normal;
}

.form-wrap dl dt p span {
	font-size: 80%;
}

.form-wrap input[type='text'], .form-wrap select {
	font-size:1.8rem;
	padding:8px;
	box-sizing: border-box;
	border:1px solid rgba(221,221,221,1.00);
	border-radius: 5px;
	transition: all 0.3s;
}

.form-wrap input[type='text']:focus,  .form-wrap select:focus {
	border:1px solid rgba(45,45,45,1.00);
	background-color:rgba(253,240,241,1.00);
}

.cap01, .cap02 {width:48%;}

@media screen and (min-width:1025px) {
	.cap01, .cap02 {width:48%;}
}
@media screen and (max-width:1024px) {
	.cap01, .cap02 {width:100%;}
}

.cap03, .cap04, .cap05, .cap06, .cap07 {width:100%;}

.cap01 input, .cap02 input {width:100%; background-color:#fff;}
.cap03 input, .cap04 select, .cap05 input, .cap06 input {width:100%;background-color:#fff;}

.cap07 textarea {
	width:100%;
	font-size:1.5rem;
	padding:8px;
	border:1px solid rgba(221,221,221,1.00);
	border-radius: 5px;
	text-shadow: h v blur rgba(0, 0, 0, .5);nsition: all 0.3s;
	height: calc( 1.3em * 5 );
	line-height: 1.3;
	background-color:#fff;
}

.cap07 textarea:focus {
	border:1px solid rgba(45,45,45,1.00);
	background-color:rgba(253,240,241,1.00);
}

.subPos {
	width:100%;
	text-align: center;
}

.subPos input {
	display: inline-block;
	width:160px;
	padding:12px;
	border-radius: 5px;
	margin:0 16px;
	font-size:1.8rem;
	border:1px solid rgba(221,221,221,1.00);
	color:#fff;
	transition: all 0.2s;
	cursor: pointer;
}

input.submit {
	background-color:rgba(201,21,30,1.00);
	border:1px solid rgba(237,115,121,1.00);
}

input.submit:hover {
	background-color:rgba(241,62,71,1.00);
}

input.submit:active {
	background-color:rgba(177,20,29,1.00);
}

input.reset {
	background-color:rgba(114,114,114,1.00);
	border:1px solid rgba(168,168,168,1.00);
}

input.reset:hover {
	background-color:rgba(148,148,148,1.00);
}

input.reset:active {
	background-color:rgba(82,82,82,1.00);
}

#formWrap {
	width:100%;
	margin:0 auto;
}

table.formTable {
	width:900px;
	font-size:1.8rem;
	margin:0 auto 72px;
}

table.formTable tr {
	padding:8px 0;
	border-bottom:1px solid #d4d4d4;
}

table.formTable th {
	color:#999999;
	padding:16px 8px;
	box-sizing: border-box;
	width:30%;
}

table.formTable td {
	color:#555555;
	padding:8px;
	box-sizing: border-box;
	width:70%;
	text-align: left;
}

.p-error {
	line-height: 1.7;
}

/*サイトポリシー*/

.p-siteinfo-wrap {
	background:#fff;
	padding:20px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap:24px;
}

.p-siteinfo-wrap h3 {
	background-color:#fea3de;
	color:#fff;
	box-sizing: border-box;
	padding:8px;
	font-weight: 700;
	font-size: 1.7rem;
}

.p-siteinfo-wrap h4 {
	color:#fea3de;
	background-color:#FFF2FA;
	box-sizing: border-box;
	padding:8px;
	font-weight: 700;
	font-size: 1.7rem;
}

.p-siteinfo-wrap p {
	line-height: 1.6;
	font-size: 1.5rem;
}

.p-siteinfo-wrap ul {
	display: flex;
	flex-direction: column;
	gap:12px;
}

.p-siteinfo-wrap ul li {
	line-height: 1.6;
	font-size: 1.5rem;
	padding-bottom:12px;
	border-bottom:1px dotted #fea3de;
}

.p-contact-bt {
	width: 100%;
	max-width: 600px;
	margin:0 auto;
}