@charset "utf-8";

/*レスポンシブ用雛形　使うところにコピペ*/
/*
@media screen and (max-width: 560px) {
    /*　スマホの時ここを読み込む　
}
@media screen and (min-width: 768px) {
    /*　画面サイズが768px以上からはここを読み込む　
}
@media screen and (min-width: 960px) {
    /*　画面サイズが960px以上からここを読み込む　
}
@media screen and (min-width: 1200px) {
    /*　画面サイズが1200px以上からはここを読み込む　
}
*/
/*　フォントサイズの計算式　*/
/*　https://modern-fluid-typography.vercel.appで数値設定して、clamp以下をコピペ
例）font-size: clamp(2.6rem, 1.8vw + 1rem, 3.2rem);
*/
/* -------------------------------------
CSS変数
--------------------------------------*/
:root {
    --scroll-bar-width: 0px;
    --VW100: calc(100vw - var(--scroll-bar-width));
    --containerMax: 192rem;
    --contentMax: 120rem;
    --courseTabHeight : 80px;
    --White: #fff;
    --Pink: #dd56a5;
	--Blue: #0071dd;
    --LightBlue: #66aaeb;
    --Green: #1ea039;
    --Gray: #eeeeee;
    --Orange: #ffae00;
    --Yellow: #ffe600;
    --Red: #db0012;
    --LightGreen: #4ecc56;
    --Font12: 1.2rem;
    --Font13: 1.3rem;
    --Font14: 1.4rem;
    --Font16: 1.6rem;
    --Font18: 1.8rem;
    --Font20: 2rem;
    --Font22: 2.2rem;
    --Font24: 2.4rem;
    --Font28: 2.8rem;
    --Font32: 3.2rem;
    --Font34: 3.4rem;
    --Font36: 3.6rem;
    --Font50: 5rem;
    --Font80: 8rem;
    --Font10-14: clamp(1rem, 1vw + 0.35rem, 1.4rem);
    --Font12-16: clamp(1.2rem, 1vw + 0.5rem, 1.6rem);
    --Font14-16: clamp(1.4rem, 0.75vw + 1rem, 1.6rem);
    --Font16-18: clamp(1.6rem, 1vw + 1rem, 1.8rem);
    --Font16-20: clamp(1.6rem, 1vw + 1.1rem, 2rem);
    --Font16-22: clamp(1.6rem, 0.8vw + 1rem, 2.2rem);
    --Font18-26: clamp(1.8rem, 2vw + 1rem, 2.6rem);
    --Font18-22: clamp(1.8rem, 1vw + 1.25rem, 2.2rem);
    --Font20-24: clamp(1.8rem, 1vw + 1.25rem, 2.4rem);
    --Font20-26: clamp(2rem, 2vw + 1rem, 2.6rem);
    --Font22-30: clamp(2.2rem, 1.8vw + 1rem, 3rem);
    --Font24-32: clamp(2.4rem, 2vw + 1.25rem, 3.2rem);
    --Font24-36: clamp(2.4rem, 2vw + 1.5rem, 3.6rem);
    --Font28-36: clamp(2.8rem, 2vw + 1.75rem, 3.6rem);
    --Font_Family: "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
}
/* -------------------------------------
　表示切り替え
--------------------------------------*/
@media screen and (max-width: 560px) {
    /*　スマホの時は非表示　*/
    .spnone {
        display: none;
    }
}
@media screen and (min-width: 561px) and (max-width: 768px) {
    /*　タブレット時は非表示　*/
    .sp_tabletnone {
		display: none;
	}
}
@media screen and (min-width: 769px) {
    /*　スマホ・タブレットより大きい時は非表示　*/
    .pcnone {
		display: none;
	}
}
/* -------------------------------------
　表示幅、ボディー
--------------------------------------*/
body, html {
	line-height: 1.6;
	letter-spacing: 0.05rem;
	display: block;
	width: auto;
	height: 100%;
}
html {
	font-size: 62.5%;
}
body {
	margin: 0 !important;
	color: #333;
	font-size: 1.6rem;
}
body, button, input, select, textarea {
    font-family: "segoe ui",meiryo,"yu gothic","hiragino kaku gothic pron",sans-serif
}
#container {
    width: 100%;
    max-width: var(--containerMax);
    margin-left: auto;
    margin-right: auto;
}
.sectionWidth {
    width: 100%;
    max-width: var(--contentMax);
    margin-left: auto;
    margin-right: auto;
}
.contentInner {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.overFlowContents {
    width: 100%;
    max-width: var(--contentMax);
    margin-right: calc(50% - (var(--VW100) / 2));
    margin-left: calc(50% - (var(--VW100) / 2));
    padding-right: calc((var(--VW100) / 2) - 50%);
	padding-left: calc((var(--VW100) / 2) - 50%);
    overflow-x: hidden;
}
.lr-center {
    margin-right: auto;
    margin-left: auto;
}
.widthFitContent {
    width: fit-content;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
/*　マージン　*/
.common_margin {
    margin: 0 1.5rem;
}
@media screen and (min-width: 960px) {
    .common_margin {
        margin: 0 10%;
    }
}
.mT10 {
	margin-top: 1rem;
}
.mR20 {
    margin-right: 2rem;
}
.mB10 {
	margin-bottom: 1rem;
}
.mB20 {
	margin-bottom: 2rem;
}
.mB30 {
	margin-bottom: 3rem;
}
.mB40 {
	margin-bottom: 4rem;
}
.mB50 {
	margin-bottom: 5rem;
}
.mB60 {
	margin-bottom: 6rem;
}
.mB80 {
	margin-bottom: 8rem;
}
.mB100 {
	margin-bottom: 10rem;
}
.mL10 {
    margin-left: 1rem;
}
/*　パディング　*/
.pD10 {
    padding: 1rem
}
.pT10 {
    padding-top: 1rem
}
.pT40 {
    padding-top: 4rem
}
.pB10 {
    padding-bottom: 1rem
}
.pL10 {
    padding-left: 1em;
}
h2 {
    text-align: center;
    font-weight: bold;
}
h3 {
    text-align: center;
    font-weight: bold;;
}
/* -------------------------------------
　テキスト関係
--------------------------------------*/
/*　改行制御　*/
.newLineControl {
    word-break: keep-all;
    overflow-wrap: break-word;
}
.font12{
	font-size: var(--Font12);
}
.font14 {
	font-size: var(--Font14);
}
.font16 {
	font-size: var(--Font16);
}
.font18 {
	font-size: var(--Font18);
}
.font20 {
	font-size: var(--Font20);
}
.font22 {
	font-size: var(--Font22);
}
.font28 {
    font-size: var(--Font28);
}
.font32 {
    font-size: var(--Font32);
}
.font34 {
    font-size: var(--Font34);
}
.font36 {
    font-size: var(--Font36);
}
.font50 {
	font-size: var(--Font50);
}
.font80 {
	font-size: var(--Font80);
}
/*　フォントを可変サイズにする　*/
.font14-16 {
	font-size: var(--Font14-16);
}
.font16-18 {
	font-size: var(--Font16-18);
}
.font16-20 {
	font-size: var(--Font16-20);
}
.font16-22 {
	font-size: var(--Font16-22);
}
.font18-26 {
	font-size: var(--Font18-26);
}
.font18-22 {
	font-size: var(--Font18-22);
}
.font20-24 {
	font-size: var(--Font20-24);
}
.font22-30 {
	font-size: var(--Font22-30);
}
.font20-26 {
	font-size: var(--Font20-26);
}
.font24-32 {
	font-size: var(--Font24-32);
}
.fontB {
	font-weight: bold;
}
.fontM {
	font-weight: 500;
}
.fontN {
	font-weight: normal;
}
/*　中央揃え　*/
.textCenter {
	text-align: center;
}
/*　右詰め　*/
.textRight {
	text-align: right;
}
/*　均等割り付け　*/
.textJustify {
	text-align: justify;
}
/*　テキスト修飾用　*/
.textOrange {
	color: var(--Orange);
}
.textGreen {
	color: var(--Green);
}
.textBlue {
	color: var(--Blue);
}
.textWhite {
	color: var(--White);
}
.lineYellow{
	background: linear-gradient(transparent 65%, var(--Yellow) 0%);
}
.highlight {
    font-weight: bold;
    color: var(--Red);
    border-bottom: 1px solid var(--Red);
}
.listText li {
    padding-left: 1em;
    text-indent: -1em;
}
.common_List {
    padding-left: 1em;
    text-indent: -1em;
    text-align: justify;
}
.textDecoNone {
    text-decoration: none;
}
/* -------------------------------------
　線
--------------------------------------*/
.bBdot {
    border-bottom: dotted 1px gray;
}
/* -------------------------------------
　画像関係
--------------------------------------*/
.img_Max100 img {
	max-width: 100%;
	height: auto;
}
.img_W100 img {
	width: 100%
}
.esip_email img {
    width: 100%;
    max-width: 28.5rem;
    margin: 0 0.5rem;
    vertical-align: middle;
}
/* --------------------------------------------------------------
　表（タブレットより小さい時は縦並びに）
-------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	table.common_tbl tr,
	table.common_tbl th,
	table.common_tbl td {
		display: block;
		width: auto;
		white-space: normal; /*　折り返す　*/
        line-break: anywhere;
        word-break: break-all;
		border: none; /*　線をリセット　*/
		text-align: left;
	}
}
/*中央配置　*/
.centerAlign {
    display: flex;
    justify-content: center;
    align-items: center;
}
.common_flex {
	display: flex;
	flex-wrap: wrap;
}
.flex_col2 {
	width: 50%;
    padding: 0 1rem;
}
@media screen and (min-width: 769px) {
	.flex_col3 {
		width: 33.3%;
        padding: 0 1rem;
	}
}
@media screen and (min-width: 960px) {
	.flex_col4 {
		width: 25%;
	}
}
/* -------------------------------------
　カラー
------------------------------------- */
.Pink {
    color: var(--Pink);
}
.Blue {
    color: var(--Blue);
}
.Green {
    color: var(--Green);
}
.Yellow {
    color: var(--Yellow);
}
.White {
    color: var(--White);
}
.Red {
    color: var(--Red);
}
.bgPink {
    background-color: var(--Pink);
}
.bgBlue {
    background: var(--Blue);
}
.bgGreen {
    background: var(--Green);
}
.bgWhite {
    background: var(--White);
}
.bgLightBlue {
    background: var(--LightBlue);
}
.bgLightGreen {
    background: var(--LightGreen);
}
.bgYellow {
    background: var(--Yellow);
}
.bgRed {
    background: var(--Red);
}
.baseBorderPink {
    border: solid 2px #dd56a5;
}
.bgGradePink {
    background: linear-gradient(to right,#d66c8a, #fff 50%, #d66c8a);
}
.bgGradeBlue {
    background: linear-gradient(to right, var(--Blue), #fff 50%, var(--Blue));
}
.bgColorPink {
    padding-bottom: 4rem;
    background: #f2bcbe;
    position: relative;
    z-index: 1;
}
.color_W {
    color: #eba8c3;
}
.color_I {
    color: #abcae4;
}
.color_N {
    color: #f7cbcb;
}
.color_K {
    color: #e1829e;
}
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--VW100);
    height: 100vh;
    z-index: 1000;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fadeOut 3.5s 3.5s forwards;
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
.loading p {
    padding: 0 20px;
    opacity: 0;
    animation: logo_fade 3.5s 0.5s forwards;
}
@keyframes logo_fade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* -------------------------------------
ヘッダー
--------------------------------------*/
#header {
    width: var(--VW100);
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #fff;
}
.headerArea {
    max-width: var(--contentMax);
    min-height: 70px;
    margin-right: auto;
    margin-left: auto;
    padding: 10px 15px;
}
.headerArea.headerFlex {
    display: flex;
    gap: 10px;
    position: relative;
}
.headerLogo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
@media screen and (max-width: 959px) {
    .headerLogo {
        width: calc(100% - 60px);
    }
}
.headerArea.headerFlex .headerLogo {
    margin-bottom: 0;
    justify-content: flex-start;
}
.headerLogo a img {
    vertical-align: middle;
}
.winkIndex ul {
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.winkIndex ul li {
    padding: 5px 12px;
}
.winkIndex ul a {
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
}
.winkIndex ul a:hover {
	background-color: #dd56a550;
}
/* -------------------------------------
グローバルナビ
--------------------------------------*/
#globalnavi {
    margin-right: auto;
    margin-left: auto;
}
/* -------------------------------------
ハンバーガーメニュー
--------------------------------------*/
.gnavi_button_back {
    display: none;
}
/*　ハンバーガーメニューに切り替え　*/
@media screen and (max-width: 959px) {
	.gnavi_button_back {
		display: block;
		width: 100%;
	}
	/*　ハンバーガーメニューのボタン　*/
	.gnavi_menu-btn  {
		position: absolute;
		top: 10px;
		right: 10px;
		display: flex;
		height: 50px;
		width: 50px;
		justify-content: center;
		align-items: center;
		z-index: 90;
        border: none;
		background-color: #dd56a5;
	}
	.gnavi_menu-btn span,
	.gnavi_menu-btn span::before,
	.gnavi_menu-btn span::after {
		content: '';
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #ffffff;
		position: absolute;
	}
	.gnavi_menu-btn span::before {
		bottom: 8px;
	}
	.gnavi_menu-btn span::after {
		top: 8px;
	}
	/*　ハンバーガーメニューのボタンの動き　*/
	.gnavi_menu-btn.active span {
		background-color: rgba(255, 255, 255, 0);/*　メニューオープン時は真ん中の線を透明にする　*/
	}
	.gnavi_menu-btn.active span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	.gnavi_menu-btn.active span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	.gnavi_menu-item {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;/*　ボタンをクリックされる前はメニューを画面外へ　*/
		z-index: 80;
		background-color: #dd56a5;
		transition: all 0.5s;/*　アニメーション設定　*/
	}
	.gnavi_menu-item.active  {
		left: 0;/*　ボタンをクリックされたらメニューを画面内へ　*/
	}
	.gnavi_menu-item ul {
		flex-direction: column;
		padding: 7px 10% 0;
	}
	.gnavi_menu-item ul li {
		padding: 15px 0;
		list-style: none;
	}
	.gnavi_menu-item ul a {
		width: 100%;
		font-size: 20px;
		box-sizing: border-box;
		color: #ffffff;
		text-decoration: none;
		position: relative;
	}
	.gnavi_menu-item ul li::before,
	.gnavi_menu-item ul li:last-child::after {
		content: '';
	}
}
.indexMargin {
    padding-top: 20rem;
    margin-top: -20rem;
}
#secMainVisual {
    width: 100%;
    max-width: var(--contentMax);
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
#secMainVisual .business {
    width: calc(55% - 20px);
    filter: drop-shadow(3px 3px 8px #00000085);
    position: absolute;
    top: 20px;
    right: 20px;
    left: auto;
    z-index: 2;
    opacity: 0;
    animation: fadeLeft 0.6s 5s ease-out forwards;
}
#secMainVisual .skill {
    width: calc(55% - 20px);
    filter: drop-shadow(3px 3px 8px #00000085);
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: auto;
    z-index: 2;
    opacity: 0;
    animation: fadeLeft 0.6s 5.75s ease-out forwards;
}
@keyframes fadeLeft {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
#secMainVisual h1 {
    width: 100%;
    max-width: 380px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    filter: drop-shadow(3px 3px 8px #00000085);
}
.entryInfo {
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.entryBtn {
    filter: drop-shadow(0px 3px 2px #00000085);
    transition: all .3s;
}
.entryBtn:hover {
    filter: none;
}
@media screen and (min-width: 769px) {
    #secMainVisual .business {
        width: 60%;
        top: 30px;
        left: 30px;
    }
    #secMainVisual .skill {
        width: 60%;
        bottom: 30px;
        right: 30px;
        left: auto;
    }
    #secMainVisual h1 {
        width: 50%;
        max-width: 490px;
    }
    .entryInfo {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }
}
.topics-head {
    position: relative;
}
.topics-head::after {
    content: "";
    width: 100%;
    border-top: solid 1px #949495;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: -1;
}
.topics-head h2 {
    margin: 0 auto 2rem;;
    padding: 0 2rem;
    background-color: #fff;
}
.topicsTable {
    width: 100%;
}
.topicsTable tr:last-child {
    border-bottom: solid 1px #949495;
}
.topicsTable td.topics-date {
    padding-right: 3rem;
}
.topicsTable td.topics-text {
    width: 100%;
    padding-bottom: 2rem;
}
#courseTabBox {
	display: flex;
    justify-content: space-between;
    position: sticky;
    background: var(--White);
    z-index: 10;
}
.courseTab {
    width: calc(50% - 5px);
    padding: 0 1.5rem;
    height: var(--courseTabHeight);
    align-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
    opacity: 0.3;
    cursor: pointer;
}
.courseTab.courseTabOn {
    z-index: 2;
    opacity: 1;
}
.courseTab:hover {
    opacity: 1;
}
.courseContainer {
    position: relative;
    clip-path: inset(0 1px 0 0);
}
.bgBusiness::before {
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: var(--Blue) url(../images/businessBack.webp) no-repeat top center/auto;
}
.bgSkill::before {
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: var(--Green) url(../images/skillBack.webp) no-repeat top center/auto;
}
.courseContents {
    width: 100%;
    max-width: 100rem;
    padding: 5rem 1.5rem;
    margin: 0 auto;
}
.courseType {
    padding: 5rem 0;
    overflow: hidden;
}
.onlyBusiness,
.onlySkill {
    display: none;
}
.onlyBusiness.dispOn,
.onlySkill.dispOn {
    display: block;
}
li.onlyBusiness.dispOn,
li.onlySkill.dispOn {
    display: list-item;
}
.courseItem {
    margin-bottom: 5rem;
    padding: calc(var(--courseTabHeight) + 20px) 1.5rem;
    background-color: var(--White);
    border-radius: 2rem;
}
.courseItem .itemTitle {
    margin-bottom: 3rem;
    padding: 0.5rem 1rem;
    font-size: var(--Font22-30);
    font-weight: bold;
    text-align: center;
}
.bgBusiness .courseItem .itemTitle {
    background: linear-gradient(to right, var(--Blue), #fff 50%, var(--Blue));
}
.bgSkill .courseItem .itemTitle {
    background: linear-gradient(to right, var(--Green), #fff 50%, var(--Green));
}
.bgBusiness .listText li::before {
    content: "⚫︎";
    color: var(--Blue);
}
.bgSkill .listText li::before {
    content: "⚫︎";
    color: var(--Green);
}
.purposeItem {
    margin-bottom: 3rem;
    padding: 1rem;
    background: var(--Green);
}
.purposeItem p {
    padding: 1rem;
    background: var(--White);
}
table.meritTbl {
    width: 100%;
}
table.meritTbl th {
    width: 35%;
    vertical-align: middle;
}
table.meritTbl td {
    width: 65%;
    padding: 10px;
    vertical-align: middle;
}
.bgBusiness table.meritTbl tr:nth-child(odd) th {
    border: 2px solid var(--Blue);
    background: #e1eefb;
}
.bgBusiness table.meritTbl tr:nth-child(odd) td {
    border: 2px solid var(--Blue);
}
.bgSkill table.meritTbl tr:nth-child(odd) th {
    border: 2px solid var(--Green);
    background: #e8f6ea;
}
.bgSkill table.meritTbl tr:nth-child(odd) td {
    border: 2px solid var(--Green);
}
#secMerit .onlySkill table.meritTbl a {
    border-bottom: 2px solid var(--Blue);
    transition: all .3s;
}
.theme_imgBox div.common_flex {
    justify-content: space-around;
}
.theme_imgBox::after {
    content: "";
    display: grid;
    width: fit-content;
    margin: 0 auto;
    border-top: 3rem solid var(--Pink);
    border-right: 10rem solid transparent;
    border-left: 10rem solid transparent;
}
table.evaluation {
    width: 100%;
    border: 1px solid #999999;
}
table.evaluation thead {
    border-bottom: 1px solid #999999;
    background-color: #e4e4e5;
}
table.evaluation thead tr th {
    padding: 1rem;
    text-align: center;
}
table.evaluation tbody tr th {
    width: 30%;
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
}
table.evaluation th:first-child {
    padding: 1rem;
    border-right: 1px solid var(--White);
}
table.evaluation tbody tr:not(:last-of-type) th {
    border-bottom: 1px solid var(--White);
}
table.evaluation.onlyBusiness tbody tr th {
    background: var(--LightBlue);
}
table.evaluation.onlySkill tbody tr th {
    background: var(--LightGreen);
}
table.evaluation td {
    padding: 1rem;
}
table.evaluation tbody tr:not(:last-of-type) td {
    border-bottom: 1px solid #999999;
}
#secContest .contest_flowBox p.flowText a {
    border-bottom: 1px solid #333;
    transition: all .3s;
}
.bgBusiness #secContest .contest_flowBox p.flowText a:hover {
    color: var(--Blue);
    border-bottom: 1px solid var(--Blue);
}
.bgSkill #secContest .contest_flowBox p.flowText a:hover {
    color: var(--Green);
    border-bottom: 1px solid var(--Green);
}
.contest_flow {
    margin-bottom: 1rem;
    display: block;
    background-color: #fff;
}
.bgBusiness .contest_flow {
    border: 3px solid var(--LightBlue);
}
.bgSkill .contest_flow {
    border: 3px solid var(--LightGreen);
}
.contest_flowBox:not(:last-child)::after {
    content: "";
    display: grid;
    width: fit-content;
    margin: 0 auto 1rem;
    border-right: 2rem solid transparent;
    border-left: 2rem solid transparent;
}
.bgBusiness .contest_flowBox:not(:last-child)::after {
    border-top: 2rem solid var(--LightBlue);
}
.bgSkill .contest_flowBox:not(:last-child)::after {
    border-top: 2rem solid var(--LightGreen);
}
.contest_flow-item {
    display: flex;
    width: 100%;
}
.contest_flow-item .flowStep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    padding: 1rem;
}
.bgBusiness .contest_flow-item .flowStep {
    background-color: var(--LightBlue);
}
.bgSkill .contest_flow-item .flowStep {
    background-color: var(--LightGreen);
}
.contest_flow-item .flowTitle {
    width: calc(100% - 6rem);
    padding: 1rem;
    text-align: left;
    color: var(--White);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bgBusiness .contest_flow-item .flowTitle {
    border-right: 1px solid var(--LightBlue);
}
.bgSkill .contest_flow-item .flowTitle {
    border-right: 1px solid var(--LightGreen);
}
.contest_flow .flowText {
    width: 100%;
    padding: 1rem;
    align-self: center;
}
@media screen and (min-width: 769px) {
    .courseTab {
        width: calc(50% - 30px);
    }
    .courseTab span {
        margin-right: 5px;
        font-size: 175%;
    }
    .tabBusiness::after {
        content: "";
        position: absolute;
        top: 0;
        left: 100%;
        border-right: 50px solid transparent;
        border-left: 0px solid transparent;
        border-bottom: 80px solid var(--Blue);
    }
    .tabTraining::before {
        content: "";
        position: absolute;
        top: 0;
        right: 100%;
        border-right: 0px solid transparent;
        border-left: 50px solid transparent;
        border-bottom: 80px solid var(--Green);
    }
    .courseContents {
        width: 90%;
        padding: 5rem 0;
    }
    .courseItem {
        padding-left: 5%;
        padding-right: 5%;
    }
    .purpose_skill {
        display: flex;
        justify-content: space-between;
    }
    .purpose_skill .purposeItem {
        width: calc(33.3% - 15px);
    }
    .contest_flow {
        display: flex;
    }
    .contest_flow-item {
        width: 35%;
    }
    .contest_flow-item .flowTitle {
        text-align: center;
        color: inherit;
    }
    .contest_flow .flowText {
        width: 65%;
    }
}
@media screen and (max-width: 768px) {
    table.meritTbl tr th,
    table.meritTbl tr td {
        display: block;
        width: 100%;
    }
    table.meritTbl tr th {
        border-bottom: none !important;
    }
    .bgBusiness .contest_flow-item .flowTitle {
        align-self: stretch;
        justify-content: left;
        background-color: var(--LightBlue);
    }
    .bgSkill .contest_flow-item .flowTitle {
        align-self: stretch;
        justify-content: left;
        background-color: var(--LightGreen);
    }
    .contest_flowBox .contest_flow .flowText table tr td {
        display: block;
        text-align: left;
    }
}
.applyBtn_area {
    width: var(--VW100);
    margin-right: calc(50% - (var(--VW100) / 2));
    margin-left: calc(50% - (var(--VW100) / 2));
    margin-bottom: 8rem;
}
.applyBtn_back_W {
    height: 320px;
    background: var(--White);
    clip-path: ellipse(calc(100% / 2) 160px at center);
}
.applyBtn-box {
    width: fit-content;
    margin: 0 auto;
    padding-bottom: 4rem;
}
.applyBtn {
    display: grid;
    margin: 0 1rem;
    padding: 1rem 3rem;
    color: var(--White);
    background-color: #dd56a5;
    border-radius: 9999px;
}
a.applyBtn {
    box-shadow: 0px 6px 0px #a81f0f;
    transition: all 0.2s;
}
a.applyBtn:hover {
    transform: translateY(3px);
    box-shadow: 0px 2px 0px #a81f0f;;
}
.requirementsDL {
    padding-top: 2rem;
    font-size: 1.8rem;
}
.requirementsDL a {
    padding-bottom: 2px;
    border-bottom: 2px solid var(--Blue);
    transition: all .3s;
}
.requirementsDL a:hover {
    color: var(--Blue);
}
.pretrainingOuter {
    width: 100%;
    border: 3px solid var(--Pink);
    background-color: var(--White);
}
.pretrainingOuter::before {
    content: url(../images/pretraining-attention.svg);
    display: block;
    margin: -25px 0 -30px 20px;
}
.pretrainingInner {
    width: calc(100% - 10px);
    margin: 5px auto;
    padding: 3rem 1rem;
    border: 1px solid var(--Pink);
}
.attention_catch {
    top: -5rem;
    left: -0.75rem;
}
.attention_catch p {
    display: inline-block;
    padding: 2rem 3rem;
    color: #dd56a5;
    background-color: #fff;
    border: 3px solid #dd56a5;
    position: relative;
}
.instructor_infoBox {
    display: flex;
    flex-wrap: wrap;
    padding-top: 2rem;
    border-top: 1px solid #949495;
}
.instructor_info {
    margin-bottom: 2rem;
    padding: 2rem 1rem 0;
}
.finalselection .instructor_info {
    margin-bottom: 2rem;
    padding: 0 1rem 0;
}
.instructor_profile {
    margin-bottom: 2rem;
    padding: 0 1rem;
    text-align: justify;
}
@media screen and (min-width: 769px) {
    .pretrainingInner {
        padding: 3rem;
    }
    .instructor_info {
        width: calc(50% - 135px);
    }
    .finalselection .instructor_info {
        width: calc(50%);
    }
    .instructor_profile {
        width: 50%;
    }
}
.winkMeritLink {
    text-decoration: none;
    background-color: #fff;
}
.winkMerit a {
    display: block;
    background: url(../images/merit-details.svg) no-repeat center / cover;
    height: 100%;
    scale: 90%;
    transition: all .3s;
}
.winkMerit a:hover {
    background: url(../images/merit-details-hover.svg) no-repeat center / cover;
    scale: 100%;
}
@media screen and (min-width: 769px) {
    .team_commentPhoto {
        width: 50%;
        padding: 0 2rem 1rem 0;
        float: left;
    }
}
.team_comment {
    padding: 0 3rem 3rem;
}
#secApplication,
#application_judgemethod,
#winkMerit {
    padding-top: calc(var(--courseTabHeight) + 20px);
}
#secApplication {
    outline: 2px solid var(--White);
}
@media screen and (min-width: 769px) {
    .application_point {
        margin: 0 3rem;
    }
}
.application_point h3 {
    margin-bottom: 4rem;
    font-size: 2.2rem;
    border: solid 1px #000000;
}
.qualify {
    padding: 2rem;
}
.bgBusiness .qualify {
    border: 2px solid var(--Blue);
}
.bgSkill .qualify {
    border: 2px solid var(--Green);
}
#application_benefits dd {
    padding-left: 1em;
}
#secJudgeAdviser.bgColorGray {
    padding: 4rem 0;
    background-color: #e4e4e5;
}
#secJudgeAdviser h2 {
    padding: 1rem 3rem;
    color: #fff;
    background-color: #d86382;
    border-radius: 3rem;
}
.jdg_adv-dataBox {
    margin-bottom: 3rem;
    padding: 2rem;
    background-color: #fff;
    border: solid 3px #dc648a;
    border-radius: 1.5rem;
}
@media screen and (min-width: 769px) {
    .jdg_adv-infomation {
        position: relative;
    }
    .jdg_adv-dataBox {
        position: absolute;
        width: calc(50% - 4rem);
        margin: 2rem;
        padding: 3rem;
    }
    .jdg_adv-dataBox:nth-child(even) {
        right: 0;
    }
}
.jdg_adv-introduction {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.jdg_adv-name {
    align-self: center;
}

#secFaq h2 {
    color: #ca4872;
}
.faq_item {
    margin-top: 3rem;
    border: solid 1px #efaaad;
    border-radius: 1.5rem;
}
@media screen and (min-width: 769px) {
    .faq_item {
        margin: 3rem 2rem 0;
    }
}
.faq_item dt {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 4rem;
    text-align: justify;

    border-radius: 15px 15px 0 0;
    background-color: #efaaad;
}
.faq_item dt::before {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 2rem;
    color: #fff;
    content: 'Ｑ';
}
.faq_item dd {
    position: relative;
    margin-left: 3rem;
    padding: 1.5rem 1.5rem 1.5rem 3rem;
    text-align: justify;
}
.faq_item dd::before {
    position: absolute;
    left: 0;
    content: 'Ａ';
    font-weight: bold;
    color: #dc648a;
}
.organizer_info p,
.co-sponsored_info p,
.sponsor_list li,
.patronage_info li {
    margin-bottom: 3rem;
    padding: 0 2rem;
    align-self: center;
}
.sponsor_list li a,
.patronage_info li a {
    display: block;
    position: relative;
}
.sponsor_list li a::before,
.patronage_info li a::before{
    content: "協賛・後援団体様サイトへ";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.sponsor_list li a:hover::before,
.patronage_info li a:hover::before {
    opacity: 1;
}
@media screen and (min-width: 769px) {
    .organizer_info p,
    .co-sponsored_info p {
        width: 60%;
        margin: 0 auto;
    }
}
.about-logo .wink-logo {
    width: 100%;
}
@media screen and (min-width: 769px) {
    .about-logo .wink-logo {
        width: 40%;
    }
    .about-logo p {
        width: 60%;
        padding-left: 3rem;
    }
}
.past-contestBox {
    display: flex;
    flex-wrap: wrap;
}
.past-contestBox li a{
    display: block;
    margin: 0 1% 1.5rem;
    padding: 1rem;
    text-align: center;
    font-size: 1.8rem;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s;
}
.past-contestBox li:nth-child(4n+1) a {
    background-color: #eba8c3;
}
.past-contestBox li:nth-child(4n+2) a {
    background-color: #abcae4;
}
.past-contestBox li:nth-child(4n+3) a {
    background-color: #f7cbcb;
}
.past-contestBox li:nth-child(4n+4) a {
    background-color: #e1829e;
}
.past-contestBox li a:hover {
    color: #000;
    font-weight: bold;
	background-color: #f7931e50;
}
.footerBgcolor {
    background-color: #d66c8a;
}
.footer_infobox {
    padding: 2rem 2rem 4rem;
    color: #fff;
}
.pagetop {
    position: fixed;
    z-index: 0;
    right: 5.8rem;
    bottom: 5.8rem;
    width: 5.5rem;
    height: 5.5rem;
    background: #dd56a580;
    border-radius: 50%;
    overflow: hidden
}
.pagetop a {
    display: block;
    height: 100%
}

.pagetop a span {
    display: block;
    height: 100%;
    text-indent: 100%;
    white-space: nowrap;
    position: relative
}

.pagetop a span::after {
    content: "";
    display: block;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1.6rem;
    height: 1.6rem;
    transform: rotateZ(-45deg) translate3d(-4px, 4px, 0);
}
#pagetop a:hover{
	background: #abcae4;
}
/*リンクを右下に固定*/
#pagetop {
	position: fixed;
	right: 1rem;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}
/*　上に上がる動き　*/
#pagetop.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*　下に下がる動き　*/
#pagetop.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(100px);
    }
}