@charset "utf-8";



/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');



/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--base-color: #fff;					/*テンプレートの土台となる色（主に背景カラー）*/
	--base-inverse-color: #323232;		/*上のbase-colorの対となる色（主にテキストカラー）*/

	--primary-color: #FEEC37;			/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #323232;	/*上のprimary-colorの対となる色*/

	--space-large: 8vw;			/*主に余白の一括管理用。画面幅100%＝100vwです。*/

	--accent:#004098;
	--muted:#666;
	--bg:#fff;
	--card:#f8f9fb;
	--radius:10px;
	--header-h: 52px;                 /* header height (default) */
	--hero-gap: clamp(24px, 4vw, 90px); /* PC hero top/bottom gap (scales with viewport width) */
	--pagetop-gap: 50px; /* TOPへ戻るボタンのCTAからの逃がし量（調整用） */
}


/*fadeInのキーフレーム設定（汎用的）
/*inview用のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*fadeOutのキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;visibility: hidden;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

html,body {
	font-size: 16px;	/*基準となるフォントサイズ*/
	height: 100%;
}

	/*画面幅1200px以上の追加指定*/
	@media screen and (min-width:1000px) {

	html, body {
		font-size: 16px;
	}

	}/*追加指定ここまで*/

	/*画面幅1600px以上の追加指定*/
	@media screen and (min-width:1600px) {

	html, body {
		font-size: 1vw;
	}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN",  "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類*/
	font-optical-sizing: auto;
	-webkit-text-size-adjust: none;
	background: var(--base-color);		/*varは背景色のことで冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);	/*文字色。冒頭で指定しているbase-inverse-colorを読み込みます。*/
	line-height: 1.8;		/*行間*/
}

/*リセット他*/
figure {margin: 0;}
dd {margin: 0;}
nav ul {list-style: none;}
nav,ul,li,ol {margin: 0;padding: 0;}
section li {margin-left: 1rem;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*input*/
input {font-size: 1rem;}

/*section*/
section {
	overflow-x: hidden;
	padding: var(--space-large);	
}

/* スマホ時だけ：section の左右余白を 5vw に（上下は 8vw のまま） */
@media screen and (max-width:600px){
  section{
    padding: var(--space-large) 5vw;
  }
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	text-decoration: none;	/*下線を消す*/
	opacity: 0.9;			/*色を90%だけ出す*/
}


/*container（サイト全体を囲むボックス）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: absolute;z-index: 1;
	left: 0px;
	top: 0px;
	width: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);	/*ヘッダーの高さ*/
	background: #004098;
}
	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	header {
		height: 76px;	/*ヘッダーの高さ*/
	}
	:root { --header-h: 76px; }

	}/*追加指定ここまで*/

/*ロゴ画像*/
#logo img {
	display: block;
	width: 135px;	/*ロゴの幅*/
}
#logo {
	margin: 0;padding: 0;
	padding-left: 3vw;	/*ロゴの左側に空ける余白*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ロゴ画像*/
	#logo img {
		width: 200px;	/*ロゴの幅*/
	}

	}/*追加指定ここまで*/


/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
/*900px未満では非表示*/
header nav ul {display: none;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		
	/*メニューブロック全体の設定*/
	header > nav > ul {
		margin-right: 100px;	/*ハンバーガーアイコンに重ならないように余白*/
		display: flex;			/*横並びにする*/
	}

	/*メニュー１個あたりの設定*/
	header nav li a {
		display: block;text-decoration: none;
		font-size: clamp(13px, 1.3vw, 18px);
		padding: 0.5rem 1rem;	/*メニュー内の余白。上下、左右へ。*/
	}

	/* 1階層目（トップレベル）のリンク文字色だけ白に */
	header > nav > ul > li > a {
		color: #fff;
	}
	
	/*ドロップダウンメニュー冒頭の矢印アイコン*/
	header nav i {
		padding-right: 0.5rem;	/*右に空ける余白*/
	}

	}/*追加設定ここまで*/


/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
	animation: fadeIn 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
	position: absolute;z-index: 100;
	margin-left: 1rem;
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
	padding: 0.3em 1em;					/*上下、左右へのメニュー内の余白*/
	margin-top: 4px;					/*上に空けるスペース。ドロップダウン同士の隙間。*/
	background: var(--base-color);		/*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	border: 1px solid var(--base-inverse-color);	/*枠線の幅、線種、varは色の指定で冒頭のbase-inverse-colorを読み込みます。*/
	border-radius: 3px;					/*角を少し丸くする指定*/
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指示*/
	content: "\f078";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;	/*アイコンとテキストとの間に空けるスペース*/
}

/*メニューブロック内のロゴ画像の幅*/
#menubar .logo {
	width: 200px;
}


/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {right: -100vw;}
	100% {right: 0px;}
}

/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 1000;
	right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 50px 7vw 50px;				/*ブロック内の余白。上、左右、下への順番。*/
	background: rgba(0, 64, 152, 0.9);
	color: #fff;	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	animation: animation1 0.2s both;		/*animation1を実行する。0.2sは0.2秒の事。*/
}

/* PC時だけ：バーガーメニュー展開（.display-block）の横幅を50%に */
@media screen and (min-width:900px){
  .small-screen #menubar.display-block{
    width: 50%;
  }
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
	margin: 0.8rem 0;			/*メニューの外側に空けるスペース。上下、左右への順番。*/
}
.small-screen #menubar a {
	border-radius: 5px;		/*角を丸くする指定*/
	padding: 0.8rem 1.5rem;		/*メニュー内の余白。上下、左右へ。*/
	background: #fff;		/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: #323232;					/*背景色。冒頭のbase-colorを読み込みます。*/
}

/* 開閉ブロック内のロゴは「メニューリンク」扱いにしない（白背景が出るのを防ぐ） */
.small-screen #menubar .logo a{
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: inline-block;
}
.small-screen #menubar .logo img{
  display: block;
}







/* 開閉メニュー最下部：CTA（WEB出願 / 資料請求） */
.menubar-cta{
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center; /* 中央揃え */
}
.menubar-cta p{ margin: 0; }

/* 既存の .small-screen #menubar a の白背景スタイルを上書き */
.small-screen #menubar .menubar-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;

  width: min(88vw, 360px);
  margin: 0 auto;

  text-decoration: none;
  border-radius: 999px;
  padding: 0.8rem 1.4rem;
  letter-spacing: 0.08em;
}

/* WEB出願：オレンジ×黄色（メイン画像と同系） */
.small-screen #menubar .menubar-cta__btn--apply{
  background: #ff5800;
  color: #feec37;
}

/* 資料請求：白背景×青文字（※ご指定） */
.small-screen #menubar .menubar-cta__btn--request{
  background: #ffffff;
  color: #004098;
  border: 2px solid #ffffff;
}

.small-screen #menubar .menubar-cta__btn i{
  transform: scale(1.15);
}


/* 入学試験参考問題：白背景×青文字＋青罫線 */
.small-screen #menubar .menubar-cta__btn--sample{
  background: #ffffff;
  color: #004098;
    border: 2px solid #ffffff;
}












/*子メニュー（大阪医療大の強み：サブカテゴリ9つのボタン）*/
.small-screen #menubar ul ul a {
  background: var(--base-color);        /*背景色。冒頭のbase-colorを読み込みます。*/
  color: var(--base-inverse-color);    /*文字色。冒頭のbase-inverse-colorを読み込みます。*/
  border: 1px solid var(--base-inverse-color);  /*枠線*/
  margin-left: 1.5rem;                 /*左に空けるスペース（少し詰める）*/

  /* ここからサイズ調整 */
  font-size: 0.9rem;                  /*文字を少し小さく*/
  padding: 0.6rem 1.3rem;              /*ボタン内余白をさらに少し小さく*/
  border-radius: 4px;                  /*角丸も少し控えめ*/
  line-height: 1.4;
}

/* 子メニューの上下間隔（liの外側余白）を詰める */
.small-screen #menubar ul ul li{
  margin: 0.35rem 0;
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: fadeIn 0s 0.2s both;
	position: fixed;z-index: 1001;
	cursor: pointer;
	right: 0px;				/*右からの配置場所指定*/
	top: 0px;				/*上からの配置場所指定*/
	padding: 16px 12px;		/*上下、左右への余白*/
	width: 52px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 52px;			/*高さ*/
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transform-origin: right top;
	background: #004098;	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	border-radius: 0px 0px 0px 10px;		/*角を丸くする指定。左上、右上、右下、左下への順番。*/
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	#menubar_hdr {
		transform: scale(1.35);	/*1.35倍のサイズに。お好みで。*/
	}

	}/*追加指定ここまで*/


/*バー１本あたりの設定（安定した描画のため background の線に変更）*/
#menubar_hdr span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--base-color);
  border-top: 0;
  border-radius: 2px;
  transition: 0.3s; /*アニメーションにかける時間。0.3秒。*/
}

/*通常時：3本線の位置*/
#menubar_hdr span:nth-of-type(1){ top: 16px; }
#menubar_hdr span:nth-of-type(2){ top: 25px; }
#menubar_hdr span:nth-of-type(3){ top: 34px; }

/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
	background: #ff5800;
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
  top: 25px;
  transform: rotate(45deg);
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
  top: 25px;
  transform: rotate(-45deg);
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
  display: none;	/*２本目は使わないので非表示にする*/
}


/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/
#mainimg {
	/*background: var(--base-color) url("../images/mainimg_sh.jpg") no-repeat center center / cover;*/
	width: 100%;
	padding-top: 130%;	/*アスペクト比2:3（3÷2=1.5）*/
	position: relative;
	overflow: hidden;
}

	/*画面600px以上の追加指定*/
	@media screen and (min-width:600px) {

	#mainimg {
		/*background: var(--base-color) url("../images/mainimg.jpg") no-repeat center center / cover;*/
		padding-top: 55%;	/*アスペクト比16:9（9÷16=0.5624）*/
	}

	}/*追加指定ここまで*/

#mainimg > div {
	position: absolute;
	top: var(--header-h);
	left: 0;
	width: 100%;
	height: calc(100% - var(--header-h));
	display: flex;
	flex-direction: column;
	align-items: center;
}
	/*画面600px以上の追加指定*/
	@media screen and (min-width:600px) {

	#mainimg > div {
		top: var(--header-h);
		left: 0;
		height: calc(100% - var(--header-h));

		/* PC: keep equal top/bottom whitespace that scales with viewport width */
		padding-top: var(--hero-gap);
		padding-bottom: var(--hero-gap);

		align-items: center;
		justify-content: center;
	}

	}/*追加指定ここまで*/

/*テキストのブロック*/
#mainimg p {margin: 0;}
#mainimg .text {
	font-size: 8vw;	/*文字サイズ。*/
	font-weight: 800;	/*太字に*/
	line-height: 1.5;	/*行間*/
	text-align: center;	/*テキストをセンタリング*/
	color: #fff;
	white-space: nowrap; /*1行固定*/
}

#mainimg .text p{
  color: #004098;
}

/* =========================================
   TOP：メインコピー（左→右にふわっと表示）
   「左から右にふわっと表示」系
=========================================
#mainimg .hero-title{
  opacity: 0;
  transform: translateX(-28px);
  filter: blur(6px);
  animation: heroFadeInLeft 1.1s ease-out forwards;
  animation-delay: .15s;
}

@keyframes heroFadeInLeft{
  0%{
    opacity: 0;
    transform: translateX(-28px);
    filter: blur(6px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce){
  #mainimg .hero-title{
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}
 */

 
/* =========================================
   見出し：左→右にふわっと表示（スクロールで発火）
   対象：入試情報 / 強み！(h2) + 1〜9セクション(h3)
========================================= 
.js-fadein-left{
  opacity: 0;
  transform: translateX(-28px);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}

.js-fadein-left.is-inview{
  animation: heroFadeInLeft 1.1s ease-out forwards;
  animation-delay: .05s;
}

@media (prefers-reduced-motion: reduce){
  .js-fadein-left{
    opacity: 1;
    transform: none;
    filter: none;
  }
  .js-fadein-left.is-inview{
    animation: none;
  }
}
*/


	/*画面600px以上の追加指定*/
	@media screen and (min-width:600px) {

	#mainimg .text {
		text-align: center; /*PCでも中央揃え*/
		font-size: clamp(24px, 4.5vw, 90px);   /*文字サイズ*/
	}

	}/*追加指定ここまで*/


#mainimg .btn {
	font-size: 1rem; /*文字サイズ*/
	margin-top: 4vw; /*上のテキストとボタンの間のスペース。*/
	display: flex;
	gap: 1rem; /*ボタン同士の余白*/
	justify-content: center; /*ボタン2つを中央揃え*/
	width: 100%;
}
#mainimg .btn a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	margin-bottom: 10px;	/*ボタン同士の隙間*/
	border-radius: 999px;
}

/*マウスオン時*/
#mainimg .btn a:hover {
	opacity: 1;
	transform: scale(1.05);	/*105%に拡大*/
}

	/*画面600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ボタン*/
	#mainimg .btn {
		font-size: clamp(14px, 1.8vw, 24px);	/*文字サイズ*/
	}
	
	#mainimg .btn a {
		margin: 0;
		padding: 0.6rem 2em;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	}

	}/*追加指定ここまで*/


/*1つ目のボタン（お問い合わせ）の追加設定*/
#mainimg .btn p:nth-of-type(1) a {
	background: #ff5800;		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color:#feec37;	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
  letter-spacing: 0.1em;					/*文字間隔を少しだけ広く*/

}

/*2つ目のボタン（資料請求）への追加設定*/
#mainimg .btn p:nth-of-type(2) a {
	background: #004098;	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--primary-color);			/*文字色。冒頭のprimary-colorを読み込みます。*/
	letter-spacing: 0.1em;					/*文字間隔を少しだけ広く*/
}

/*ボタン内のアイコン*/
#mainimg .btn i {
	transform: scale(1.4);	/*140%に拡大*/
	padding-right: 0.8rem;	/*アイコンとテキストとの間の余白*/
}

/* =========================================
   TOP：追加ボタン（入学試験参考問題）
   - PC：上段2ボタンの下に10px空けて中央揃え
   - SP：中央揃えで縦積み（幅は既存ボタンと同等）
========================================= */
#mainimg .btn-sub{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: 1rem;
}

#mainimg .btn-sub p{ margin: 0; }

#mainimg .btn-sub a{
  display: block;
  text-decoration: none;
  padding: 0.8rem 2rem;
  border-radius: 999px;
  background: #ffffff;
  color: #004098;

  /* 枠線分で大きく見えないように（レイアウトサイズを変えない擬似ボーダー） */
  border: none;
  box-shadow: inset 0 0 0 2px #004098;

  /* 上段2ボタンと同等の見え方に */
  letter-spacing: 0.1em;
}

#mainimg .btn-sub a:hover{
  opacity: 1;
  transform: scale(1.05);
}

#mainimg .btn-sub i{
  transform: scale(1.4);
  padding-right: 0.8rem;
}

/* 600px以上：上段ボタンと同じ文字サイズスケールに合わせる */
@media screen and (min-width:600px){
  #mainimg .btn-sub{
    font-size: clamp(14px, 1.8vw, 24px);
  }
  #mainimg .btn-sub a{
    padding: 0.6rem 2em;
  }
}

/* スマホ：既存のTOPボタンと同じ幅で中央揃え */
@media screen and (max-width:600px){
  #mainimg .btn-sub a{
    width: min(88vw, 360px);
    text-align: center;
  }
}

/*スマホ時：コピー＋ボタン全体を中央に寄せて、ボタン下の空き過多を解消*/
@media screen and (max-width:600px){
  /* ヘッダー分を差し引いた領域の中で中央配置 */
  #mainimg > div{
    top: var(--header-h);
    height: calc(100% - var(--header-h));

    padding-top: clamp(18px, 6vw, 44px);
    padding-bottom: clamp(18px, 6vw, 44px);

    justify-content: center;
  }

  #mainimg .text{
    margin-top: 0;
    white-space: normal; /*スマホは2行OK*/
    transform: none;     /*全体中央寄せのため移動を解除*/
  }

  /* ボタンは下固定をやめて、テキストの下に自然に配置（縦積み中央寄せ） */
  #mainimg .btn{
    position: static;
    left: auto;
    bottom: auto;
    transform: none;

    margin-top: clamp(14px, 4vw, 28px);
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  #mainimg .btn a{
    width: min(88vw, 360px);
    text-align: center;
    margin-bottom: 0;
  }
}


/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
main {
	flex: 1 0 auto;
	overflow-x: hidden;
}

/*h2見出し（共通）*/
main h2 {
	margin: 0;padding: 0;
	font-size: 2rem;		/*文字サイズ。240%。*/
	margin-bottom: 2vw;		/*下にスペースを空ける*/
	display: flex;
	flex-direction: column-reverse;
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	position: relative;
	color:#004098;
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	main h2 {
		font-size: 3rem;		/*文字サイズ。240%。*/
	}

	}/*追加指定ここまで*/


/*テキストをセンタリングする場合*/
main h2.c {
	align-items: center;
}

/*h2内のspan（小文字）*/
main h2 span {
	font-size: 0.85rem;	/*文字サイズ85%*/
	opacity: 0.5;		/*透明度。色を50%だけ出す。*/
	font-weight: normal;	/*太字ではなく標準にする*/
}

/*h2内のimg画像（「そのお悩み」という手書き風のふきだしに使っています）*/
h2 img {
	width: 100px;	/*画像の幅*/
	transform: rotate(-10deg);	/*左に10度傾ける。そのままがいいならこの１行を削除。*/
	position: absolute;
	left: -10px;	/*左からの配置場所*/
	top: -40px;	/*上からの配置場所。マイナスがついているので本来とは逆の方向に移動します。*/
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	h2 img {
		width: 140px;	/*画像の幅*/
		left: 40px;		/*左からの配置場所*/
	}

	}/*追加指定ここまで*/


/*フッター
---------------------------------------------------------------------------*/
footer {
	 background: #004098;  /* 背景色 */
  color: #ffffff;       /* 文字色 */
	padding: 2rem;	/*フッター内の余白。2文字分。*/
	display: flex;
	flex-direction: column-reverse;
}

/*フッター直下の1つ目ブロック（ロゴやSNSアイコンが入ったブロック）*/
footer div:nth-of-type(1) {
    text-align: center;
}

/*フッター直下の２つ目ブロック（右側ロゴ等のブロック）*/
footer div:nth-of-type(2) {
    flex: 1;
    display: flex;
    gap: 2rem; /*このブロック内の直下のブロック同士に空ける余白。４文字分。*/
    justify-content: flex-end; /*右寄せ*/
    align-items: center;
}

/* フッター右側ロゴ（/images/mlogo.png）を60%幅＆右寄せ */
footer div:nth-of-type(2) img{
    width: 60%;
    height: auto;
    display: block;
    margin-left: auto;
}

/* スマホ時：右側ロゴ（/images/mlogo.png）を80%幅＆中央揃え */
@media screen and (max-width:700px){
  footer div:nth-of-type(2){
    justify-content: center;
  }
  footer div:nth-of-type(2) img{
    width: 80%;
    margin: 0 auto;
  }
}


	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	footer {
		flex-direction: row;
		gap: 4rem;		/*フッター内の直下のブロック同士に空ける余白。４文字分。*/
		padding: 4rem;	/*フッター内の余白。４文字分。*/
	}

	/*フッター直下の1つ目ブロック（ロゴやSNSアイコンが入ったブロック）*/
	footer div:nth-of-type(1) {
		text-align: left;
		width: 30%;	/*幅*/
	}

	/*フッター直下の２つ目ブロック（メニューブロック）*/
	footer div:nth-of-type(2) {
		justify-content: flex-end;	/*ブロックを右に寄せる。この行を削除すれば、ロゴ画像の方によります。*/
		gap: 4rem;	/*このブロック内の直下のブロック同士に空ける余白。４文字分。*/
	}

	/* PC時：右側ロゴを少し左へ（右端から余白を追加） */
	footer div:nth-of-type(2) img{
		margin-right: 1.5rem;
	}

	}/*追加指定ここまで*/


footer ul {
	margin: 0;padding: 0;list-style: none;
	margin-bottom: 2rem;
}

/* スマホ時：フッターのロゴ画像を50%幅に */
@media screen and (max-width:700px) {
  footer .logo img {
    width: 50%;
    height: auto;
  }
}


/*Copyright部分*/
footer small {
	display: block;
	padding-top: 2rem;	/*SNSアイコンとコピーライトの間の余白調整*/
}


/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	justify-content: center;
	gap: 1rem;	/*アイコン同士のマージン的な要素。１文字分。*/
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {
	
	.icons {
		justify-content: flex-start;
	}

	}/*追加指定ここまで*/

.icons i {
	font-size: 30px;	/*アイコンサイズ*/
}


/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
	text-shadow: none;display: block;text-decoration: none;
	background: #004098;		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: #fff;	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	font-size: 1rem;		/*文字サイズ。140%に。*/
	padding: 0.5rem 2rem;	/*ボタン内の余白。上下、左右へ。*/
	border-radius: 100px;	/*角を丸くする*/
	text-align: center;		/*テキストをセンタリング*/
		border: #004098 1px solid;
}

/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a {
	background: #004098;		/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。冒頭のprimary-colorを読み込みます。*/
		border: #004098 1px solid;
}

/*マウスオン時*/
.btn1 a:hover {
	opacity: 1;
	transform: scale(1.05);	/*105%に拡大*/
	background: #fff;	/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
	color: #004098;				/*文字色。冒頭のprimary-colorを読み込みます。*/
	border: #004098 1px solid;

}

/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a:hover {
	background: #fff;	/*背景色*/
	color: #004098;		/*文字色*/
	border: #004098 1px solid;
}

/*矢印アイコン*/
.btn1 a::after {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指示*/
	content: "\f0a9";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-left: 0.5em;		/*アイコンとテキストとの間に空けるスペース*/
}

/* =========================================
   汎用：パネル右下アクション（PDFダウンロード + 詳細はこちら）
   - PC：横並び（PDFが左／詳細ボタンが右）
   - SP：縦並び（PDFが上／詳細ボタンが下）
========================================= */
.panel-actions{
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.panel-actions__downloads{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.panel-actions__downloads .pdf{
  margin: 0;
  line-height: 1.4;
}

/* スマホ：縦積み（詳細はこちらの上にPDFを並べる） */
@media (max-width:600px){
  .panel-actions{
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
}

/* =========================================
   フッター直前：WEB出願CTA（オレンジボタン）
========================================= */
.footer-cta{
  padding: 40px 20px;
  text-align: center;
}
.footer-cta__btn{
  margin: 0;
}
.footer-cta__btn a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;

  background: #ff5800;
  color: #feec37;
  text-decoration: none;
  letter-spacing: 0.1em;

  font-size: 1.8rem;
  padding: 1.15rem 6.0rem;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.footer-cta__btn a i{
  transform: scale(1.15);
}
.footer-cta__btn a:hover{
  opacity: 1;
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

@media (max-width:600px){
  .footer-cta{
    padding: 28px 16px;
  }
  .footer-cta__btn a{
    width: min(94vw, 520px);
    font-size: 1.15rem;
    padding: 1.05rem 1.4rem;
  }
}


/* =========================================
   スマホ用：フッター固定CTA（WEB出願 / 資料請求）
   - 横並び
   - 背景白／青文字
   - 青罫線
   - 横幅100%
========================================= */
.fixed-cta{
  display: none;
}

@media (max-width:600px){
  .fixed-cta{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 2002;

    display: flex;
    gap: 10px;

    background: #ffffff;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 24px rgba(0,0,0,.10);
  }

  .fixed-cta__btn{
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;

    background: #ffffff;
    color: #004098;
    border: 2px solid #004098;
    border-radius: 10px;

    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.06em;

    padding: 0.4rem 0.6rem;
    min-height: 44px;
    width: 100%;
  }

  .fixed-cta__btn i{
    transform: scale(1.1);
  }

  .fixed-cta__btn:hover{
    opacity: 1;
    filter: brightness(0.98);
  }

  /* 固定CTAで本文/フッターが隠れないように余白を確保 */
  main{
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  footer{
    padding-bottom: calc(2rem + 92px + env(safe-area-inset-bottom));
  }

  /* 右サイド：強みスクロールナビ（1〜9）を小さめ＆間隔を詰める */
  .side-index{
    gap: 6px;
  }
  .side-index__btn{
    width: 34px;
    height: 34px;
  }
  .side-index__num{
    font-size: 0.9rem;
    line-height: 1;
  }

  /* TOPへ戻るボタン：固定CTAの高さ分だけ上に逃がす（ChromeのUI出入りでも重ならない） */
  body .pagetop{
    bottom: calc(var(--fixed-cta-h, 92px) + var(--pagetop-gap, 30px) + env(safe-area-inset-bottom)) !important;
    right: 12px;
    z-index: 2003; /* .fixed-cta(2002)より上 */
  }
}




/*bg-primary-color
---------------------------------------------------------------------------*/
.bg-primary-color {
	background: #e0e0e0;		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}


/*bg1
---------------------------------------------------------------------------*/
.bg1 {
	background-color: #004098;	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color);	/*文字色。冒頭のbase-colorを読み込みます。*/
}


/*bg2
---------------------------------------------------------------------------*/
/*bg3
---------------------------------------------------------------------------*/
.bg3 {
	background: #f5f5f5;	/*背景色*/
}


/*パターン背景
---------------------------------------------------------------------------*/
/*bg-pattern1*/
.bg-pattern1 {
	background-image: url("../images/bg_pattern1.png");	/*背景パターンの読み込み*/
	background-repeat: repeat;
	background-position: center top;
	background-size: 10px;	/*サイズ*/
}

/*bg-pattern2*/
/*bg-pattern3*/
.bg-pattern3 {
	background-image: url("../images/bg_pattern3.png");	/*背景パターンの読み込み*/
	background-repeat: repeat;
	background-position: center top;
	background-size: 10px;	/*サイズ*/
}



/*ボックス下部を三角形（▼）にする場合。三角形の高さ自体はmask-imageのd=の中にある２つの「95」という数値で変更できます。小さいほど角度が大きくなります。
---------------------------------------------------------------------------*/
.arrow {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,88 Q50,98 0,88 Z' fill='%23000000'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    padding-bottom: 60px;
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*アーチ型の再設定。*/
	.arrow {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,80 Q50,108 0,80 Z' fill='%23000000'/%3E%3C/svg%3E");
		padding-bottom: 13vw;
	}
	

	}/*追加指定ここまで*/


/*背景色が切れているのが見えないように微調整*/
.arrow + section {
	padding-top: calc(var(--space-large) + 250px);
	margin-top: -250px;
}


/*list-grid1（３カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3vw;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/

/*list-grid1（1カラムボックス）*/

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid0 {

		grid-template-columns: repeat(1, 1fr);	/*1列にする指定。4列にしたければrepeat(4, 1fr)とする。*/

	}

	}/*追加指定ここまで*/



/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 3rem;	/*ボックスの下に空けるスペース*/
	position: relative;
	border-radius: 10px;	/*角を少しだけ丸く*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	box-shadow: 2px 5px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/
	padding: 2rem;	/*ボックス内の余白。２文字分。*/
}
/* 「こんなお悩みありませんか？」内：画像差し替え用（11.png / 12.png） */
.list-grid0 .list.image-only{
  padding: 0;
  background: none;
  box-shadow: none;
}
.list-grid0 .list.image-only .promo-img,
.list-grid0 .list.image-only img{
  display: block;
  width: 100%;
  height: auto;
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ボックス１個あたり*/
	.list-grid1 .list {
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}

	}/*追加指定ここまで*/


/*bg-black内のボックスへの追加設定*/
.list-grid1 .list.bg-black {
	background: #ffffff;	/*背景色*/
	color: #323232;		/*文字色*/
}

/*ナンバー（01〜03の飾り番号）*/
/*ボックス内のh4見出し*/
.list-grid1 .list h4 {
	font-size: 2.2vw;	/*文字サイズを170%に*/
	line-height: 1.4;	/*行間*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	position: relative;
}

	/*画面幅800px以上の追加指定*/
	@media screen and (max-width:800px) {
	.list-grid1 .list h4 {
		font-size: 1.1rem;	/*文字サイズを170%に*/
	}

	}


/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.9rem;	/*文字サイズを90%に*/
	line-height: 1.6;	/*行間*/
	font-weight: normal;
	text-align: justify;                 /* 右端のガタつきを抑えて両端揃え */
	text-justify: inter-ideograph;       /* 日本語向け */
}

/*bg-black内のp要素への追加設定*/
.list-grid1 .list.bg-black p {
	color: #999;	/*文字色*/
}

/* =========================================
   流し込み文章（本文）の右端を揃える（両端揃え）
   対象：強みセクション（#koe / .list-normal1）内の本文
========================================= */
.list-normal1 .text p{
  text-align: justify;
  text-justify: inter-ideograph;
}





/*list-normal1（「大阪医療大学の強み」ブロックで使用）
---------------------------------------------------------------------------*/
.list-normal1 * {margin: 0;padding: 0;}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*テキストブロック*/
	.list-normal1 .text {
		flex: 1;
	}
	
	/*画像とテキストの左右を入れ替えたい場合（600px以上のみ使用可能）*/
	.reverse {
		flex-direction: row-reverse;
		background-position: left bottom !important;
	}
	
	}/*追加指定ここまで*/


/*ブロック１個あたり*/

.list-normal1 .list {
	/*background: var(--base-color) url("../images/bg-dot.png") no-repeat right bottom / 200px;*/
	background: var(--base-color);
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
	position: relative;
}

/* PC時だけ：.list-normal1 .list のpaddingを広げる */
@media screen and (min-width:900px) {
  .list-normal1 .list {
    padding: 3rem;
  }
}





/* =========================================
   汎用カルーセル（画像スライド）
   使い方：.js-carousel 内の .carousel__slide を増減するだけ
========================================= */

.carousel{
  position: relative;
  width: 45%;
  align-self: flex-start;
  display: block;
  --carousel-aspect: 4 / 3; /* ←必要なら 16/9 などに変更OK */
}

.carousel__stage{
  position: relative;
}

.carousel__viewport{
  overflow: hidden;
  border-radius: 0;                 /* ←角丸やめる */
  aspect-ratio: var(--carousel-aspect);
  background: #fff;
}

.carousel__track{
  display: flex;
  transform: translateX(0);
  transition: transform .25s ease;
  will-change: transform;
}

.carousel__slide{
  flex: 0 0 100%;
  width: 100%;
  margin: 0;

  display: flex;                    /* ←中央に収める */
  align-items: center;
  justify-content: center;
}

.carousel__slide img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* ←トリミングせず全体表示 */
}

.carousel__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255, 255, 255, 0.8);
  color: #004098;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.carousel__btn--prev{ left: 8px; }
.carousel__btn--next{ right: 8px; }

.carousel__btn:hover{
  filter: brightness(1.1);
}

@media (max-width:600px){
  /* スマホ時：.carousel を flex にするとキャプションが右に回り込むので block に戻す */
  .carousel{
    width: 100%;
    display: block;
    margin: 0 auto;
  }

  /* キャプションは下に100%で表示（横崩れ防止） */
  .carousel__caption{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 6px;
  }

  .carousel__btn{
    width: 36px;
    height: 36px;
  }
}

/* キャプション（必要な時だけ表示） */
.carousel__caption{
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #323232;
}

.carousel__caption.is-empty{
  display: none;
}

/* ▼▼▼▼▼ Voices of Students ペア表示用 ▼▼▼▼▼ */
.list-pair{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.list-pair .voice-item:first-child{
  border-top: none;
}

.voice-item{
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(0,0,0,0.2);
  background: none;
  border-radius: 0;
  box-shadow: none;
  align-items: flex-start; /* テキストが長くてもfigureを縦方向に引き伸ばさない */
}

/* #detail-3 の1つ目voice-item内だけ：見出しバーを全幅で表示 */
#detail-3 .voice-item{
  flex-wrap: wrap;
}
#detail-3 .voice-item .voice-item-head{
  width: 100%;
  background: #004098;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  line-height: 1.4;
  margin: 0 0 1rem;
}
/* #detail-3（1つ目のvoice-item）内：2つ目のh4（看護学科）の上に余白＋罫線 */
#detail-3 .voice-item:first-child .text h4:nth-of-type(2){
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0,0,0,0.2);
}
/* =========================================
   コピペ用：テキスト2カラム（画像なし）
   HTML側：.voice-item.voice-item--text-2col を付けるだけでOK
========================================= */
.list-pair .voice-item.voice-item--text-2col{
  flex-direction: row;          /* nth-child(2) の row-reverse を上書き */
  align-items: stretch;
}

.voice-item--text-2col .voice-col{
  flex: 1 1 calc(50% - 1rem);
  margin: 0;
  display: flex;
  flex-direction: column;
}

.voice-item--text-2col .voice-col + .voice-col{
  border-left: 1px solid rgba(0,0,0,0.2);
  padding-left: 1.5rem;
}

/* 2カラム内のボタンを下揃えにしたい場合（任意） */
.voice-item--text-2col .voice-col .r{
  margin-top: auto !important; /* ボタンを下揃え（汎用flexユーティリティと併用可） */
  padding-top: 1rem;
}

@media (max-width:600px){
  .list-pair .voice-item.voice-item--text-2col{
    flex-direction: column;
  }

  .voice-item--text-2col .voice-col{
    flex-basis: 100%;
  }

  .voice-item--text-2col .voice-col + .voice-col{
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(0,0,0,0.2);
    padding-top: 1.2rem;
    margin-top: 1.2rem;
  }
}
/* 2つ目を左右反転（ただし、テキスト2カラム/複数画像ギャラリーは対象外） */
.list-pair .voice-item:nth-child(2):not(.voice-item--text-2col):not(.voice-item--media-gallery){
  flex-direction: row-reverse;
}

@media (max-width:600px){
  .list-pair .voice-item:nth-child(2):not(.voice-item--text-2col):not(.voice-item--media-gallery){
    flex-direction: column;
  }
}


.voice-item figure{
  width:40%;
  align-self: flex-start; /* 念のためfigure単体でも伸びないように */
}

/* =========================================
   複数画像（figureが2枚以上）
   上：1カラム内で横並び
   下：h4/p（.text）を1カラムで配置

   使い方：
   - 画像をまとめて <div class="voice-media"> に入れる
   - その親の .voice-item に .voice-item--media-gallery を付ける
   - さらに対応ブラウザでは :has() でも自動適用（下の @supports）
========================================= */

/* フォールバック：クラスで確実に効かせる */
.voice-item.voice-item--media-gallery{
  flex-direction: column;
}

.voice-item.voice-item--media-gallery .voice-media{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-self: stretch;
}

.voice-item.voice-item--media-gallery .voice-media figure{
  width: 100%;
  margin: 0;
}

.voice-item.voice-item--media-gallery .text{
  width: 100%;
}

@media (max-width:600px){
  .voice-item.voice-item--media-gallery .voice-media{
    grid-template-columns: 1fr; /* スマホは縦積みで崩れ防止 */
  }
}

/* 対応ブラウザでは自動適用（.voice-media を持つ voice-item は同じレイアウトに） */
@supports selector(.voice-item:has(.voice-media)){
  .voice-item:has(.voice-media){
    flex-direction: column;
  }

  .voice-item:has(.voice-media) .voice-media{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-self: stretch;
  }

  .voice-item:has(.voice-media) .voice-media figure{
    width: 100%;
    margin: 0;
  }

  .voice-item:has(.voice-media) .text{
    width: 100%;
  }

  @media (max-width:600px){
    .voice-item:has(.voice-media) .voice-media{
      grid-template-columns: 1fr;
    }
  }
}









.voice-item .text{
  flex:1;
}

/* voice-item内の小さなサブタイトル */
.voice-subtitle{
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  color: #004098;
  line-height: 1.2;
  margin: 0 0 0.35rem;
}

/* この箇所だけピンク（看護学科サブタイトル） */
.voice-subtitle.is-ns{
  color: #e86a8a;
}

@media (max-width:600px){
  .voice-item{
    flex-direction:column;
  }
  .voice-item figure{
    width:100%;
	display: flex;
    justify-content: center;
  }
   .voice-item figure img{
    display: block;
    margin: 0 auto;
  }
}



/*画像ブロック*/
.list-normal1 figure {
	width: 45%;	/*幅*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

@media (max-width:600px){
  .list-normal1 .voice-item figure{
    width:100%;
    display:flex;
    justify-content:center;
  }
  .list-normal1 .voice-item figure img{
    display:block;
    margin:0 auto;
  }
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*画像の下マージンのリセット*/
	.list-normal1 figure {
		margin-bottom: 0;
	}

	}/*追加指定ここまで*/


/*h4見出し*/
.list-normal1 h4 {
	font-size: 1.2rem;	/*文字サイズ200%*/
	line-height: 1.5;	/*行間*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
 color: #004098;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	.list-normal1 h4 {
		font-size: 1.6rem;	/*文字サイズ200%*/
		line-height: 1.4;	/*行間*/
		letter-spacing: 0.1rem;
	}

	}/*追加指定ここまで*/


/*h4内にアイコンを配置した場合（制作の流れの見出し左のアイコン）*/
.list-normal1.flow h4 i {
	margin-right: 1rem;	/*アイコンとテキストとの間の余白*/
}

/*名前*/
.list-normal1 .name {
	text-align: right;	/*右寄せ*/
	margin-top: 1rem;	/*上に空けるスペース*/
}

/*制作の流れで使用しているブロック間の「▼」の矢印*/
.list-normal1.flow .list::after {
	content: "▼";	/*このテキストを出力します*/
	position: absolute;
	left: 50%;		/*左からの配置場所。厳密ではありませんが、文字が小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。マイナスがつくので本来の場所とは逆向きに移動。*/
	transform: scaleX(1.5);	/*横幅を150%に*/
	opacity: 0.5;			/*透明度。色が50%出た状態。*/
}

/*最後のボックスだけ下矢印を出さない*/
.list-normal1.flow .list:last-child::after {
	content: none;
}


/*調整用スタイル
---------------------------------------------------------------------------*/
.padding0 {
	padding: 0 !important;
}
.padding-lr0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff5800 !important;}
.color-yellow  {color: yellow !important;}
/* 汎用：看護学科カラー（必要な要素に class="color-ns" を付与） */
.color-ns {color: #e86a8a !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mt60 {margin-top: 60px !important;}
/* 汎用：flexの縦並びで要素を下（末尾）に押し下げる */
.u-mt-auto{ margin-top: auto !important; }

/* 汎用：上に大きめの余白が欲しい時（mt60と併用せず、こちらを推奨） */
.u-pt60{ padding-top: 60px !important; }
/* 注意書き（学習に関して…）はスマホで少し小さく＋左揃え */
@media (max-width:600px){
  .learning-note{
    font-size: 0.9em;
    text-align: left !important; /* .r の right を上書き */
  }
}
.mb-space-large {margin-bottom: var(--space-large) !important;}
.look {line-height: 1.5 !important; display: inline-block;padding: 5px 10px;background: rgba(0,0,0,0.1);border: 1px solid rgba(0,0,0,0.3);border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.inline-block {display: inline-block !important;}
.relative {position: relative;}
.marker {background: linear-gradient(transparent 50%, yellow);}
pre {white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/

/* デフォルト（PC表示）では改行タグを非表示 */
.sp-br {
  display: none;
}
.sp-br br {
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* 600px以下のスマホサイズで改行タグを表示 */
@media screen and (max-width: 600px) {
  .sp-br {
    display: inline;
  }
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 10px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}
/* スマホ時だけ：TOPへ戻るボタンを上に上げる（固定CTAと干渉しないように） */
@media (max-width:600px){
  .pagetop a{
    bottom: 80px;
  }
}

/* バーガーメニュー展開中は、右下のTOPへ戻るボタンを隠す */
body.is-menu-open .pagetop{
  display: none !important;
}

	/* ================================
タブ切り替え
============================= */

	/* ================================
   学科別カラー
================================ */
body.pt-mode {
  --accent:#004098;
  --card:#f0f4ff;
}

body.ns-mode {
  --accent:#e86a8a;
  --card:#fff0f5;
}


/* ================================
   学科プルダウン（目立つデザイン）
================================ */
.dept-select{
  margin-bottom:20px;
  padding:18px 20px;
  background:#f7f7f7;
  border-left:6px solid var(--accent);
}

.dept-select label{
  font-size:20px;
  font-weight:bold;
  margin-right:15px;
  color:var(--accent);
}

select{
  padding:13px 18px;
  font-size:18px;
  border-radius:10px;
  border:2px solid var(--accent);
  background:#fff;
  font-weight:bold;
  color:#333;
  width:100%;
  max-width:320px;
}

/* ================================
   タブ
================================ */
.tablist{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 20px;
}

.tab{
  border:1px solid #d8dce6;
  background:#fff;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  font-size:15px;
  transition:.15s;
}

.tab:hover{
  background:#f3f6ff;
}

.tab[aria-selected="true"]{
  border-color:var(--accent);
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, white);
  font-weight:bold;
}

/* ================================
   パネル
================================ */
.panels{
  background:var(--card);
  padding:20px;
  border-radius:var(--radius);
}

.panel{
  display:none;
}

.panel[data-show="true"]{
  display:block;
}

.panel h2{
  font-size:1.6rem;
  margin-bottom:12px;
}

/* 看護学科選択時（ns-mode）では h2 のタイトル色をピンク系に変更 */
body.ns-mode .panel h2 {
  color:#e86a8a; /* ns-mode 時は --accent がピンク (#e86a8a) に切り替わる */
}

/* ================================
   表デザイン（レスポンシブ）
================================ */
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  font-size:15px;
  margin-bottom: 20px;
}

table th,table td{
  padding:12px 12px;
  border-bottom:1px solid #eee;
  text-align:left;
}

table thead th{
  background:#f5f7fc;
  color:var(--muted);
  font-weight:bold;
}

table tr:last-child td{
  border-bottom:none;
}

/* ================================
   スマホ対応
================================ */
@media (max-width: 600px){

  .dept-select{
    padding:16px;
  }

  .dept-select label{
    font-size:18px;
    display:block;
    margin-bottom:10px;
  }

  select{
    width:100%;
    max-width:100%;
  }

  .tab{
    flex:1 1 calc(50% - 10px);
    text-align:center;
    padding:10px;
    font-size:14px;
  }

  table th,table td{
    padding:10px;
    font-size:14px;
  }

  .panel h2{
    font-size:1.4rem;
  }
}
	/* ================================
タブ切り替えここまで
============================= */




.kazari > span {
		font-family: "Oswald", sans-serif;	/*フォント指定*/
}

/* 見出しの両端に斜め罫線（\  /）を追加 */
.kazari{
	letter-spacing: 0.2rem;
	position: relative;
	text-align: center;
	/* 罫線の分だけ左右に余白を確保（画面幅に応じて可変） */
	padding-left: clamp(28px, 4vw, 80px);
	padding-right: clamp(28px, 4vw, 80px);
}

.kazari::before,
.kazari::after{
	content: "";
	position: absolute;
	top: 50%;
	/* 細いグレーのドット罫線 */
	width: 0;
	height: clamp(42px, 6vw, 110px);  /* 罫線の長さ */
	border-left: 2px dotted #9a9a9a;
	transform-origin: center;
	pointer-events: none;
}

/* 左端：\（左上→右下） */
.kazari::before{
	left: 0;
	transform: translateY(-50%) rotate(-18deg);
}

/* 右端：/（右上→左下） */
.kazari::after{
	right: 0;
	transform: translateY(-50%) rotate(18deg);
}










/* ========= 大阪医療大学の強みエリア ========= */



/* セクション共通（他と共用するならそのままでOK） */
.section-title{
  font-size:22px;
  margin:0 0 20px;
  border-left:6px solid var(--primary);
}



/* 強みセクション */
.strengths{
  background:#fff;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position: relative;
  /* overflow: hidden; 削除またはコメントアウト */

  /* section の共通 padding はそのままに、strengths だけ下余白を少し小さく */
  padding-bottom: calc(var(--space-large) * 0.2);
}

.strengths .section-title{
  margin-bottom:8px;
}

.strengths-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.strength-item{
  text-decoration: none;
  background:#e5f3ff;
  border-radius:var(--radius);
  padding:18px 44px 18px 10px;
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  position: relative;
  border:1px solid transparent;
  transition:
    background .15s,
    transform .1s,
    box-shadow .1s,
    border-color .15s;
  font-size:13px;
}

/* 強み：タイトル側の上下位置を中央寄せ（横2列でも揃えやすくする） */
.strength-item > div:nth-of-type(2){
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.strength-item:link,
.strength-item:visited,
.strength-item:hover,
.strength-item:active {
  text-decoration: none;
}

.strength-item:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  border-color:#004098;
}

.strength-number{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#004098;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:#fff;
  flex-shrink:0;
    font-family: "Oswald";
}

.strength-label-main{
  font-weight:bold;
  font-size:1.3rem;
  line-height: 2rem;
  letter-spacing: 0.1rem;
}

.strength-label-sub{
  font-size:1rem;
  color:#323232;
}

/* レスポンシブ（必要なら併せて使用） */
@media (max-width:960px){
  .strengths-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:520px){
  .strengths-list{
    grid-template-columns:1fr;
  }
}

.clear {
	display: block;
}











.list.up.upstyle {
  position: relative;
  counter-increment: article-counter;
}

.list.up.upstyle::before {
  content: counter(article-counter);
  position: absolute;
  top: clamp(-10px, -1.5vw, -5px);
  left: clamp(-30px, -4vw, -5px);

  /* ▼ 大きい画面では60pxで固定、狭い画面では5vwで縮み、最小32pxは維持 */
  width: clamp(40px, 5vw, 60px);
  height: clamp(40px, 5vw, 60px);

  background: #004098;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 文字サイズも同じく縮むが16px以下にはならない */
  font-size: clamp(18px, 2.5vw, 28px);
  color: #fff;
  z-index: 10;
  font-family: "Oswald";
}

/* 特定のボックスだけ左上の丸数字（カウンターバッジ）を非表示 */
.list.no-counter::before{
  content: none !important;
  display: none !important;
}
.list.no-counter{
  counter-increment: none;
}

.article-wrap {
  counter-reset: article-counter;
}

/* 奨学金リスト中央寄せ＋li左揃え */
.scholar-wrap {
  text-align: center;      /* 子要素のブロックを中央へ */
  width: 100%;
}

.scholar-list {
  display: inline-block;   /* 中央寄せのブロック化 */
  text-align: left;        /* li のテキストだけ左揃え */
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

.scholar-list li {
  margin: 0.2rem 0;
}



.section-title {
  font-size: clamp(26px, 4vw, 42px);
  color: #004098;       /* 共通の青 */
  font-weight: bold;
  margin-bottom: 1rem;
  width: 100%;
  display: block;
  letter-spacing: 0.1rem;
  line-height: 2.5rem;
}

/* 「独自の奨学金制度」：見出し直下の横幅いっぱい画像（awasete1/2） */
#detail-1 .awasete-banner{
  width: 100%;
  margin: 0 0 20px;
}

#detail-1 .awasete-banner img{
  display: block;
  width: 100%;
  height: auto;
}
.strength-item::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  background:#fff;
  border:2px solid #004098;
  box-sizing:border-box;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23004098' d='M7 10l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:28px 28px;
  pointer-events:none;
}





/* =========================================
   ライトボックス（画像クリックで拡大）
========================================= */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.lightbox.is-open{
  opacity: 1;
  pointer-events: auto;
}

.lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}

.lightbox__img{
  position: relative;
  z-index: 1;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  border-radius: 10px;
}

.lightbox__close{
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close:hover{
  filter: brightness(1.1);
}

/* クリック可能な画像にカーソル（アイコン系は除外） */

main figure:not(.icon):not(.no-lightbox) img{
  cursor: zoom-in;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 画像が拡大できることを示す虫眼鏡アイコン（右下） */
main figure:not(.icon):not(.no-lightbox){
  position: relative;
}
main figure:not(.icon):not(.no-lightbox)::after{
  content: "\f002"; /* magnifying glass */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;

  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;

  background: rgba(255,255,255,.88);
  color: #004098;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  pointer-events: none;
}

@media (max-width:600px){
  main figure:not(.icon):not(.no-lightbox)::after{
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
}

/* ライトボックス表示中は背景スクロールを止める */
body.is-lightbox-open{
  overflow: hidden;
}




/* ライトボックス（画像拡大）を画像ごとにON/OFF
 * ON：デフォルト（main 内 figure 画像）
 * OFF：<figure class="no-lightbox">…</figure>
 *************************************************/
/* クリック可能（拡大ON）の画像だけズームカーソル */
main figure:not(.icon):not(.no-lightbox) img{
  cursor: zoom-in;
}

/* 拡大OFFの画像はカーソルを通常に戻す */
main figure.no-lightbox img{
  cursor: auto;
}

/* 既存の虫眼鏡アイコン（疑似要素等）がある場合はOFFにする */
main figure.no-lightbox::after,
main figure.no-lightbox::before{
  content: none !important;
}










/* =========================================
   バーガーメニュー展開中：右下の目次ボタン（TOC）を下に隠す
   ※メニューを閉じたら元に戻る
========================================= */
body.is-menu-open .toc-fab{
  opacity: 0;
  pointer-events: none;
  transform: translateY(140%);
  transition: transform .2s ease, opacity .2s ease;
}

/* =========================================================
   入試情報タブ（スマホのみ）
   1行目：一般選抜（横幅いっぱい）
   2行目：社会人選抜／帰国生徒選抜（横2列）
   PCは既存のまま
========================================================= */
@media screen and (max-width:600px){
  /* tablist のレイアウトを折り返し可能に */
  #tablist{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
  }

  /* 2つ並びの基本（2列） */
  #tablist .tab{
    flex: 1 1 calc(50% - 6px);
    width: auto;
    min-width: 0;
  }

  /* 1つ目（一般選抜）だけ1行（100%） */
  #tablist .tab:nth-child(1){
    flex: 1 1 100%;
  }
}

/* =============================================================
   追い込み：他の .pagetop bottom 指定に負けないよう最終上書き
   （スマホ時のみ / 固定CTAの高さを基準にする）
============================================================= */
@media (max-width:600px){
  body .pagetop{
    bottom: calc(var(--fixed-cta-h, 92px) + 18px + env(safe-area-inset-bottom)) !important;
  }
}

/* =============================================================
   最終上書き：.pagetop の位置指定が別CSS/既存ルールに負ける場合の保険
   （スマホ時のみ / 固定CTAの高さ＋調整用ギャップで bottom を決定）
============================================================= */
@media (max-width:600px){
  html body div.pagetop{
    position: fixed !important;
    right: 12px !important;
    bottom: calc(var(--fixed-cta-h, 92px) + var(--pagetop-gap, 30px) + env(safe-area-inset-bottom)) !important;
    z-index: 2003 !important;
  }
}


/* PDFダウンロードリンク（汎用）
   使い方：<p class="pdf"><a href="...pdf">テキスト<i class="... pdf-icon"></i></a></p>
*/
.pdf a{
  color: var(--accent);            /* サイトの青(#004098)が入ってる変数 */
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pdf a:hover,
.pdf a:focus-visible{
  text-decoration: none;
}

.pdf a .pdf-icon{
  margin-left: .35em;
  font-size: 1.05em;
  vertical-align: -0.08em;
}