:root{
	--bg-color: #F6F6F6;
	--profile-border-width: 2px;
}

*{
	box-sizing: border-box;
}
html{
	font-size : 16px;
}
body{
	display: flex;
	flex-direction: column;
	justify-content: space-between;	

	padding : 0;
	margin : 0;

	height : 100svh;

	background-repeat: no-repeat;
	background-size: cover;
	background-image: linear-gradient(90deg, rgba(226, 254, 231, 1), rgba(217, 231, 254, 1));

	font-family: 'ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic',sans-serif;
}

main{
	height : 88svh;
	overflow-y:auto;
}

caption
{
	text-align: left;
	font-size : 1.75rem;
	font-weight: bold;

	margin-bottom: 0.5rem;
}

/* 画面最下部に固定するフッタ */
footer{
	display: flex;
	justify-content: center;
	align-items: center;
	
	background-color: var(--bg-color);

	height : 12svh;
	margin : 0;

	column-gap: 2rem;
}
footer a{
	display: block;
}
footer img{
	height : 10svh;
}

article{
	position: relative;

	height : 100%;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

table{
	border-collapse: collapse;
	border : 2px solid#D9D9D9;
	background-color: var(--bg-color);
}

th,td{
	border : 2px solid#D9D9D9;
	padding : 0.5rem;
}
th{
	background-color: #00B5D5;
	color : #FFFFFF;
}
img{
	display: block;
}

section.header
{
	display: flex;
	margin-top: 2rem;
}
section.header img{
	display: block;
	margin: 0 auto;

	width : 80%;
	max-width : 700px;
}
/* 各セクションのフッタ */
section.footer{
	display: flex;
	margin-bottom: 2rem;
}
section.footer img{
	height : 19svh;
	max-width : 900px;

	display: block;
	margin: 0 auto;
}

article#top section.header{	
	background-color : var(--bg-color);

	height : 6vh;
	min-height : 50px;

	margin: 0;
	padding : 0.5rem;

	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 0.5rem;	
}

/* TOPページのヘッダ：左部画像（ロゴ） */
article#top section.header > img:first-child{
	margin-right: auto;
	width : 30%;
	max-width: 250px;
}

img#bubble-01{
	top:15%;
	left:10%;
}

img#bubble-02{
	top:42%;
	left:8%;
}

img#bubble-03{
	top:75%;
	left:15%;

	height : 15%;
}

img#bubble-04{
	top:15%;
	right:10%;
}

img#bubble-05{
	top:42%;
	right:5%;
}

img#bubble-06{
	top:70%;
	right:15%;

	height : 18%;
}

img.breeze
{
	position: absolute;
	transform-origin:center;
}
img.active{
	transform: scale(1.3,1.3);
	transition: all 0.3s ease-out;
}
img.effected{
	transform: scale(1.6,1.6);
	transition: all 0.8s ease-out;
}
img.bubble{
	height : 20%;
}
img.top-logo{
	height : 25%;

	right:0;
	left:0;
	top : 25%;
	margin : 0 auto;

	transition: all 1.0s ease-out;
}
img.top-caption{
	
	right:0;
	left:0;
	top : 55%;

	height : 12%;

	margin : 0 auto;

	transition: all 1.0s ease-out;
}
img.top-consultation{
	height : 5%;

	right:0;
	left:0;
	top : 85%;

	margin : 0 auto;
}

/*
	こんなお悩みありませんか？
*/
#problems section.problem-examples{
	width : 100%;
	margin: 0 auto;

	display: flex;    
	justify-content: center;
	
	flex-wrap: wrap;

	column-gap: 5rem;
	row-gap: 5rem;
}
#problems section.problem-examples > img
{
	width : 15%;
}

/*
	プラン一覧
	※ プラン一覧に限り、コンテンツを１画面に収めない
*/
#plan-list{	
	height : 100svh;
	max-height : 100svh;
}
#plan-list section.plans{

	background-color: var(--bg-color);

	border-radius: 1.5rem;
	padding : 1rem;

	width : 90%;
	max-width : 1200px;

	margin: 0 auto;

	display: flex;
	justify-content: center;
	align-items: center;
	
	flex-grow: 0.9;
}

#plan-list section.plans table{
	width : 100%;
	height : 80%;
}

#plan-list section.plans table th{
	word-break: keep-all;
	overflow-wrap: break-word;
}

#plan-list section.plans table thead th{
	padding : 0.25rem 0;	
}
#plan-list section.plans table tbody th{
	padding : 0.2rem 0;
	width: 240px;
	max-width: 240px;
}

#plan-list section.plans table tbody td{
	text-align: center;
	font-size : 1.25rem;
	padding : 0;

	text-shadow:
		0.5px 0.5px 1px #005BAB,
		-0.5px -0.5px 1px #005BAB,
		0.5px 0px 1px #005BAB,
		0.5px 0.5px 1px #005BAB;

	color : #005BAB;
}

#plan-list section.plans table tbody th > div{
	font-weight: normal;
	margin : 0;
	font-size: 70%;
}

#plan-list section.plans table td.recommend{
	text-align: left;
	font-size : 0.8rem;
	font-weight: bold;
	color : #000000;
}

#plan-list section.plans table tfoot{
	border : solid 0.4rem #00547F;
}

/*
	講師紹介
*/
#lecturer-profile
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	opacity: 0;
	transition: all 1.0s ease-out;
}

#lecturer-profile.effected{
	opacity: 1;
}

#lecturer-profile > section{
	height : 100%;

	display: flex;
	align-items: center;
}

section.container{
	height : 80%;
	padding : 2rem;
}

section.profile-photo{
	width : 85%;

	display: flex;
	justify-content: center;
	align-items: center;

	border-top : solid var(--profile-border-width) #00547f;
	border-left : solid var(--profile-border-width) #00547f;
	border-bottom : solid var(--profile-border-width) #00547f;	
}
section.profile-photo > img{
	width : 20vw;
}

section.infomation{

	width : 90%;

	display : flex;
	flex-direction : column;
	justify-content : space-around;

	color : #FFFFFF;

	border-top : solid var(--profile-border-width) #F9F9F9;
	border-right : solid var(--profile-border-width) #F9F9F9;
	border-bottom : solid var(--profile-border-width) #F9F9F9;

}

section.infomation .introduction
{
	font-size : 2rem;
}

section.infomation .introduction em{
	font-style: normal;
	color : #C2FF40;
}

section.infomation .name{
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size : 3rem;
}
section.infomation .career{
	font-size : 1.2rem;
}

section.infomation .career dl{	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
section.infomation .career dt,
section.infomation .career dd{
	margin: 0;
	padding: 0;
}
section.infomation .career dt{
	width : 15%;
}
section.infomation .career dd{
	width : 85%;
}

img.footer-check{
	margin-top: auto;
	height : 70%;
	margin-right : 1rem;
}

/*
	他スクールとの比較
*/
#comparison table
{
	width : 80%;

	margin: 2rem auto;	

	text-align: center;
	font-size : 1.25rem;

	flex-grow: 1;
}
#comparison table thead th:first-child
{
	width : 14rem;	
}
#comparison table th{
	background-color: #005BAB;
}
#comparison table td{
	/*padding : 1rem 1rem;*/	
}
#comparison table td.pick-up{
	font-weight: bold;
}
#comparison section.footer{
	height : 6rem;
}
#comparison section.footer img{
	position: absolute;
	right : 3%;
	bottom : 3%;

	height : 6rem;
	width : auto;
	
}

/* ----------------------------
	縦画面（スマホ用）
----------------------------*/
@media (orientation: portrait) {

	html{
		font-size : 8px;
	}
	main{
		height : 90svh;
	}
	footer{
		height : 10svh;
	}
	footer img{
		width : 45vw;
		height : auto;
	}

	/* 横向きのみ表示する画像は非表示 */
	img.landscape-only{
		display: none;
	}	

	img.bubble{    
		height : 12%;
	}
	/* 左上吹き出し */
	img#bubble-01{
		top:15%;
		left:22%;
	}
	img#bubble-02{
		top:28%;
		left:8%;
	}
	img#bubble-03{
		top:67%;
		left:5%;

		height : 10%;
	}
	/* 右上吹き出し */
	img#bubble-04{
		top:15%;
		right:20%;
	}
	img#bubble-05{
		top:30%;
		right:8%
	}
	img#bubble-06{
		top:67%;
		right:10%;

		height : 10%;
	}

	img.top-logo{
		height : 15%;	
		top : 35%;
	}
	img.top-caption{
		top : 53%;
		height : 8%;
	}

	section.footer img{
		height : auto;
		width : 90svw;
		/*max-width : 380px;	*/
	}

	/* こんな悩み有りませんか？ */
	#problems section.problem-examples > img
	{
		width : 35%;
	}

	/* プランの一覧 */
	#plan-list section.plans{
		width : 100%;
		padding : 2rem 0.5rem;
		border-radius: 0;
	}

	#plan-list section.plans table thead th{
		padding : 2rem 0;
		font-size : 1rem;
	}

	#plan-list section.plans table tbody th{
		padding : 0;
		width : 9rem;
		max-width : 9rem;
	}
	
	#plan-list section.plans table tbody td{
		padding : 2rem 0;
	}

	#plan-list section.plans table td.recommend{
		text-align: left;
		font-size : 0.7rem;
	}

	section.container{
		
	}
	section.profile-photo > img{
		width : 30vw;
	}
	section.infomation .career dt{
		width : 100%;
	}
	section.infomation .career dd{
		width : 100%;
		margin-bottom : 1rem;
		font-size : 1rem;
	}

	#comparison table{
		width : 95%;
		font-size : 1.2rem;
	}

	/* 他スクールとの比較 */
	#comparison table thead th:first-child
	{
		width : 11rem;	
	}
	
}

@media (min-height:1024px) {
	html{
		font-size : 18px;
	}	
}