/* 共通
------------------------------------------------------------*/
html {
	scroll-padding-top: 70px;
	scroll-behavior: smooth;
}

a {
	color: #E57F11;
	text-decoration: none;
}


a:active,
a:focus,
input:active,
input:focus {
	outline: 0;
}

img {
	max-width: 100%;
	height: auto;
}

.fsM {
	font-size: 24px;
	display: block;
}

.fsS {
	font-size: 12px;
	display: block;
}

.fsSS {
	font-size: 1rem;
}

.colRed {
	color: #d93f3f;
}

.fwB {
	font-weight: bold;
}

.alC {
	text-align: center;
}

ul.list-clr-disc {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 20px;
}
ul li::marker {
    color: #e57f11;
}

section {
	clear: both;
	padding-top: 70px;
}

section h2 {
	margin: 20px auto;
	padding: .5% 1.5%;
	font-size: 24px;
	font-weight: bold;
	background: #FFEFDD;
	color: #E57F11;
}

section h2 span {
	font-size: 12px;
	font-weight: normal;
	padding-left: 1em;
	color: #000;
}


h3 {
	font-weight: bold;
	color: #E57F11;
	font-size: 16px;
	margin-top: 1em;
	font-weight: bold !important;
}

.txt {
	padding: .4em 1em 1em;
}

.pc_only {
	display: block;
}

.sp_only {
	display: none !important;
}

@media screen and (max-width:768px) {
	.pc_only {
		display: none !important;
	}

	.sp_only {
		display: block !important;
	}
}

/* ヘッダー
------------------------------------------------------------*/
#header {
	background-color: #ffffff;
}

/* ロゴ */
.header__logo {
	width: 100%;
}

.header__logo a {
	display: block;
	width: 100%;
	height: auto;
}

.header__logo a:hover {
	background: none;
	transition: all 0.2s ease;
}

.header__hamburger {
	z-index: 100;
	position: absolute;
	top: 10px;
	right: 0;
	width: 70px;
	height: 100%;
}

@media screen and (min-width:769px) {
	.header__hamburger {
		display: none;
	}
}

/* ナビゲーションメニュー */
.header__nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	transition: 0.6s;
	margin-top: 10px;
	background: #E57F11;
}

@media screen and (max-width:768px) {
	.header__nav {
		z-index: 10;
		position: absolute;
		top: 60px;
		right: -100%;
		width: auto;
		height: auto;
		background: transparent;
		opacity: 0;
	}
}

.header__inner {
	padding: 13px 0 0;
	text-align: center;
}


@media screen and (max-width:768px) {
	.header__inner {
		padding: 13px 0;
	}

	.nav {
		padding-top: 0;
		padding-bottom: 0;
	}
}

.nav__list {
	display: block;
	width: 100%;
}

@media screen and (min-width:768px) {
	.nav__list {
		display: flex;
		padding-right: 0;
		background: #E57F11;
	}
}

.nav__item {
	position: relative;
	border-right: 1px solid #ffffff;
}

.nav__item:first-child {
	border-left: 1px solid #ffffff;
}

.nav__link {
	color: #ffffff;
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 1.4em 3.6em;
}

a.nav__link:hover,
.active {
	text-decoration: none;
	color: #ffffff !important;
	background: #F28611;
}

@media screen and (max-width:768px) {
	.nav__link {
		text-align: left;
		padding: 10px 20px;
		border-bottom: 1px solid #fff;
	}

	.nav__item:first-child {
		border-left: none;
	}

	.nav__item {
		border-right: none;
		padding: 0;
	}
}


/* ハンバーガーメニュー */
.hamBtn {
	position: relative;
	width: 50px;
	height: 50px;
	margin: 0;
	cursor: pointer;
	background: #E57F11;
	border: none;
	border-radius: 8px;
}

.hamBtn span {
	display: block;
	position: relative;
	left: 50%;
	width: 30px;
	height: 2px;
	transform: translateX(-50%);
	background: #FFFFFF;
	transition: all 0.4s;
}

.hamBtn span:nth-of-type(1) {
	top: -10%;
}

.hamBtn span:nth-of-type(2) {
	top: 0;
}

.hamBtn span:nth-of-type(3) {
	top: 10%;
}

.hamBtn.is-active span:nth-of-type(1) {
	top: 0;
	transform: translateX(-50%) rotate(225deg);
}

.hamBtn.is-active span:nth-of-type(2) {
	opacity: 0;
}

.hamBtn.is-active span:nth-of-type(3) {
	top: -4px;
	transform: translateX(-50%) rotate(-225deg);
}

/* ハンバーガーメニューが開いた時 */
.header__nav.is-active {
	position: fixed;
	top: 60px;
	right: 0;
	background: #E57F11;
	opacity: 1;
	transition: 1s;
}


/* メインビジュアル
------------------------------------------------------------*/
.wrapper-flex {
	justify-content: space-between;
}

.mainLeft {
	width: 50% !important;
	background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7)),
		url(../images/main.png);
	background-size: cover;
	min-height: 260px;
	margin-right: 0 !important;
}

@media only screen and (max-width: 768px) {
	.mainLeft {
		display: none;
	}

	.mainRight {
		width: 100% !important;
	}
}

.mainLeft h2 {
	font-size: 38px;
	font-weight: bold;
	color: #E57F11;
	padding: 20px;
	padding-left: 12px;
	line-height: 1.4;
}

.mainLeft p {
	padding-top: 30px;
	padding-left: 12px;
	line-height: 1.4;
}

.title-bgC {
	background-color: rgba(253, 230, 203, 0.5);
    margin-top: 50px;
}

@media only screen and (max-width: 768px) {
	#sp_main {
		width: 100% !important;
		background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
			url(../images/main.png);
		background-size: cover;
	}

	#sp_main h2 {
		font-size: 34px;
		font-weight: bold;
		color: #E57F11;
		padding-top: 50px;
		padding-left: 12px;
		line-height: 1.4;
	}

	#sp_main p {
		padding-top: 20px;
		padding-left: 12px;
		line-height: 1.4;
	}
}

.mainRight {
	width: 48%;
	padding: 2% 0;
}

.mainRight .box {
	border: 2px solid #FFEFDD;
	padding: 1em;
}

.mainRight .box span {
	display: inline-block;
	font-size: 11px;
}

/*　MVボタン横並び　*/
.btnList {
	margin-top: 1.5em;
	display: flex;
	justify-content: center;
}

.btnList a {
	display: inline-block;
	width: 222px;
	padding: 14px;
	color: #fff;
	line-height: 1.4;
	font-weight: 600;
	text-align: center;
	border-radius: 8px;
	background: #E57F11;
	transition-duration: 0.2s;
}

.btnList li:nth-child(1) {
	margin: 0 1.2em 0 0;
}

.btnList a:hover {
	color: #fff;
	background-color: #E57F11;
	transform: scale(1.05);
}

@media only screen and (max-width: 1241px) {
	.btnList a {
		width: 208px;
	}
}

@media only screen and (max-width: 1004px) {
	.btnList a {
		width: 160px;
	}
}

@media only screen and (max-width: 768px) {
	.btnList {
		margin-top: 1.5em;
		display: flex !important;
		justify-content: center;
	}

	.btnList a {
		width: 182px;
	}

	.btnList li {
		margin-bottom: 1em;
		flex: 1;
	}

	.btnList li:nth-child(1) {}
}

@media only screen and (max-width: 640px) {
	.btnList {
		margin-top: 1.5em;
		display: flex;
		justify-content: center;
	}

	.btnList a {
		width: 100%;
	}
}

a.link {
	color: #1A0DAB;
	text-decoration: underline;
	transition:.3s;
}

a.link:hover{
	color:#E57F11 !important;
	text-decoration: underline;
	transition:.3s;
}

/* フッター
------------------------------------------------------------*/
#footer {
	clear: both;
	padding: 10px;
	background: #E57F11 !important;
	text-align: center;
	font-size: 12px;
	color: #fff;
}

.pagetop a {
	position: fixed;
	bottom: 35px;
	right: 0;
	color: #fff;
	background: #E57F11 url(https://gakken-meds.jp/wp/wp-content/themes/gakken-meds/images/common/arrow01_3.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px auto;
	transform: rotate(-90deg);
	border-radius: 5px;
	width: 50px;
	height: 50px;
	font-weight: bold;
	line-height: 2.4;
}
@media only screen and (max-width: 640px) {
	.pagetop a {
		right: 12px;
		bottom: 12px;
	}
}

.pagetop a:hover {
	text-decoration: none;
}


/* レスポンシブ設定
------------------------------------------------------------*/
.inner {
	max-width: 940px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 768px) and (max-width: 1270px) {
	.inner {
		width: 90%;
	}
}

@media only screen and (min-width: 800px) {
	body {
		font-size: 14px;
	}
}

@media only screen and (max-width: 640px) {
	.innerS {
		width: 94%;
		padding-bottom: 70px;
	}
}

@media only screen and (max-width: 799px) {
	#header {
		position: fixed;
		width: 100%;
		z-index: 500;
		border-bottom: 1px solid #999;
	}

	#header h1 img {
		max-height: 46px;
		width: auto !important;
		float: left;
		margin-bottom: 10px;
		margin-left: 16px;
	}
}

/* タブ切り替え 設定
------------------------------------------------------------*/

.tabs {
	width: 100%;
	margin: 2em auto;
}

.tab_item {
	width: calc(100%/2);
	height: 50px;
	background-color: #d9d9d9;
	line-height: 50px;
	font-size: 16px;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
	border-radius: 10px 10px 0 0;
	border-top: 1px solid #E57F11;
	border-left: 1px solid #E57F11;
	border-right: 1px solid #E57F11;
	top: 2px;
	position: relative;
}

.icon01 {
	background: url(../images/ico_human.png) no-repeat 40% 12px;
	background-size: 24px 24px;
}

.icon02 {
	background: url(../images/ico_bill.png) no-repeat 40% 12px;
	background-size: 24px 24px;
}


/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 40px;
	clear: both;
	overflow: hidden;
	border: 1px solid #E57F11;
}

/*選択されているタブのコンテンツのみを表示*/
#personal:checked~#personal_content,
#corporation:checked~#corporation_content {
	display: block;
	background-color: #FFEFDD;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked+.tab_item {
	background-color: #FFEFDD;
	color: #000;
	border-bottom: 4px solid #FFEFDD;
}

/*タブ切り替え内の表組み*/
.tblStyle02 {
	background: #fff;
	margin: 0 0 1em;
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #d8d8d8;
}

.tblStyle02 th {
	font-weight: bold;
	padding: .8em;
	text-align: left;
	background: #F8F8F8;
	border: 1px solid #d8d8d8;
}

.tblStyle02 td {
	padding: .8em;
	border: 1px solid #d8d8d8;
}

#contact {
	margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
	.tab_item {
		width: calc(100%/2);
	}

	.tab_content {
		padding: 20px;
	}
}

@media screen and (max-width: 425px) {
	.tab_content {
		padding: 10px;
	}
}

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

	.icon01,
	.icon02 {
		background-position: 20% center;
	}
}

/* お申し込みから受講開始の流れ
------------------------------------------------------------*/
.flow_design {
	margin-top: 1em;
	margin-bottom: 3em;
}

.flow {
	padding-left: 0;
}

.flow>li {
	list-style-type: none;
	display: flex;
}

.flow>li:not(:last-child) {
	margin: 0 0 50px;
}

.flow>li .icon07 {
	width: 92px;
	box-sizing: border-box;
	padding: 20px 10px 10px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	background: #E57F11;
	position: relative;
	line-height: 125%;
	margin: 0;
}

.flow>li .icon07::after {
	content: ' ';
	width: 0;
	height: 0;
	border-left: 43px solid transparent;
	border-right: 43px solid transparent;
	border-top: 21px solid #E57F11;
	position: absolute;
	bottom: -20px;
	left: 0;
}


@media screen and (max-width: 768px) {
	.flow>li .icon07 {
		width: 40px;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}

	.flow>li .icon07::after {
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
	}
}


.flow>li dl {
	width: 100%;
}

.flow>li dl dt {
	padding: 0 1em 5px;
	margin: 0 0 15px -2px;
	font-size: 1.2em;
	font-weight: bold;
	border: 1px solid #E57F11;
}

.flow>li dl dt::after {
	content: '';
	width: 20%;
	height: 4px;
	position: absolute;
	bottom: -4px;
	left: 0;
}

.flow>li dl dd {
	margin: 0;
	padding-left: 1em;
}

.inContentAll {
	padding: 0.5em;
	display: flex;
	justify-content: space-between;
	justify-items: center;
}

.inContentLeft {
	margin-right: 1em;
	width: 50%;
}

.inContentRight {
	width: 50%;
}

.inContentLeft ul,
.inContentRight ul {
	border: 3px solid #FFEFDD;
	padding: .5em;
}

.inContentLeft h3 {
	background: url(../images/ico_human.png) no-repeat left center;
	background-size: 24px 24px;
	color: #282828;
	padding: 0 0 .5em 2.5em;
}

.inContentRight h3 {
	background: url(../images/ico_bill.png) no-repeat left center;
	background-size: 24px 24px;
	color: #282828;
	padding: 0 0 .5em 2.5em;
}

.inContentLeft span,
.inContentRight span {
	display: inline-block;
	line-height: 1.85;
}

@media screen and (max-width: 900px) {
	.inContentAll {
		padding: 0.5em;
		display: block;
	}

	.inContentLeft {
		margin: 0 0 1em;
		width: 100%;
	}

	.inContentRight {
		width: 100%;
	}

	.inContentLeft ul,
	.inContentRight ul {
		border: 3px solid #FFEFDD;
		padding: .5em;
	}

	.inContentLeft h3 {
		background: url(../images/ico_human.png) no-repeat left center;
		background-size: 24px 24px;
		color: #282828;
		padding: 0 0 .5em 2.5em;
	}

}


@media screen and (max-width: 425px) {
	.flow>li .icon07::after {
		border-left: 38px solid transparent;
		border-right: 38px solid transparent;
	}
}

/* ボタン（水色中央寄せアイコン有り）
------------------------------------------------------------*/

.btnBlue {
	background: #F28611
		/*url(../images/ico_arrow_up.png) no-repeat 90% center*/
	;
	background-size: 20px auto;
	padding: .4em 3em;
	color: #fff;
	border-radius: 6px;
	font-size: 20px;
	font-weight: bold;
	margin: 1em auto 0;
	display: inline-block;
	transition: transform .2s ease;
}

.btnBlue:hover {
	transform: scale(1.05);
	color: #ffffff;
	background: #F28611
		/*url(../images/ico_arrow_up.png) no-repeat 90% center*/
	;
	background-size: 20px auto;
}

@media screen and (max-width: 425px) {
	.btnBlue {
		padding: .6em 1em;
		width: 100%;
		font-size: 20px;
	}
}


/* ボタンOFF
------------------------------------------------------------*/

.btnOff {
	background: #b1b1b1;
	background-size: 20px auto;
	padding: .4em 3em;
	color: #fff;
	border-radius: 6px;
	font-size: 20px;
	font-weight: bold;
	margin: 1em auto;
	display: inline-block;
}

@media screen and (max-width: 425px) {
	.btnOff {
		padding: .6em 1em;
		width: 100%;
		font-size: 20px;
	}
}



/*　下線のみの表組み
-------------------------------------------------------*/
.tblStyle01 {
	background: #fff;
	margin: 1em 0;
	width: 100%;
}

.tblStyle01 th {
	font-weight: bold;
	padding: .8em;
	text-align: left;
	border-bottom: 1px solid #d8d8d8;
	width: 12em;
}

.tblStyle01 td {
	padding: .8em;
	border-bottom: 1px solid #d8d8d8;
	width: calc(100% - 	12em);
}


@media (max-width: 576px) {
	.tblStyle01 {
		margin: 0 0 1em;
	}

	.tblStyle01 th,
	.tblStyle02 th {
		border-bottom: none;
		padding: .8em 0 0 .8em;
		width: 100%;
	}

	.tblStyle01 td,
	.tblStyle02 td {
		padding: 0 0 .8em .8em;
		width: 100%;
	}

	th,
	td {
		display: inline-block;
		width: 100%;
		float: left;
	}
}

/*　よくある質問
-------------------------------------------------------*/
.faq-box {
	margin-top: 20px;
}

.faq-box dt {
	display: block;
	position: relative;
	padding: 15px 60px 15px 60px;
	color: #282828;
	font-weight: 700;
	border-radius: 8px;
	background: #f7f7f7;
	cursor: pointer;
}

.faq-box dt:hover {
	color: #282828;
	background: #FFEFDD;
}

.faq-box dt::before {
	content: "Q";
	position: absolute;
	top: 17px;
	left: 15px;
	width: 30px;
	height: 30px;
	line-height: 26px;
	font-size: 1.4rem;
	font-family: gill-sans-nova, sans-serif;
	font-weight: 500;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	background-color: #E57F11;
}

.faq-box dt:hover::before,
.faq-box dt.active::before {
	color: #fff;
}

.faq-box dt::after {
	content: "";
	position: absolute;
	top: 24px;
	right: 15px;
	width: 20px;
	height: 20px;
	border-radius: 25px;
	background-image: url("https://gakken-meds.jp/wp-data/common/icon_toggle01.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px auto;
}

.faq-box dt.active {
	color: #282828 !important;
	border-radius: 8px 8px 0 0;
	background: #FFEFDD;
}

.faq-box dt.active::after {
	background-image: url("https://gakken-meds.jp/wp-data/common/icon_toggle02.png");
}

.faq-box dd {
	position: relative;
	display: none;
	padding: 15px 20px 15px 60px;
	border: 1px solid #eaf5ed;
	border-top: 0;
	border-radius: 0 0 8px 8px;
}

.faq-box dd::before {
	content: "A";
	position: absolute;
	top: 17px;
	left: 15px;
	width: 30px;
	height: 30px;
	line-height: 26px;
	font-size: 1.4rem;
	font-family: gill-sans-nova, sans-serif;
	font-weight: 500;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	background-color: #b7b7b7;
}


@media screen and (min-width: 768px) and (max-width: 1270px) {
	.faq-box dt::before {
		top: 14px;
	}

	.faq-box dt::after {
		top: 19px;
		right: 10px;
		background-size: 16px auto;
	}

	.faq-box dd::before {
		top: 14px;
	}
}

@media screen and (max-width: 767px) {
	.faq-box {
		margin-top: 20px;
	}

	.faq-box dt {
		padding: 10px 45px 10px 52px;
	}

	.faq-box dt::before {
		top: 10px;
		left: 10px;
	}

	.faq-box dt::after {
		top: 14px;
		right: 10px;
		background-size: 16px auto;
	}

	.faq-box dd {
		padding: 15px 20px 10px 52px;
	}

	.faq-box dd::before {
		top: 10px;
		left: 10px;
	}

}

/*　臨時アナウンス欄
-------------------------------------------------------*/
.attention {
	margin: 2rem auto;
	border: 3px solid #FFBB00;
	padding: 1rem 1.4rem;
}

@media screen and (max-width: 768px) {
	#header {
		top: 0;
	}

	.attention {
		margin: 2rem auto;
		padding: 1rem 1.4rem;
	}
}