@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;800&family=Nunito:wght@700;800&display=swap");
/* CSS Document */

/*-------アニメ画像---------*/
.ind_illust_bk {
	background-position: center bottom;
	background-repeat: no-repeat;
	background-image:url(../img_ind/main_bk.png);
	margin: -190px auto 0 auto;
	height: 275px;
	position: relative;
	background-size:cover;
}
.ind_illust_bk img{position:absolute;}
#kami{
	left: 100px;
	top: -30px;
}
#ani1{
	left: 28px;
	top: 17px;
}
#ani2{
	left: 225px;
	top: 18px;
}
#ani3{
	left: 401px;
	top: 21px;
}
#ani4{
	left: 607px;
	top: 19px;
}
#ani5{
	left: 790px;
	top: 23px;
}
#ani6{
	left: 6px;
	top: -115px;
}
#ani7{
	left: 135px;
	top: -131px;
}
#ani8{
	left: 640px;
	top: -85px;
}
#ani9{
	left: 751px;
	top: -70px;
}
#ani10{
	left: -61px;
	top: 3px;
	position: absolute;
}
#ani11{
	left: 0px;
	top: 0px;
	z-index: 3;
	position: absolute;
}
#ani12{
	top: 0px;
	right: 0px;
	z-index: 3;
	position: absolute;
}
#ani13{
	left: 434px;
	top: -11px;
}
#ani14{
	left: 747px;
	top: -92px;
}
/*-------全体---------*/
#ind_banner1{
	position:absolute;
	left: 694px;
	top: 386px;
}
#ind_catch{
	position:absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	z-index: 5;
}


#news_box {
	background-repeat: no-repeat;
	padding: 0 auto 30px auto;
	color: #993300;
	text-align: left;
	background-repeat: no-repeat;
}

#news_box ul{
	list-style:none;
	padding: 0 0 0 20px;
	width: 711px;
	margin: 0 auto;
}

#news_box li{
	color:#689ACD;
	line-height:2em;
	border-bottom: 1px dotted;
	border-color: #689ACD;
}
#news_box li a{
	color:#689ACD;
}
#news_box li span{
margin:0 20px 0 0;
}


#news_box2
 {
	background-repeat: no-repeat;
	padding: 0 auto 30px auto;
	color: #993300;
	text-align: left;
	background-repeat: no-repeat;
}

#news_box2 ul{
	list-style:none;
	padding: 0 0 0 20px;
	width: 711px;
	margin: 0 auto;
}

#news_box2 li{
	color:#689ACD;
	line-height:2em;
	border-bottom: 1px dotted;
	border-color: #689ACD;
}
#news_box2 li a{
	color:#689ACD;
}
#news_box2 li span{
margin:0 20px 0 0;
}

#news_box3
 {
	background-repeat: no-repeat;
	padding: 0 auto 30px auto;
	color: #993300;
	text-align: left;
	background-repeat: no-repeat;
}

#news_box3 ul{
	list-style:none;
	padding: 0 0 0 20px;
	width: 711px;
	margin: 0 auto;
}

#news_box3 li{
	color:#689ACD;
	line-height:2em;
	border-bottom: 1px dotted;
	border-color: #689ACD;
}
#news_box3 li a{
	color:#689ACD;
}
#news_box3 li span{
margin:0 20px 0 0;
}


.border_analog {
	background-image: url(../img/border1.png);
	background-repeat: repeat-x;
	height: 5px;
}



.ind_title{
	background-image:url(../img_ind/title_bk.png);
	background-repeat:no-repeat;
	height:110px;
	font-size: 24px;
	padding: 30px 0 0 0;
}

/*---------------------------------
3ポイント
---------------------------------*/
.box_3point {
	width: 33%;
	text-align: center;
	float: left;
	margin: 0 0 20px 0;
}

#hosoku1 {
	line-height: 1.8em;
	text-align: center;
}
/*---------------------------------
3リンク
---------------------------------*/
.box_3link {
	width: 33%;
	text-align: center;
	float: left;
	margin: 0 0 40px 0;
}
.box_3link img{

}
.box_3link p{
font-weight:bold;
}

/*---------------------------------
4リンク
---------------------------------*/
#box_4link{
	width:1200px;
	margin:0 auto;
}

#box_4link div{
	width: 25%;
	text-align: center;
	float: left;
}
#box_4link img{

}

#box_4link p{
font-weight:bold;
}


/*---------------------------------
スライド
---------------------------------*/
#main{
	position:relative;
	text-align: center;
	margin: -100px 0 0 0;
}
#en{
	text-align:center;
	width:100%;
	position: absolute;
	top: 0px;
	z-index: 2;
}
#en img{
	width:100%;
	margin: 0 auto;
}
#main_bottom{
	text-align:center;
	width:100%;
	position: absolute;
	z-index: 1;
	bottom: 0px;
}
#main_bottom img{
	z-index: 300;
	width:100%;
	margin: 0 auto;
}
#main_catch {
	position: absolute;
	left: 18%;
	top: 59px;
	z-index: 3;
}
.ind_p1{
	font-size:16px;
	font-weight:bold;
	margin: 0 0 20px 0;
	line-height: 2em;
	text-align: center;
}

.ind_blog_title{
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
}

.ind_h2{
	font-size:22px;
	color: #FF6600;
	font-weight: bold;
	margin: 0 0 20px 0;
}
/*---------------------------------
大きいイラスト
---------------------------------*/
#illust_big{
	margin:0 auto;
	width:1000px;
	height:50px;
	position:relative;
}
#illust_big img{
	position:absolute;
	top:-293px;
	z-index:2;
}
/*---------------------------------
背景
---------------------------------*/

.ind_nega1{
margin:-239px 0 0 0;
}
.loop_bk1 {

}
.loop_bk2 {
	background-position: center top;
	padding: 30px 0 30px 0;
	background-image: url(../img_ind/loop2_bk.gif);
}
.loop_bk3 {
	background-image:url(../img_ind/loop3_bk1.gif),url(../img_ind/loop3_bk2.gif);
	background-repeat:repeat-x;
	background-position:top center,center bottom;
	padding: 50px 0 50px 0;
	background-color: #5D453C;
}
.loop_bk4 {
	background-position: top center;
	margin: 30px 0 0 0;
	background-color: #EDFEFC;
	padding: 0 0 40px 0;
	background-image: url(../img_ind/nami1.gif);
	background-repeat: repeat-x;
}
.texcher{
background-image:url(../img_ind/texcher.png);
}
.rand_txt_box1 {
	background-color: #FBF5EC;
	border: solid 4px #D8B163;
	margin: 0 auto;
	padding: 20px 50px;
	line-height: 1.8em;
	border-radius:20px;
}
.rand_txt_box1 h2{
	text-align:center;
	color: #7A5C1F;
	border-bottom: 2px solid;
	font-size: 20px;
	padding: 0 0 20px 0;
	margin: 0 0 20px 0;
}
#banner {
	position: absolute;
	z-index: 100;
	top: 20%;
	right: 15%;
		z-index: 5;
}
.fb-page{
width:500px;
height:700px;
}

/* =========================================================
   Hug Me International School YOKOHAMA TOP 2026 / PC
   ※スマホは後調整。トップ専用classのみで構成。
   ========================================================= */
.hug-top-main{
	margin:0!important; /* hedda.css側ですでに波分だけ引き上げているため、二重に-100pxしない */
	background:#fff;
	position:relative;
	z-index:1;
}

/* ---------------------------------------------------------
   HERO / SLIDER
   1488px前後のブラウザ幅を基準に、横幅いっぱい・比率固定
   --------------------------------------------------------- */
.hug-hero{
	width:100%;
	min-width:1000px;
	aspect-ratio:12 / 5;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	background:#dce7f4;
}
.hug-hero-slides,
.hug-hero-slide{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}
.hug-hero-slide{
	background-size:cover;
	background-position:center center;
	opacity:0;
	transform:scale(1);
	transition:opacity 1s ease;
}
.hug-hero-slide.is-active{
	opacity:1;
	z-index:1;
	animation:hugHeroZoomOut 5.6s linear forwards;
}

/* 表示中ずっとゆっくりズームアウト。
   非アクティブ時はscale(1)に固定し、切替時の拡大フラッシュを防ぐ。
   スライド切替はJS側で5.6秒(このアニメーション時間と同じ)に設定し、
   ズームがscale(1)まで完了しきったタイミングで次に切り替わるようにする。
   （間隔がアニメーションより短いと、途中の拡大値からscale(1)へ
   　瞬間的にスナップしてしまい、切り替え時にカクつきが出るため） */
@keyframes hugHeroZoomOut{
	from{transform:scale(1.14);}
	to{transform:scale(1);}
}

/* 円形コピー -------------------------------------------------
   common.css の影響をここだけ明示的に遮断。
   過去の微調整をいったん整理し、デザイン指定の比率から再構築。
   ----------------------------------------------------------- */
.hug-hero-copy{
	position:absolute;
	z-index:5;
	left:7.2%;
	top:54.5%;
	transform:translateY(-50%);
	width:clamp(320px,31vw,430px);
	height:clamp(320px,31vw,430px);
	background:url(../img_ind/en.png) center center / contain no-repeat;
	box-sizing:border-box;
	text-align:center;
	padding:clamp(43px,3.9vw,58px) clamp(18px,1.7vw,24px) 24px;
	color:#173968;
}

/* 「子どもたちの『やってみたい』を育てる。」と同系統 */
.hug-hero-copy .hug-copy-row,
.hug-hero-copy .hug-copy-row span,
.hug-hero-copy .hug-copy-lead,
.hug-hero-copy .hug-copy-lead span,
.hug-hero-copy .hug-copy-sub,
.hug-hero-copy .hug-copy-sub span,
.hug-hero-copy .hug-hero-buttons a{
	font-family:"Zen Maru Gothic","M PLUS Rounded 1c","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif !important;
}
.hug-hero-copy .hug-copy-row{
	margin:0 !important;
	font-weight:700 !important;
	line-height:1 !important;
	letter-spacing:0 !important;
	white-space:nowrap;
}
.hug-hero-copy .hug-copy-row span{
	display:inline-block;
	vertical-align:baseline;
	font-weight:700 !important;
}
.hug-copy-row .navy{color:#16366a;}
.hug-copy-row .blue{color:#75a5e1;}
.hug-copy-row .pink{color:#f47e9f;}
.hug-copy-row .yellow{color:#f2bf4d;}

/* デザイン基準：52 / 40 */
.hug-hero-copy .hug-copy-row .lg{
	font-size:clamp(41px,3.7vw,52px) !important;
}
.hug-hero-copy .hug-copy-row .sm{
	font-size:clamp(31px,2.85vw,40px) !important;
}
.hug-copy-row1{margin-bottom:1px !important;}
.hug-copy-row2{margin-bottom:2px !important;}
.hug-copy-row3{
	margin-bottom:11px !important;
	position:relative;
	left:.13em; /* 「。」を含む3行目の視覚中央補正 */
}

/* 1才からの=22 / 少人数制英語保育。=26 */
.hug-hero-copy .hug-copy-lead{
	font-weight:700 !important;
	line-height:1.35 !important;
	letter-spacing:0 !important;
	margin:0 0 6px !important;
	color:#16366a !important;
	white-space:nowrap;
}
.hug-hero-copy .hug-copy-lead .small{
	font-size:clamp(17px,1.55vw,22px) !important;
}
.hug-hero-copy .hug-copy-lead .big{
	font-size:clamp(20px,1.85vw,26px) !important;
}

/* Hug Meで学力の基礎を養います。=22 */
.hug-hero-copy .hug-copy-sub{
	font-size:clamp(17px,1.55vw,22px) !important;
	font-weight:700 !important;
	line-height:1.35 !important;
	letter-spacing:0 !important;
	margin:0 0 15px !important;
	color:#626262 !important;
	white-space:nowrap;
}
.hug-hero-copy .hug-copy-sub .brand{
	color:#6d9edb !important;
	font-weight:700 !important;
}

.hug-hero-buttons{
	display:flex;
	justify-content:center;
	gap:10px;
	margin-top:2px;
}
.hug-hero-copy .hug-hero-buttons a{
	display:block;
	text-decoration:none;
	color:#fff;
	font-size:clamp(11px,1vw,14px) !important;
	font-weight:700 !important;
	line-height:1.2 !important;
	letter-spacing:.01em !important;
	padding:10px 17px 11px;
	border-radius:999px;
	white-space:nowrap;
	box-shadow:0 4px 10px rgba(23,57,104,.08);
}
.hug-hero-buttons a:after{content:" ›";font-size:1.1em;}
.hug-btn-pink{background:#f68aa2;}
.hug-btn-navy{background:#123776;}
.hug-hero-dots{
	position:absolute;
	z-index:6;
	left:50%;
	bottom:14px;
	transform:translateX(-50%);
	display:flex;
	gap:9px;
}
.hug-hero-dots button{
	width:10px;
	height:10px;
	padding:0;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.82);
	box-shadow:0 0 0 1px rgba(23,57,104,.10);
	cursor:pointer;
}
.hug-hero-dots button.is-active{background:#173968;}

/* ---------------------------------------------------------
   TOP CONTENTS
   旧820pxをやめ、PC画面で文字・カードが小さく見えない幅へ
   --------------------------------------------------------- */
.hug-top-container{padding:0!important;}
.hug-top-inner{
	width:1100px;
	margin:0 auto;
	box-sizing:border-box;
}

/* Intro */
.hug-intro{
	background:#f5f5f5;
	padding:40px 0 40px;
}
.hug-intro-inner{
	width:1040px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:64px;
}
.hug-intro-photo{
	width:475px;
	position:relative;
	flex:none;
}
.hug-intro-photo img{
	display:block;
	width:100%;
	height:230px;
	object-fit:cover;
	object-position:center center;
	border-radius:70px 20px 70px 20px;
	box-shadow:0 6px 14px rgba(18,57,104,.08);
}
.hug-intro-photo:before{
	content:"★";
	position:absolute;
	left:-15px;
	top:-15px;
	color:#f3bd4f;
	font-size:30px;
	z-index:2;
}
.hug-intro-photo:after{
	content:"★";
	position:absolute;
	right:-14px;
	bottom:-12px;
	color:#f3bd4f;
	font-size:25px;
	z-index:2;
}
.hug-intro-text{flex:1;color:#173968;}
 .hug-en-title{
	font-family:"Nunito","Zen Maru Gothic",sans-serif;
	font-size:24px!important;
	font-weight:bold!important;
	color:#648bd0!important;
	margin:0 0 10px!important;
}
.hug-intro-text h2{
	font-family:"Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
	font-size:34px;
	line-height:1.35;
	margin:0 0 18px;
	font-weight:bold;
	color:#173968;
}
.hug-intro-text>p:last-of-type{
	font-size:16px;
	line-height:2.05;
	color:#3c485c;
	margin:0 0 22px;
}
.hug-outline-btn{
	font-family:"Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
	display:inline-block;
	text-decoration:none;
	color:#173968;
	border:1px solid #6fa1dc;
	background:#fff;
	border-radius:22px;
	font-size:16px;
	font-weight:bold;
	padding:10px 22px;
}

/* 4 points */
.hug-four{
	position:relative;
	overflow:hidden;
	background:#dfe6f1;
	padding:40px 0 40px;
	background-image:url(../img_ind/pattern_white_line_left.svg), url(../img_ind/pattern_white_line_right.svg);
	background-repeat:no-repeat,no-repeat;
	background-position:left -10px top 34px, right -16px bottom 24px;
	background-size:230px auto, 230px auto;
}
.hug-four-inner{width:1100px;}
.hug-section-title{
	text-align:center;
	font-family:"Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
	font-size:36px;
	color:#173968;
	margin:0 0 7px;
}
.hug-section-title span{
	font-size:11px;
	color:#f17696;
	vertical-align:middle;
	margin:0 8px;
}
.hug-section-sub{
	text-align:center!important;
	font-size:16px!important;
	color:#4e6077!important;
	margin:0 0 32px!important;
}
.hug-four-grid{
	display:flex;
	gap:18px;
	justify-content:space-between;
	padding-top:30px;
}
.hug-four-card{
	position:relative;
	width:calc((100% - 54px)/4);
	min-height:215px;
	background:#fff;
	border:5px solid #086697;
	border-radius:9px;
	box-sizing:border-box;
	text-align:center;
	padding:50px 18px 24px;
	color:#24364e;
}
.hug-four-icon{
	position:absolute;
	left:50%;
	top:-38px;
	transform:translateX(-50%);
	width:76px;
	height:76px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 3px 8px rgba(0,0,0,.08);
}
.hug-four-icon img{
	width:58px;
	height:58px;
	display:block;
}
.hug-four-icon.yellow{background:#f2c65d;}
.hug-four-icon.blue{background:#1698c8;}
.hug-four-icon.green{background:#94cd00;}
.hug-four-icon.coral{background:#fd6a6d;}
.hug-four-card h3{
	font-family:"Nunito","Zen Maru Gothic",sans-serif;
	font-size:24px;
	line-height:1.18;
	color:#086697;
	margin:0 0 10px;
	font-weight:bold;
	min-height:45px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.hug-four-card strong{
	display:block;
	font-family:"Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
	font-size:16px;
	color:#173968;
	margin-bottom:10px;
}
.hug-four-card p{
	font-size:14px;
	line-height:1.5;
	margin:0;
	color:#4b5665;
}

/* Programs */
.hug-programs{
	position:relative;
	overflow:hidden;
	background:#e9dfc4;
	padding:42px 0 52px;
	background-image:url(../img_ind/pattern_dots_yellow.svg), url(../img_ind/pattern_dots_pink.svg), url(../img_ind/pattern_dots_mint.svg);
	background-repeat:no-repeat,no-repeat,no-repeat;
	background-position:left 12% top 26%, right 10% top 12%, right 10% bottom 14%;
	background-size:180px auto, 150px auto, 155px auto;
}
.hug-program-grid{
	position:relative;
	z-index:2;
	width:1100px;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:22px;
}
.hug-program-card{
	height:225px;
	background:#f3f8fd;
	border:2px solid #dce9f4;
	border-radius:14px;
	overflow:hidden;
	display:flex;
	text-decoration:none;
	box-shadow:0 4px 10px rgba(0,0,0,.055);
	color:#333;
}
.hug-program-copy{
	width:54%;
	box-sizing:border-box;
	padding:31px 14px 18px 28px;
	position:relative;
	z-index:2;
	background:#f3f8fd;
}
.hug-program-card img{
	width:46%;
	height:100%;
	object-fit:cover;
	display:block;
}
.hug-program-copy h3{
	font-family:"Nunito","Zen Maru Gothic",sans-serif;
	font-size:30px;
	line-height:1.2;
	margin:0 0 13px;
	font-weight:bold;
	white-space:nowrap;
}
.hug-program-copy p{
	font-size:14px;
	line-height:1.8;
	margin:0 0 16px;
	color:#555;
}
.hug-program-copy span{
	font-family:"Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
	display:inline-block;
	border:1px solid currentColor;
	border-radius:18px;
	padding:7px 16px;
	font-size:16px;
	font-weight:bold;
	background:#fff;
}
.hug-program-card.purple h3,.hug-program-card.purple span{color:#9b43c2;}
.hug-program-card.pink h3,.hug-program-card.pink span{color:#f14f85;}
.hug-program-card.blue h3,.hug-program-card.blue span{color:#0075a8;}
.hug-program-card.orange h3,.hug-program-card.orange span{color:#ff6e28;}

/* quick links + Instagram */
.hug-links-instagram{
	background:#f7f7f7;
	padding:46px 0 70px;
}
.hug-quick-grid{
	width:1100px;
	margin:0 auto 60px;
	display:flex;
	gap:24px;
	justify-content:space-between;
}
.hug-quick-card{
	width:calc((100% - 48px)/3);
	box-sizing:border-box;
	background:#f3f7fb;
	border:1px solid #dde8f0;
	border-radius:14px;
	text-decoration:none;
	color:#344052;
	text-align:center;
	padding:12px 12px 18px;
	box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.hug-quick-card img{
	width:100%;
	height:130px;
	object-fit:cover;
	display:block;
	border-radius:10px;
	margin-bottom:13px;
}
.hug-quick-card h3{
	font-family:"Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
	font-size:19px;
	color:#0a5f8f;
	margin:0 0 8px;
}
.hug-quick-card p{
	font-size:14px;
	line-height:1.75;
	margin:0;
}
.hug-instagram-title{
	text-align:center;
	font-family:"Nunito","Zen Maru Gothic",sans-serif;
	font-size:36px;
	color:#173968;
	margin:0 0 32px;
}
.hug-instagram-title span{
	font-size:11px;
	color:#f17696;
	vertical-align:middle;
	margin:0 8px;
}
.hug-instagram-grid{
	width:920px;
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
}
.hug-instagram-grid div{
	aspect-ratio:1/1;
	background:#e9e9e9;
}

/* 1200pxを下回るPCでは、本文のみ少し縮める。スマホは別途後調整。 */
@media screen and (max-width:1199px) and (min-width:641px){
	.hug-top-inner,.hug-four-inner,.hug-program-grid,.hug-quick-grid{width:94%;}
	.hug-intro-inner{width:90%;gap:40px;}
	.hug-intro-photo{width:44%;}
	.hug-instagram-grid{width:82%;}
	.hug-hero{aspect-ratio: 11 / 5;}
	.hug-hero-copy{left:7.2%;top:54.5%;transform:translateY(-50%);width:clamp(320px,31vw,370px);height:clamp(320px,31vw,370px);}
	.hug-four-grid{padding-top:42px;}
	.hug-four-icon{width:68px;height:68px;top:-34px;}
	.hug-four-icon img{width:36px;height:36px;}
	.hug-programs{background-position:left 8% top 24%, right 7% top 11%, right 8% bottom 13%;}
}

/* =========================================================
   TOP / Dreamweaver template-update safe fixes
   2026-08-19
   ---------------------------------------------------------
   #container はテンプレート管理領域なので class を追加しない。
   TOP の編集可能領域内にある .hug-top-main を起点に隣接指定する。
   ========================================================= */
#main.hug-top-main + #container{
	margin-top:0!important;
	padding-top:0!important;
}
#main.hug-top-main + #container > .hug-intro{
	margin-top:0!important;
}
.hug-top-main,
.hug-top-main .hug-hero{
	margin-bottom:0!important;
}


/* =========================================================
   TOP card hover override / modern motion
   common.css の a:hover / opacity 系をTOPカードだけ打ち消す
   ========================================================= */
.hug-program-card,
.hug-program-card:link,
.hug-program-card:visited,
.hug-program-card:hover,
.hug-program-card:active,
.hug-program-card:focus,
.hug-quick-card,
.hug-quick-card:link,
.hug-quick-card:visited,
.hug-quick-card:hover,
.hug-quick-card:active,
.hug-quick-card:focus{
	opacity:1!important;
	text-decoration:none!important;
}
.hug-program-card *,
.hug-program-card:hover *,
.hug-quick-card *,
.hug-quick-card:hover *{
	text-decoration:none!important;
}

/* 上4カード：少し浮く + 白に寄る + 写真だけわずかに寄る */
.hug-program-card{
	position:relative;
	transform:translateY(0);
	transition:
		transform .24s cubic-bezier(.2,.8,.2,1),
		box-shadow .24s cubic-bezier(.2,.8,.2,1),
		border-color .24s ease,
		background-color .24s ease;
	will-change:transform;
}
.hug-program-card .hug-program-copy{
	transition:background-color .24s ease;
}
.hug-program-card img{
	transform:scale(1);
	transform-origin:center center;
	transition:
		transform .38s cubic-bezier(.2,.8,.2,1),
		filter .24s ease;
}
.hug-program-card .hug-program-copy span{
	transform:translateX(0);
	transition:
		transform .24s cubic-bezier(.2,.8,.2,1),
		background-color .24s ease;
}
.hug-program-card:hover,
.hug-program-card:focus-visible{
	transform:translateY(-5px);
	background:#fcfeff!important;
	border-color:#e6eff6;
	box-shadow:0 13px 28px rgba(18,57,104,.13);
}
.hug-program-card:hover .hug-program-copy,
.hug-program-card:focus-visible .hug-program-copy{
	background:#fcfeff!important;
}
.hug-program-card:hover img,
.hug-program-card:focus-visible img{
	opacity:1!important;
	transform:scale(1.035);
	filter:brightness(1.07) saturate(.96);
}
.hug-program-card:hover .hug-program-copy span,
.hug-program-card:focus-visible .hug-program-copy span{
	transform:translateX(3px);
	background:#fff;
}

/* 下3カード：同じ思想で、少し控えめ */
.hug-quick-card{
	position:relative;
	transform:translateY(0);
	transition:
		transform .24s cubic-bezier(.2,.8,.2,1),
		box-shadow .24s cubic-bezier(.2,.8,.2,1),
		border-color .24s ease,
		background-color .24s ease;
	will-change:transform;
}
.hug-quick-card img{
	transform:scale(1);
	transform-origin:center center;
	transition:
		transform .38s cubic-bezier(.2,.8,.2,1),
		filter .24s ease;
}
.hug-quick-card h3{
	transform:translateY(0);
	transition:transform .24s cubic-bezier(.2,.8,.2,1);
}
.hug-quick-card:hover,
.hug-quick-card:focus-visible{
	transform:translateY(-5px);
	background:#fff!important;
	border-color:#edf2f6;
	box-shadow:0 13px 26px rgba(18,57,104,.12);
}
.hug-quick-card:hover img,
.hug-quick-card:focus-visible img{
	opacity:1!important;
	transform:scale(1.03);
	filter:brightness(1.06) saturate(.96);
}
.hug-quick-card:hover h3,
.hug-quick-card:focus-visible h3{
	transform:translateY(-2px);
}

/* キーボード操作時もリンクだと分かるように */
.hug-program-card:focus-visible,
.hug-quick-card:focus-visible{
	outline:2px solid rgba(8,102,151,.35);
	outline-offset:4px;
}

/* 動きを減らす設定のユーザーにはアニメーションを止める */
@media (prefers-reduced-motion: reduce){
	.hug-program-card,
	.hug-program-card .hug-program-copy,
	.hug-program-card img,
	.hug-program-card .hug-program-copy span,
	.hug-quick-card,
	.hug-quick-card img,
	.hug-quick-card h3{
		transition:none!important;
		transform:none!important;
	}
}