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

/* ==========================================================================
   #学校フェイラー コンテンツ（2026/09/07）PC
   デザイン：デザイン/コンテンツ/PC_通常.jpg（1920px幅・サイト共通ヘッダー146px込み）
   ========================================================================== */

#freePage--pc {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	min-width: 1000px;
	position: relative;
	box-sizing: border-box;
}
#freePage--pc .sf,
#freePage--pc .sf *,
#freePage--pc .sf *::before,
#freePage--pc .sf *::after {
	box-sizing: border-box;
}
#freePage--pc .sf {
	position: relative;
	overflow: hidden;
	font-family: "Noto Serif JP", "Yu Mincho", YuMincho, "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", serif;
	color: #000000;
	background: #FFFDF3;
	text-align: center;
}
#freePage--pc .sf img {
	border: 0;
	display: block;
	margin: 0 auto;
	padding: 0;
	max-width: 100%;
	height: auto;
}
#freePage--pc .sf a {
	text-decoration: none;
}
#freePage--pc .sf h2,
#freePage--pc .sf h3,
#freePage--pc .sf p,
#freePage--pc .sf ul,
#freePage--pc .sf li {
	margin: 0;
	padding: 0;
	font-weight: 400;
	list-style: none;
}

/* ===== メインビジュアル ===== */
#freePage--pc .sf .sf__mv {
	position: relative;
	overflow: hidden;
}
#freePage--pc .sf .sf__mv img {
	width: 100vw;
	max-width: none;
	position: relative;
	margin: 0;
}

/* ===== セクション地色 ===== */
#freePage--pc .sf .sf-sec {
	position: relative;
	width: 100%;
}
#freePage--pc .sf .sf-sec--cream {
	background: #FFFDF3;
}
#freePage--pc .sf .sf-sec--gray {
	background: #F2F1EC;
}

/* ===== イントロ ＋ 柄1（同じクリーム地の続き） ===== */
#freePage--pc .sf .sf-sec--intro {
	padding: 120px 0;
}
#freePage--pc .sf .sf__ttlbox {
	position: relative;
	width: 1060px;
	margin: 0 auto;
}
#freePage--pc .sf .sf__ttl {
	font-size: 41px;
	line-height: 74px;
	letter-spacing: 0.03em;
	font-weight: 500;
	color: #112E60;
	text-indent: 0.03em;
}
/* School（画像 title_subtitle.png / 570x66・文字部 96x25）
   高さ40pxはテキスト時の line-height と同値。以降の余白を変えないため維持 */
#freePage--pc .sf .sf__ttl-en {
	height: 40px;
	position: relative;
	top: -5px;
}
#freePage--pc .sf .sf__lead {
	font-size: 18px;
	line-height: 45px;
	letter-spacing: 0.08em;
	color: #000000;
	margin-top: 18px;
}
#freePage--pc .sf .sf__visual {
	margin-top: 80px;
}
#freePage--pc .sf .sf__visual img {
	width: 1200px;
}

/* ===== 柄ブロック共通 ===== */
#freePage--pc .sf .sf-pattern__icon {
	position: relative;
	line-height: 0;
}
#freePage--pc .sf .sf-pattern__lead {
	font-size: 18px;
	line-height: 45px;
	letter-spacing: 0.08em;
	color: #000000;
}

/* 柄1（ハイジ刺しゅう） */
#freePage--pc .sf .sf-pattern--01 {
	padding-top: 70px;
}
#freePage--pc .sf .sf-pattern--01 .sf-pattern__lead {
	margin-top: 30px;
}
#freePage--pc .sf .sf-pattern--01 .sf-items {
	margin-top: 70px;
}

/* 柄2（キルト） */
#freePage--pc .sf .sf-pattern--02 {
	padding: 130px 0 160px;
}
#freePage--pc .sf .sf-pattern--02 .sf-pattern__lead {
	margin-top: 28px;
}
#freePage--pc .sf .sf-pattern--02 .sf-items {
	margin-top: 80px;
}

/* 柄3（フォーマルライン） */
#freePage--pc .sf .sf-pattern--03 {
	padding: 150px 0 153px;
}
#freePage--pc .sf .sf-pattern--03 .sf-pattern__lead {
	margin-top: 30px;
}
#freePage--pc .sf .sf-pattern--03 .sf-items {
	margin-top: 70px;
}

/* 柄4（ランチ） */
#freePage--pc .sf .sf-pattern--04 {
	padding: 120px 0 108px;
}
#freePage--pc .sf .sf-pattern--04 .sf__visual {
	margin-top: 0;
}
#freePage--pc .sf .sf-pattern--04 .sf-pattern__icon {
	margin-top: 70px;
}
#freePage--pc .sf .sf-pattern--04 .sf-pattern__lead {
	margin-top: 30px;
}
#freePage--pc .sf .sf-pattern--04 .sf-items {
	margin-top: 54px;
}

/* ===== 商品カード ===== */
#freePage--pc .sf .sf-items {
	width: 1060px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 60px;
}
#freePage--pc .sf .sf-item {
	position: relative;
	width: 500px;
	height: 838px;
	padding-top: 30px;
	padding-bottom: 52px;
}
/* 枠＋影（デザイン支給の背景画像。カード高さ2種） */
#freePage--pc .sf .sf-item::before {
	content: "";
	position: absolute;
	left: -15px;
	top: -15px;
	width: 536px;
	height: 874px;
	background: url("../img/usr/freepage/contents_20260907/bg_01.png") no-repeat 0 0;
	z-index: 0;
}
#freePage--pc .sf .sf-item--tall {
	height: 897px;
}
#freePage--pc .sf .sf-item--tall::before {
	height: 933px;
	background-image: url("../img/usr/freepage/contents_20260907/bg_02.png");
}

/* 商品名（テキスト） */
#freePage--pc .sf .sf-item__name {
	position: relative;
	font-size: 36px;
	line-height: 51px;
	letter-spacing: 0.12em;
	font-weight: 500;
	color: #112E60;
	text-indent: 0.12em;
}
/* 英字商品名（画像） */
#freePage--pc .sf .sf-item__en {
	position: relative;
	z-index: 2;
	line-height: 0;
	margin-top: -7px;
}
/* 商品写真（画像）
   写真の縦寸法は商品ごとに違うので高さ固定のスロットに上下中央で入れる。
   これでサブ写真以降の位置が商品によってずれない */
#freePage--pc .sf .sf-item__photo {
	position: relative;
	width: 426px;
	height: 269px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	margin: -10px auto 0;
}
/* サブ写真 INSIDE／ZOOM／IMAGE ほか（画像） */
#freePage--pc .sf .sf-item__sub {
	position: relative;
	margin: 0 auto;
	line-height: 0;
}
/* サイズ（テキスト） */
#freePage--pc .sf .sf-item__size {
	position: relative;
	z-index: 2;
	margin-top: 30px;
	font-size: 17px;
	line-height: 28px;
	letter-spacing: 0.03em;
	font-weight: 500;
	color: #000000;
}
/* 価格・ボタンはデザインがカード下端そろえなので下基準 */
#freePage--pc .sf .sf-item__price {
	position: relative;
	z-index: 2;
	height: 41px;
	font-size: 29px;
	line-height: 33px;
	font-weight: 700;
	color: #132A68;
	margin-top: 20px;
}
#freePage--pc .sf .sf-item__price .yen {
	font-size: 29px;
	line-height: 1;
	font-weight: 400;
	margin-right: 4px;
}
#freePage--pc .sf .sf-item__price .tax {
	font-size: 18px;
	line-height: 1;
	font-weight: 400;
	margin-left: 6px;
}
/* ご購入はこちら（画像） */
#freePage--pc .sf .sf-item__btn {
	position: relative;
	z-index: 2;
	line-height: 0;
	margin-top: 22px;
	display: block;
}

#freePage--pc .sf .sf-item--05 .sf-item__name,
#freePage--pc .sf .sf-item--06 .sf-item__name {font-size: 30px;}
#freePage--pc .sf .sf-item--09 .sf-item__name {font-size: 27px;line-height: 39px;}
#freePage--pc .sf .sf-item--10 .sf-item__name {line-height: 42px;}

#freePage--pc .sf .sf-item--01 .sf-item__en,
#freePage--pc .sf .sf-item--05 .sf-item__en,
#freePage--pc .sf .sf-item--06 .sf-item__en,
#freePage--pc .sf .sf-item--09 .sf-item__en {margin-top: 0px;}
#freePage--pc .sf .sf-item--10 .sf-item__en {margin-top: 6px;}

#freePage--pc .sf .sf-item--02 .sf-item__photo,
#freePage--pc .sf .sf-item--03 .sf-item__photo,
#freePage--pc .sf .sf-item--04 .sf-item__photo,
#freePage--pc .sf .sf-item--05 .sf-item__photo,
#freePage--pc .sf .sf-item--06 .sf-item__photo,
#freePage--pc .sf .sf-item--07 .sf-item__photo {margin-top: -3px;}
#freePage--pc .sf .sf-item--08 .sf-item__photo {margin-top: 0;}
#freePage--pc .sf .sf-item--09 .sf-item__photo {margin-top: 0px;}
#freePage--pc .sf .sf-item--10 .sf-item__photo {margin-top: 76px;}

#freePage--pc .sf .sf-item--01 .sf-item__size,
#freePage--pc .sf .sf-item--04 .sf-item__size,
#freePage--pc .sf .sf-item--06 .sf-item__size {font-size: 18px;line-height: 30px;}
#freePage--pc .sf .sf-item--04 .sf-item__size {margin-top: 50px;}
#freePage--pc .sf .sf-item--06 .sf-item__size {margin-top: 47px;}
#freePage--pc .sf .sf-item--08 .sf-item__size {margin-top: 40px;}
#freePage--pc .sf .sf-item--09 .sf-item__size {height: 109px;}
#freePage--pc .sf .sf-item--10 .sf-item__size {margin-top: 57px;}

#freePage--pc .sf .sf-item--01 .sf-item__price {margin-top: 17px;}
#freePage--pc .sf .sf-item--04 .sf-item__price {margin-top: 27px;}
#freePage--pc .sf .sf-item--06 .sf-item__price {margin-top: 30px;}
#freePage--pc .sf .sf-item--08 .sf-item__price {margin-top: 38px;}
#freePage--pc .sf .sf-item--09 .sf-item__price {margin-top: 24px;}
#freePage--pc .sf .sf-item--10 .sf-item__price {margin-top: 80px;}

/* ===== 商品一覧CTA ===== */
#freePage--pc .sf .sf-cta {
	background: #FFFDF3;
	padding: 100px 0 150px;
}
#freePage--pc .sf .sf-cta__btn {
	width: 620px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	margin: 0 auto;
}

/* ===== ご注意ください ===== */
#freePage--pc .sf .sf-att {
	background: #FFFFFF;
	padding: 63px 0 94px;
}
#freePage--pc .sf .sf-att__inner {
	width: 1206px;
	padding-left: 10px;
	margin: 0 auto;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
	color: #000000;
	text-align: left;
}
#freePage--pc .sf .sf-att__ttl {
	font-size: 18px;
	line-height: 40px;
	font-weight: 500;
}
#freePage--pc .sf .sf-att__list {
	margin-top: -4px;
}
#freePage--pc .sf .sf-att__list li {
	font-size: 18px;
	line-height: 40px;
	padding-left: 1em;
	text-indent: -1em;
}

/* ==========================================================================
   アニメーション
   ① 生き物アイコン：登場後もゆれ続ける（ハイジアンティークと同仕様）
   ② コンテンツ：スクロールで下から浮き上がる（Zoff参考）
   ========================================================================== */

#freePage--pc .sf .is-fade {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#freePage--pc .sf .is-fade.is-show {
	opacity: 1;
	transform: translateY(0);
}

#freePage--pc .sf .sf-chara {
	display: inline-block;
	line-height: 0;
	opacity: 0;
	transform: translate(-30px, 26px);
	transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#freePage--pc .sf .sf-chara--right {
	transform: translate(34px, 12px);
}
#freePage--pc .sf .sf-chara--down {
	transform: translate(0, -28px);
}
#freePage--pc .sf .sf-chara.is-show {
	transform: translate(0, 0);
	opacity: 1;
}
#freePage--pc .sf .sf-chara img {
	transform-origin: bottom center;
}
#freePage--pc .sf .sf-chara.is-show img {
	animation: sf-sway 3.2s ease-in-out 0.9s infinite;
}
@keyframes sf-sway {
	0%   { transform: rotate(-5deg); }
	50%  { transform: rotate(5deg); }
	100% { transform: rotate(-5deg); }
}

/* イントロの生き物4匹 */
#freePage--pc .sf .sf__ttlbox .sf-chara {
	position: absolute;
	z-index: 1;
}
#freePage--pc .sf .sf__ttlbox .sf-chara img {
	width: 100%;
}
#freePage--pc .sf .sf-chara--bird {
	left: 176px;
	top: 33px;
	width: 59px;
}
#freePage--pc .sf .sf-chara--ladybug {
	left: 235px;
	top: -28px;
	width: 77px;
}
#freePage--pc .sf .sf-chara--duck {
	left: 741px;
	top: -33px;
	width: 65px;
}
#freePage--pc .sf .sf-chara--butterfly {
	left: 812px;
	top: 17px;
	width: 48px;
}

@media (prefers-reduced-motion: reduce) {
	#freePage--pc .sf .is-fade,
	#freePage--pc .sf .sf-chara {
		opacity: 1;
		transform: none;
		transition: none;
	}
	#freePage--pc .sf .sf-chara.is-show img {
		animation: none;
	}
}