body {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.u-desktop {
	display: none;
}

/* リキッドレイアウト対応 */

html {
	font-size: 16px;
}

.top-charm {
	margin-top: 5rem;
	padding-bottom: 5rem;
}

.top-contact {
	margin-top: 5rem;
	padding-bottom: 5rem;
}

.top-frature {
	margin-top: 5.8125rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default padding */

ul,
ol {
	padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

table td, table th{
	padding: 0;
	border: none;
}

h2,h5{
	border-top: none !important;
	border-bottom: none !important;
}

.body {
	color: #333;
	font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif;
}

.body a {
	-webkit-text-decoration: none;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.3s;
}

.body a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}

.body img {
	display: block;
	max-width: 100%;
	width: 100%;
}

.header {
	background-color: #000;
	height: 5.85rem;
}

.charm-cards {
	list-style: none;
}

.charm-cards__item {
	position: relative;
}

.charm-cards__item + .charm-cards__item {
	margin-top: 2.5rem;
}

/* 枚数が増えたときのための処理 */

/* 枚数が増えたときのための処理 */

.charm-cards__number {
	-webkit-text-decoration: underline solid currentColor;
	-webkit-text-decoration: underline 0.3125rem;
	background-color: #fff;
	bottom: -1.875rem;
	font-size: 2.25rem;
	letter-spacing: 0.1em;
	margin: 0 auto;
	position: relative;
	text-align: center;
	text-decoration: underline;
	text-decoration: underline solid currentColor;
	text-decoration: underline 0.3125rem;
	text-decoration-thickness: 0.3125rem;
	width: 50%;
}

.charm-cards__content {
	background-color: #fff;
	border: 1px solid #000;
	height: 95%; /* 親要素(.charm-cards__item)の高さいっぱいに拡張 */
	padding-bottom: 1.875rem;
	padding-top: 3.75rem;
	text-align: center;
}

.charm-cards__head {
	background: linear-gradient(transparent 60%, #D1E881 0%);
	display: inline;
	font-family: ta-oonishi, sans-serif;
	font-size: 1.5625rem;
	letter-spacing: 0.1em;
	line-height: 1.4;
}

.charm-cards__head--second {
	background: linear-gradient(transparent 60%, #A1D1EB 0%);
}

.charm-cards__head--third {
	background: linear-gradient(transparent 60%, #F7AFAF 0%);
}

.charm-cards__img-first {
	flex-grow: 1;
	margin-top: 2.75rem;
	text-align: center;
}

.charm-cards__img-first img {
	-o-object-fit: cover;
	aspect-ratio: 247/191;
	height: 11.9375rem;
	margin: auto;
	object-fit: cover;
	width: 15.4375rem;
}

.charm-cards__img-second {
	flex-grow: 1;
	margin-top: 2.5rem;
	text-align: center;
}

.charm-cards__img-second img {
	-o-object-fit: cover;
	aspect-ratio: 215/191;
	height: 11.9375rem;
	margin: auto;
	object-fit: cover;
	width: 13.4375rem;
}

.charm-cards__img-third {
	flex-grow: 1;
	margin-top: 1.6rem;
	text-align: center;
}

.charm-cards__img-third img {
	-o-object-fit: cover;
	aspect-ratio: 137/117;
	height: 7.3125rem;
	margin: auto;
	object-fit: cover;
	width: 8.5625rem;
}

.charm-cards__text {
	flex-grow: 1; /* 余白を埋めるために伸縮可能 */
	font-size: 1.25rem;
	letter-spacing: 0.1em;
	line-height: 1.25;
	margin-top: 2rem;
}

.charm {
	position: relative;
}

.charm::before {
	background-image: url(../img/shirako/icon_2.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0rem;
	content: "";
	height: 6.1875rem;
	left: calc(50% - min(50%, 16.875rem));
	position: absolute;
	width: 7.5rem;
	z-index: 100;
}

.charm__inner {
	margin: 0 auto;
	max-width: 33.75rem;
	padding: 0 0.9375rem;
}

.charm__list {
	margin-top: 0rem;
}

.contact {
	position: relative;
}

.contact__inner {
	margin: 0 auto;
	max-width: 33.75rem;
	padding: 0 0.9375rem;
}

.contact__sentence {
	font-family: yu-gothic-pr6n, sans-serif;
	font-weight: 400;
	margin-top: 4.375rem;
	text-align: center;
}

.contact__text-top,
.contact__text-bottom {
	font-size: 1.25rem;
	letter-spacing: 0.1em;
	line-height: 2.1292775665;
}

.contact__text-middle {
	margin-top: 3rem;
}

.contact__text-middle p {
	color: #2DA0C9;
	font-size: 1.625rem;
	letter-spacing: 0.1em;
	line-height: 2;
}

.contact__text-bottom {
	margin-top: 2.5rem;
}

.contact__form {
	color: #333;
	letter-spacing: 0.05em;
	line-height: 1.2188;
	padding-top: 3rem;
}

.example-card {
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	padding: 0.625rem;
}

.example-card__img {
	cursor: pointer;
	overflow: hidden;
	width: 100%;
}

.example-card__img img {
	-o-object-fit: cover;
	aspect-ratio: 277/166;
	height: auto;
	object-fit: cover;
	transition: transform 0.3s ease; /* ゆっくり変化させる */
	width: 100%;
}

.example-card__img:hover img {
	transform: scale(1.1); /* 拡大 */
}

.example-card__content {
	display: flex; /* 子要素を縦方向に配置する */
	flex-direction: column; /* 子要素を縦方向に配置する */
}

.example-card__text {
	font-size: max(15px, min(1.5vw, 18px));
	border-bottom: none;
}

.example-card__table {
	border: none;
	text-align: left;
}

.example-card__table {
	padding: 0.5em 0;
}

.example-card__table th {
	font-weight: bold;
	width: 4.375rem;
}

.example-card__tag-text {
	background: #2EA0C9;
}

.example-card__tag {
	margin-bottom: 0.3125rem;
}

.example-card__order-text {
	background: #C9A52E;
}

.example-card__tag-text,
.example-card__order-text {
	color: #fff;
	display: inline-block;
	font-size: 0.75rem;
	margin-bottom: 0.1875rem;
	margin-right: 0.3125rem;
	padding: 0 0.3125rem;
	padding-top: 0.15625rem;
	transition: 0.3s;
}

.example-list {
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	display: grid;
	font-size: 0.9rem;
	grid-template-columns: repeat(1, 1fr);
}

.example {
	background-image: url(../img/shirako/bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5rem 0;
}

.example__bg {
	position: relative;
}

.example__bg::before {
	background-image: url(../img/shirako/icon_3.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: -5rem;
	content: "";
	height: 5rem;
	position: absolute;
	right: calc(50% - min(47%, 18.75rem));
	width: 5rem;
	z-index: 100;
}

.example__inner {
	margin: 0 auto;
	max-width: 33.75rem;
	padding: 0 0.9375rem;
}

.example__list {
	margin-top: 2.5rem;
}
.form{
	max-width: 800px;
}
.form__inner {
	margin: 0 auto;
	max-width: 50rem;
	padding: 0 0.9375rem;
}

.form__list:not(:last-child) {
	margin-bottom: 30px;
}

.form_title {
	width: 100%;
}

.form__list input,
.form__list textarea {
	width: 100%;
}

.form_title {
	display: block;
	font-family: yu-gothic-pr6n, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.75;
	margin-top: 0.6rem;
}

.form_input {
	background-color: #fff;
	border: solid 1px #000;
	border-radius: 0.3125rem;
	font-family: yu-gothic-pr6n, sans-serif;
	font-size: 1.25rem;
	padding: 0.75rem 0.3125rem;
}

.form_textarea {
	background-color: #fff;
	border: solid 1px #000;
	border-radius: 0.3125rem;
	font-family: yu-gothic-pr6n, sans-serif;
	min-height: 12.375rem;
	padding: 0.75rem 0.3125rem;
}

.form_button {
	margin-top: 4.2rem;
	text-align: center;
}

.form_button span {
	background-color: #2DA0C9;
	border-radius: 0.3125rem;
	color: #fff;
	display: inline-block;
	font-family: yu-gothic-pr6n, sans-serif;
	font-size: 1.25rem;
	letter-spacing: 0.1em;
	line-height: 1.4;
	padding: 0.9375rem 0;
	text-align: center;
	transition: 0.3s;
	width: 18.5rem;
}

.frature {
	text-align: center;
}

.frature__en {
	font-size: 1.5rem;
	font-weight: 700;
}

.frature__jp {
	font-family: yu-gothic-pr6n, sans-serif;
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.75;
	margin-top: 0.3125rem;
	position: relative;
}

.frature__jp::before {
	background-image: url(../img/shirako/icon_1.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 4.375rem;
	position: absolute;
	right: calc(50% - min(50%, 12.5rem));
	top: -0.625rem;
	width: 4.375rem;
	z-index: 100;
}

.frature__content {
	background-image: url(../img/shirako/frature-bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 2.5rem;
}

.frature__inner {
	padding: 0 0.9375rem;
}

.frature__sentence {
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	line-height: 1.75;
	padding: 3.75rem 0;
	text-shadow: 7px 7px 7px #fff, -7px -7px 7px #fff, -7px 7px 7px #fff, 7px -7px 7px #fff, 7px 0 7px #fff, -7px 0 7px #fff, 0 7px 7px #fff, 0 -7px 7px #fff;
}

.frature__subtitle {
	border-bottom: solid 1px #fff;
	border-top: solid 1px #fff;
	display: inline-block;
	font-weight: 500;
	padding: 2.5rem 0 2rem;
}

.frature__text {
	margin-top: 2.875rem;
}

.head-title {
	text-align: center;
}

.head-title__en {
	font-size: 1.511875rem;
	font-weight: 700;
}

.head-title__jp {
	font-family: yu-gothic-pr6n, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.75;
	margin-top: 0.3125rem;
	position: relative;
}

.head-title__jp--margin {
	margin-top: 1.25rem;
}

.inner {
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

@media screen and (min-width: 768px) {

.u-desktop {
	display: block;
}

.u-mobile {
	display: none;
}

html {
	font-size: 1.4545454545vw;
}

.top-charm {
	margin-top: 8rem;
	padding-bottom: 10.75rem;
}

.top-contact {
	margin-top: 9.5rem;
	padding-bottom: 10.125rem;
}

.charm-cards {
	display: flex;
	flex-wrap: wrap;
}

.charm-cards__item {
	max-width: calc(33.3333% - 1.3333333333rem);
	width: 100%;
}

.charm-cards__item + .charm-cards__item {
	margin-left: 2rem;
	margin-top: 0;
}

.charm-cards__item:nth-child(3n+1) {
	margin-left: 0;
}

.charm-cards__item:nth-child(n+4) {
	margin-top: 2.5rem;
}

.charm-cards__content {
	padding-bottom: 0;
}

.charm::before {
	bottom: 3.75rem;
	height: 6.1875rem;
	left: calc(50% - min(50%, 37.5rem));
	width: 9.4375rem;
	z-index: 100;
}

.charm__inner {
	max-width: 71.25rem;
}

.charm__list {
	margin-top: 2.5rem;
}

.contact::before {
	background-image: url(../img/shirako/icon_4.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0rem;
	content: "";
	height: 10.5rem;
	left: calc(50% - min(50%, 23.75rem));
	position: absolute;
	width: 9.75rem;
	z-index: 100;
}

.contact__inner {
	max-width: 71.25rem;
}

.contact__sentence {
	margin-top: 8.5rem;
}

.contact__text-top,
.contact__text-bottom {
	font-size: 1.64375rem;
}

.contact__text-middle p {
	font-size: 2rem;
	line-height: 2.1292775665;
}

.example-card {
	padding: 0.9375rem;
}

.example-card__img img {
	aspect-ratio: 230/138;
}

.example-list {
	grid-column-gap: 15px;
	grid-row-gap: 15px;
	grid-template-columns: repeat(3, 1fr);
}

.example {
	padding: 5rem 0 7.3125rem;
}

.example__bg::before {
	bottom: 3.125rem;
	height: 9.375rem;
	right: calc(50% - min(47%, 37.5rem));
	width: 10.5625rem;
	z-index: 100;
}

.example__inner {
	max-width: 60rem;
}

.example__list {
	margin-top: 6.75rem;
}

.form__list {
	display: flex;
}

.form_title {
	width: 22%;
}

.form__list input,
.form__list textarea {
	width: 78%;
}

.frature__jp {
	font-size: 3.4375rem;
	line-height: 1.75;
	margin-top: 1.2rem;
}

.frature__jp::before {
	background-image: url(../img/shirako/icon_1.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 6.75rem;
	position: absolute;
	right: calc(50% - min(50%, 19.1875rem));
	top: -1.25rem;
	width: 6.75rem;
	z-index: 100;
}

.frature__content {
	margin-top: 3.5rem;
}

.frature__sentence {
	font-size: 1.5625rem;
	padding: 5rem 0;
}

.head-title__jp {
	font-size: 2rem;
	letter-spacing: 0.1em;
	line-height: 1.75;
	margin-top: 0.3125rem;
}

.head-title__jp--margin {
	margin-top: 1.875rem;
}

.inner {
	max-width: 1150px;
	padding-left: 25px;
	padding-right: 25px;
}

}

.example-list h5{
	font-size: 1rem;
}
@media screen and (min-width: 992px) {

.example-list {
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	font-size: 1rem;
	grid-template-columns: repeat(3, 1fr);
}

}

@media (min-width: 1100px) {

html {
	font-size: 16px;
}

}

@media screen and (min-width: 1200px) {

.example__inner {
	max-width: 71.25rem;
}

}

@media screen and (max-width: 1200px) {

.header {
	height: 4.20625rem;
}

}

@media screen and (max-width: 990px) {

.top-frature {
	margin-top: 2.5rem;
}

}

@media screen and (max-width: 480px) {

.frature-br {
	display: none;
}

}

@media (max-width: 375px) {

html {
	font-size: 4.2666666667vw;
}

}


/*# sourceMappingURL=style.css.map */