@charset "utf-8";

/* ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

【PC】ウィンドウ幅が769px以上の場合に適用するCSS

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ */
@media print, screen and ( min-width:769px ) {


/* ==================================================================================

common

================================================================================== */
body {
font-size: 14px;
line-height: 2;
/*overflow: hidden;*/
}
.inner {
min-width: 900px;
max-width: 1100px;
margin: 0 auto;
width: calc(100% - 50px);
}
.inner_mini {
min-width: 700px;
max-width: 800px;
margin: 0 auto;
width: calc(100% - 50px);
}
.sec {margin: 100px 0;}
.sp {display:none !important;}
img {
width: 100%;
vertical-align: bottom;
object-fit: cover;
}
a {display: inline-block;}
a:before,
a:after {
transition: var(--anime);
}


/* ==================================================================================

box_link

================================================================================== */
.box_link {
position: relative;
}
.box_link a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0;
transition: all 0.3s linear;
}



/* ★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★

下層ページ

★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★ */

/* ==================================================================================



================================================================================== */














/* ==================================================================================

ページネーション

================================================================================== */
.pagination {}
.pagination li {
border: none !important;
}
.pagination ul {
display: flex;
justify-content: center;
margin: 50px 0 0 0;
}
.pagination ul .page-numbers {
border: 1px solid #ccc;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 5px;
}
.pagination ul .page-numbers:hover {
background: #f5f5f5;
}
.pagination ul .page-numbers.current {
background: #eee;
}
.pagination .dots {
    border: none !important
    margin: 0;
}



/* ==================================================================================

404

================================================================================== */
.page_404 {}
.page_404 .t_404 {
font-size: 11em;
    padding: 70px 0;
    display: inline-block;
    line-height: 0.7;
    letter-spacing: 4px;
    color: var(--btn-gray-color-hover);
}
.page_404 .t_404 span {
font-size: 0.6em;
}
.page_404 .title {
font-weight: bold;
    font-size: 2em;
    line-height: 1.5;
    margin: 0 0 40px 0;
}
.page_404 .btn_blue {
margin: 40px 0 0 0;
}
.page_404 .btn_blue .btn {
padding: 13px 70px;
}



/* ==================================================================================

オンライン講座

================================================================================== */
.online_introduction {}
.online_introduction .title {
font-size: 1.5em;
font-weight: bold;
text-align: center;
margin: 0 0 30px 0;
line-height: 1.7;
}
.online_introduction ul {
display: flex;
margin: 70px 0 0 0;
}
.online_introduction li {
width: 100%;
border: 1px solid var(--boder-color);
padding: 35px;
}
.online_introduction li:nth-child(n+2) {
border-left: none;
}
.online_introduction li .title {
    font-size: 1.1em;
    margin: 20px 0;
}
.online_introduction li p {
line-height: 1.7;
}



/* ==================================================================================

ニュース一覧　トップページ

================================================================================== */
.news_list {}
.news_list li {
border-bottom: 1px solid var(--boder-color);
}
.news_list a {
position: relative;
padding: 25px 0 25px 100px;
line-height: 1.5;
}
.news_list a:hover {
color: var(--main-color-hover);
}
.news_list a.cat {
padding-left: 8px;
color: var(--main-color-hover);
}
.news_list span, time {
color: var(--main-color-hover);
line-height: 1.7;
}
.news_list a.excerpt {
margin-top: 10px;
}


/* 記事詳細
======================================== */
.news_detail {
margin-bottom: 0;
}
.news_detail .title {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.7;
    margin: 0 0 30px 0;
}
.news_detail .btn_gray {
    text-align: center;
    margin: 50px auto 0;
    width: 30%;
    display: block;
}
.news_detail .btn_gray .btn {
padding: 15px 0;
}



/* ==================================================================================

ニュース一覧ページ

================================================================================== */
.news_all_list {}

.news_all_list a {
color: var(--main-color);
line-height: 1.7;
}
.news_all_list a:hover {
color: var(--main-color-hover);
}

.news_all_list li {
display: flex;
gap:30px;
border-bottom: 1px solid var(--boder-color);
padding: 30px 0;
}
.news_all_list li:last-child {
border-bottom: none;
}

.news_all_list .img {
width: 30%;
}
.news_all_list .img a:hover {
opacity: 0.8;
}

.news_all_list .text {
width: 70%;
}
.news_all_list .text .more-link {
background: var(--main-color);
color: #fff;
padding: 8px 25px 8px 20px;
font-size: 0.8em;
margin: 20px 0 0 0;
position: relative;
}
.news_all_list .text .more-link:hover {
background: var(--main-color-hover);
}
.news_all_list .text .more-link:before {
content: url(../img/bace/arrow_01_white.svg);
width: 7px;
top: 50%;
right: 5%;
position: absolute;
transform: translate(-50%, -50%);
z-index: 1;
line-height: 0;
}
.news_all_list a.cat {
padding-left: 8px;
color: var(--main-color-hover);
}
.news_all_list span, time {
color: var(--main-color-hover);
line-height: 1.7;
}
.news_all_list a.excerpt {
margin-top: 10px;
}


/* ==================================================================================

お役立ちコラム

================================================================================== */
.column_page .column_area {
margin: -50px 0 0 0 !important;
}
.second_page .column_area {
padding: 20px 0 80px 0;
margin: 50px 0;
}


/* 記事詳細
======================================== */
.blog_top {
margin-bottom: 150px;
}
.blog_top .title {
font-size: 1.7em;
    font-weight: bold;
    line-height: 1.7;
    text-align: center;
    margin: 40px 0 30px;
}

.author_area {
}
.author_area .fl_area {
border: 1px solid var(--boder-color);
padding: 60px 70px;
}
.author_area .fl_img {
flex-direction:row-reverse;
}
.author_area .fl_img .img {
width: 40%;
}
.author_area .fl_img .text {
width: 60%;
}
.author_area .name {}
.author_area .name span {
font-size: 1.5em;
font-weight: bold;
}
.author_area .day {
margin: 15px 0 40px;
display: block;
}


/* author_area_02
======================================== */
.author_area_02 {
}
.author_area_02 .fl_area {
border: 1px solid #eee;
padding: 50px 60px;
}
.author_area_02 .fl_area .img {
width: 35%;
}
.author_area_02 .fl_area .img img {
width: 100%;
}
.author_area_02 .fl_area .text {
width: 65%;
}
.author_area_02 .name {
margin: 0 0 10px 0;
}
.author_area_02 .name a {
font-weight: bold;
font-size: 1.5em;
letter-spacing: 2px;
}
.author_area_02 .name a span {
}
.author_area_02 .instagram_link {
margin: 20px 0 0 0;
}
.author_area_02 .instagram_link img {
width: 40px;
}



/* ==================================================================================

スクール生の紹介

================================================================================== */
.member_area {}
.member_area .member_box {
padding: 20px 0 100px 0;
}

.member_area ul {
display: flex;
gap: 40px;
margin: -20px 0 40px 0;
}
.member_area li {
width: 22.5%;
background: #fff;
border: 1px solid var(--boder-color);
padding: 40px;
box-sizing: border-box;
transition: all 0.5s linear;
}
.member_area li:hover {
background: var(--bg-color);
}
.member_area li p {
line-height: 1.7;
}
.member_area li p span {
display: block;
text-align: center;
font-weight: bold;
font-size: 1.3em;
letter-spacing: 2px;
margin: 15px 0 -15px 0;
}


/* スクール生詳細
======================================== */
.member_detail {}
.member_detail .fl_area {
margin: 80px 0;
}
.member_detail .text {
position: relative;
}
.member_detail .text .box {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.member_detail .name {
line-height: 1.8;
margin: 0 0 20px 0;
}
.member_detail .name span {
font-size: 1.8em;
font-weight: bold;
}
.member_detail .text_box {}
.member_detail .text_box .title {
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.7;
    margin: 0 0 20px 0;
}


/* column_list_area
======================================== */
.column_list_area {
padding: 30px 0 50px 0;
margin-bottom: 0;
}
.column_list_area ul {
display: grid;
grid-template: repeat(1, 1fr) / repeat(3, 1fr);
gap: 60px 40px;
}
.column_list_area p {
margin: 15px 0 0 0;
line-height: 1.5;
}

.column_list_area .btn_blue {
display: block;
    margin: 50px 0 0 0;
}
.column_list_area .btn_blue a {
    padding: 25px 0;
    font-size: 1.2em;
}



/* ==================================================================================

よくある質問

================================================================================== */
.qa_area {
    margin: 100px 0 -100px 0;
}
.qa_area dl {}
.qa_area dl span {
font-weight: bold;
font-size: 25px;
left: 20px;
position: absolute;
}
.qa_area dt,
.qa_area dd {
position: relative;
padding: 15px 0 15px 50px;
}
.qa_area dt {
background: var(--bg-color);
font-weight: bold;
font-size: 1.3em;
line-height: 1.5;
}
.qa_area dt span {
top: 8px;
color: var(--spot-color);
}
.qa_area dd {
    padding-top: 25px;
    padding-bottom: 50px;
    line-height: 1.8;
}
.qa_area dd span {
top: 12px;
color: var(--main-color-hover);
}


/* ==================================================================================

ブログ詳細

================================================================================== */

.blog_introduction h2, h3 {
font-size: 1.5em;
margin: 30px 0 20px 0;
line-height: 1.5;
text-align: left;
font-weight: bold;
}

.blog_introduction p {
font-size: 1.2em;
}

/* ==================================================================================

店舗紹介

================================================================================== */
.building_area {}
.building_area .building_box {
margin: 80px 0 150px 0;
}
.building_area .building_box .img img {
max-height: 440px;
width: 100%;
}
.building_area .split_02 .title {
font-weight: bold;
    font-size: 1.3em;
    margin: 0 0 10px 0;
}
.building_area dl {
display: flex;
flex-wrap: wrap;
}
.building_area dl dt {
    background: var(--bg-color);
    width: 20%;
    text-align: center;
    height: fit-content;
    font-size: 0.9em;
    padding: 3px 0;
}
.building_area dl dd {
width: 80%;
padding: 3px 0 20px 20px;
box-sizing: border-box;
}

.building_area .btn_blue {
display: block;
margin: 40px 0 0 0;
}
.building_area .btn_blue .btn {
padding: 25px 0;
font-size: 1.2em;
}


/* 店舗アクセス
======================================== */
.building_access .building_mv {
padding: 50px 0 80px 0;
margin: 0 0 100px 0;
}
.building_access .title {
font-weight: bold;
font-size: 1.5em;
margin: 0 0 20px 0;
}
.building_text .line_box {
border: 1px solid var(--boder-color);
padding: 50px 70px;
margin: 80px 0;
}
.building_introduction .fl_area .title,
.blog_introduction .fl_area .title {
font-size: 1.5em;
margin: 0 0 20px 0;
line-height: 1.5;
text-align: left !important;
}

.map_area {}
.map_area .map_box {
margin: 0 0 50px 0;
}
.map_area .map_box iframe {
width: 100%;
height: 500px;
}
.map_area .split_02 .title {
font-weight: bold;
font-size: 1.2em;
}



/* ==================================================================================

講師紹介

================================================================================== */

.staff_mv {
background: url(../img/teacher/mv_01.jpg) scroll no-repeat center center / cover;
position: relative;
height: 40vh;
margin: -50px 0 0 0;
}
.staff_mv .text {
position: absolute;
    left: 0;
    top: 50%;
    text-align: center;
    width: 100%;
    transform: translateY(-60%);
    font-size: 1.8em;
    letter-spacing: 1px;
    line-height: 1.8;
}
.staff_mv .title {
font-weight: bold;
}

.teacher_set .teacher_box {
background: var(--bg-color);
padding: 50px 0 0 0;
}
.teacher_set .teacher_box .inner {
display: flex;
    gap: 80px;
}
.teacher_set .teacher_box .img {
width: 40%;
}
.teacher_set .teacher_box .text {
width: 60%;
position: relative;
}
.teacher_set .teacher_box .text .title {
font-weight: bold;
    font-size: 2em;
    letter-spacing: 1px;
    line-height: 1.3;
    margin: 0 0 30px 0;
}
.teacher_set .teacher_box .text .title span {
font-size: 0.5em;
}
.teacher_set .teacher_box .text .box {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-60%);
}

.teacher_data .data_box {
margin: 50px 0;
}
.teacher_data .data_box .title {
    font-size: 1.5em;
    font-weight: bold;
    padding: 20px 0;
}
.teacher_data .data_box .title span {
color: var(--btn-gray-color-hover);
margin: 0 0 0 15px;
    letter-spacing: 2px;
}

.teacher_data .data_box .split_03 {
width: 700px;
margin: 0 auto;
}
.teacher_data .data_box .split_01 ul {
display: grid;
grid-template: repeat(2, 1fr) / repeat(2, 1fr);
}
.teacher_data .data_box li {
border: 1px solid var(--boder-color);
padding: 10px 15px;
line-height: 1.5;
}
.teacher_data .data_box .split_01 li:nth-child(odd) {
border-top: none;
}
.teacher_data .data_box .split_01 li:nth-child(even) {
border-top: none;
border-left: none;
}
.teacher_data .data_box .split_01 li:first-child,
.teacher_data .data_box .split_01 li:nth-child(2) {
border-top: 1px solid var(--boder-color) !important;
}
.teacher_data .data_box p {
width: 700px;
margin: 50px auto 100px;
}

.teacher_data .data_box dl {
display: flex;
flex-wrap: wrap;
}
.teacher_data .data_box dl dt,
.teacher_data .data_box dl dd {
border: 1px solid var(--boder-color);
box-sizing: border-box;
padding: 10px 15px;
line-height: 1.5;
}
.teacher_data .data_box dl dt {
width: 20%;
border-top: none;
color: var(--main-color-hover);
text-align: center;
}
.teacher_data .data_box dl dd {
width: 80%;
border-top: none;
border-left: none;
}


/* ==================================================================================

カリキュラム例

================================================================================== */

/* table_curriculum
======================================== */
.table_curriculum {
text-align: center;
}
.table_curriculum th {
background: var(--main-color);
color: #fff;
font-size: 1.1em;
letter-spacing: 2px;
padding: 10px 0 !important;
}
.table_curriculum td:first-child {
font-weight: bold;
}
.table_bace.table_curriculum td {
vertical-align: middle;
padding: 20px;
}
.table_curriculum .none {
background: #f5f5f5 !important;
}

.sticky th {
position: sticky;
top: 60px;
}
.sticky th:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #ccc;
}
.table_curriculum .tx {
text-align: left;
}



/* ==================================================================================

コース紹介

================================================================================== */
.course_area {}
.course_area .course_title {
background: var(--bg-color);
text-align: center;
padding: 50px 0 70px;
margin: 0 0 70px 0;
}

.course_area .course_title .title_sub {
font-weight: bold;
    font-size: 1.2em;
    border: 1px solid var(--main-color);
    display: inline-block;
    padding: 3px 30px;
margin: 10px 0 30px;
}
.course_area .course_title ul {
width: 80%;
    margin: 0 auto;
    text-align: left;
    font-size: 1.2em;
    display: flex;
    flex-wrap: wrap;
    gap: 0 50px;
}
.course_area .course_title li {
position: relative;
padding: 15px 0 15px 20px;
border-bottom: 1px dashed var(--btn-gray-color-hover);
width: 45%;
}
.course_area .course_title li:before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
left: 5px;
top: 50%;
background: var(--main-color);
transform: translateY(-50%);
}

.course_summary {}
.course_summary ul {
text-align: center;
    display: flex;
    gap: 30px;
    margin: 30px auto 60px;
    width: 80%;
}
.course_summary li {
width: 100%;
border-right: 1px solid var(--boder-color);
}
.course_summary li:last-child {
border-right: none;
}
.course_summary li b {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    margin: 0 0 -15px 0;
}

.course_area .course_title .title {
font-weight: bold;
font-size: 1.8em;
margin: 0 0 50px 0;
}
.course_area .course_title .title span {
position: relative;
padding: 0 0 20px 0;
}
.course_area .course_title .title span:before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: 1px;
width: 30%;
background: var(--main-color);
}
.course_area .course_title p {
text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

.course_area .course_point_area {
display: flex;
}
.course_area .course_point_area li {
padding: 50px;
width: 100%;
border: 1px solid var(--boder-color);
}
.course_area .course_point_area li:nth-child(n+2) {
border-left: none;
}
.course_area .title {
text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1.5;
    margin: 20px 0 15px 0;
}



/* ==================================================================================

カリキュラム

================================================================================== */
.curriculum_link {}
.curriculum_link ul {
display: flex;
}
.curriculum_link li {}
.curriculum_link a {
position: relative;
text-align: center;
color: #fff;
font-size: 1.4em;
letter-spacing: 1px;
line-height: 1.5;
}
.curriculum_link a:before {
content: "";
background: var(--main-color);
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
left: 0;
z-index: 1;
mix-blend-mode: color;
}
.curriculum_link a:hover:before {
opacity: 0;
}
.curriculum_link .text {
position: absolute;
width: 100%;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.curriculum_link .font_e {
font-size: 3.5vw;
letter-spacing: 2px;
transition: all 1500ms cubic-bezier(0.215,0.610,0.355,1.000);
}
.curriculum_link a:hover .font_e {
letter-spacing: 5px;
}
.curriculum_link .btn_red {
margin: 30px 0 0 0;
}



/* ==================================================================================

目指せる資格

================================================================================== */

/* anchor_area
======================================== */
.anchor_area {
margin: 50px 0;
}
.anchor_area ul {
display: flex;
gap: 5px;
}
.anchor_area li {
width: 100%;
}
.anchor_area a {
background: var(--bg-color);
display: block;
    text-align: center;
    padding: 45px 0 25px 0;
    line-height: 1.5;
    position: relative;
	 height: 100%;
    box-sizing: border-box;
}
.anchor_area a span {
position: relative;
z-index: 1;
}
.anchor_area .font_e {
color: var(--spot-color);
font-size: 1.8em;
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
}
.anchor_area a:before,
.anchor_area a:after {}
.anchor_area a:before {
content: "";
width: 5px;
height: 5px;
position: absolute;
left: 50%;
bottom: 15px;
transform: translateX(-50%) rotate(45deg);
border: solid var(--main-color-hover);
border-width: 0 1px 1px 0;
z-index: 1;
}
.anchor_area a:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform-origin: right bottom;
transform: scale(1, 0);
transition: transform 0.3s;
background: var(--btn-gray-color);
}
.anchor_area a:hover:after {
transform-origin: left top;
transform: scale(1, 1);
}
.anchor_link {
padding-top: 50px;
margin-top: -50px !important;
}



/* ==================================================================================

price_flow

================================================================================== */
.price_flow {
border-top: 1px solid var(--boder-color);
}
.price_flow li {
border-bottom: 1px solid var(--boder-color);
padding: 30px 25%;
display: flex;
gap: 60px;
}
.price_flow li:nth-child(even) {
background: var(--bg-color);
}
.price_flow li .font_e {
text-align: center;
font-size: 2em;
line-height: 1.1;
}
.price_flow li .font_e span {
color: var(--spot-color);
font-size: 2.5em;
}
.price_flow li .title {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 10px 0;
}



/* ==================================================================================

merit_second_area

================================================================================== */
.merit_second_area {}

.merit_second_area .fl_area .title {
font-size: 1.8em;
line-height: 1.6;
margin: 0 0 30px 0;
text-align: left !important;
letter-spacing: 0;
}

.fl_area .title {
font-size: 2.2em;
font-weight: bold;
line-height: 1.5;
margin: 0 0 50px 0;
letter-spacing: 3px;
}
.fl_area .title span {
color: var(--spot-color);
font-size: 2em;
}
.fl_area .fl_box:nth-child(even) .title {
text-align: right;
}



/* ==================================================================================

【下層ページ　共通】table_bace

================================================================================== */
.table_bace {
width: 100%;
}
.table_bace th,
.table_bace td {
border: 1px solid var(--btn-gray-color-hover);
    padding: 35px 20px;
    line-height: 1.5;
}
.table_bace th {
font-weight: bold;
}



/* table_price
======================================== */
.table_price {
text-align: center;
font-size: 1.2em;
}
.table_price .title th,
.table_price .title td {
vertical-align: middle;
}
.table_price .title th {
color: #fff;
font-size: 1.2em;
}
.table_price .title th:nth-child(2) {
background: #203155;
}
.table_price .title th:nth-child(3) {
background: #479DDF;
}
.table_price .split td {
background: #F6F9FF;
}

.table_price .split td:nth-of-type(n+3) {
background: #E1EFFA;
}
.table_price td span {
margin: 0 10px;
font-size: 0.7em;
}



/* ==================================================================================

【下層ページ　共通】split

================================================================================== */
.split_02 {
display: flex;
gap: 50px;
}
.split_02 .box {
width: 100%;
}
.split_02 li {
border-top: none;
}
.split_02 li:first-child,
.teacher_data .data_box dl dt:first-child,
.teacher_data .data_box dl dd:nth-child(2) {
border-top: 1px solid var(--boder-color) !important;
}
.split_02 li {
border-top: none !important;
}


/* ==================================================================================

【下層ページ　共通】fl_area

================================================================================== */
.fl_area {}
.fl_area .fl_box {
margin: 0 0 100px 0;
}
.fl_area .fl_img {
display: flex;
gap:80px;
}
.fl_area .fl_box:nth-child(odd) .fl_img {
flex-direction:row-reverse;
}
.fl_area .fl_box:nth-child(even) .fl_img {}
.fl_area .img {
width: 50%;
}
.fl_area .text {
width: 50%;
}

.fl_box .btn_blue {
width: 50%;
margin: 40px 0 0 0;
}
.fl_box .btn_blue a {
padding: 15px 0;
}



/* ==================================================================================

【下層ページ　共通】second_page_link

================================================================================== */
.second_page_link {
background: var(--bg-color);
}
.second_page_link ul {
display: grid;
grid-template: repeat(2, 1fr) / repeat(3, 1fr);
}
.second_page_link a {
display: block;
font-size: 1.1em;
    padding: 30px 2.5vw;
    position: relative;
	 letter-spacing: 1px;
}
.second_page_link a span {
position: relative;
z-index: 1;
}
.second_page_link li {
border-top: 1px solid var(--boder-color);
}
.second_page_link li:not(:nth-child(3n+3)) {
border-right: 1px solid var(--boder-color);
}
.second_page_link a:after {
content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	 background: var(--btn-gray-color-hover);
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform 0.3s;
}
.second_page_link a:hover:after {
transform-origin: left top;
    transform: scale(1, 1);
}



/* ==================================================================================

【下層ページ　共通】fl_long_img

================================================================================== */
.fl_long_img {}
.fl_long_img .fl_box {}

.fl_long_img .fl_box .img {
}
.fl_long_img .fl_box .img img {
height: 80vh;
width: 100%;
}
.fl_long_img .fl_box .text {
background: #fff;
padding: 50px 5vw;
width: 70%;
max-width: 800px;
box-sizing: border-box;
}

.fl_long_img .fl_box:nth-child(odd) .img {
margin: 0 20% 0 0;
clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0 100%);
}
.fl_long_img .fl_box:nth-child(odd) .img img {
}
.fl_long_img .fl_box:nth-child(odd) .text {
margin: -200px 10% 0 auto;
}

.fl_long_img .fl_box:nth-child(even) .img {
margin: 0 0 0 20%;
clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0 100%);
}
.fl_long_img .fl_box:nth-child(even) .img img {
}
.fl_long_img .fl_box:nth-child(even) .text {
margin: -200px 0 0 10%;
}

.fl_long_img .main_title {
font-weight: bold;
font-size: 1.7em;
line-height: 1.5;
margin: 0 0 30px 0;
}
.fl_long_img .title {
font-weight: bold;
font-size:max(1.2vw,18px);
margin: 40px 0 20px 0;
}



/* ==================================================================================

【下層ページ　共通】

================================================================================== */
.second_page {
padding: 110px 0;
}


/* second_title
======================================== */
.second_page .second_title {
}
.second_page .second_title .title {
background: var(--second-title-bg-color);
text-align: center;
padding: 20px 10%;
font-weight: bold;
font-size:max(1.5vw,22px);
letter-spacing: 2px;
margin: 0 0 50px 0;
}
.second_page .second_title p {
margin: 0 auto 50px;
max-width: 600px;
}

.mini {
font-size: 0.7em;
}














/* ★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★

全ページ共通

★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★ */


/* ==================================================================================

【共通】タイトル

================================================================================== */
.title_set {}

/* title_01
======================================== */
.title_01 {
text-align: center;
margin: 50px 0;
font-size: 1.5em;
font-weight: bold;
}
.title_01 .font_e {
font-size: 2.5em;
letter-spacing: 2px;
line-height: 1;
position: relative;
padding: 0 0 20px 0;
margin: 0 0  20px 0;
display: inline-block;
}
.title_01 .font_e:before {
content: "";
position: absolute;
height: 2px;
width: 30%;
background: var(--main-color);
bottom: 0;
left: 50%;
transform: translateX(-50%);
}


/* title_02
======================================== */
.title_02 {
text-align: center;
margin: 50px 0;
font-size: 1.8em;
font-weight: bold;
}


/* title_03
======================================== */
.title_03 {
text-align: center;
font-weight: bold;
margin: 50px 0;
}
.title_03 span {
min-width: 150px;
letter-spacing: 2px;
line-height: 1;
position: relative;
margin: 0 0  20px 0;
display: inline-block;
font-size: 1.8em;
padding: 0 0 30px 0;
}
.title_03 span:before {
content: "";
position: absolute;
height: 2px;
width: 30%;
background: var(--main-color);
bottom: 0;
left: 50%;
transform: translateX(-50%);
}


/* ==================================================================================

【共通】ボタン

================================================================================== */
[class*="btn_"] {
position: relative;
height: fit-content;
display: inline-block;
}
[class*="btn_"] .btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform-origin: right top;
transform: scale(0, 1);
transition: transform 0.3s;
}
[class*="btn_"] .btn:hover:after {
transform-origin: left top;
transform: scale(1, 1);
}

[class*="btn_"] .btn {
}
[class*="btn_"] .btn span {
position: relative;
z-index: 1;
}


/* btn_blue
======================================== */
.btn_blue .btn {
background: var(--main-color);
color: #fff;
display: block;
text-align: center;
}
.btn_blue .btn:after {
background: var(--btn-black-color);
}


/* btn_gray
======================================== */
.btn_gray .btn {
background: var(--btn-gray-color);
display: block;
text-align: center;
}
.btn_gray .btn:after {
background: var(--btn-gray-color-hover);
}


/* btn_red
======================================== */
.btn_red .btn {
background: var(--spot-color);
color: #fff;
}
.btn_red .btn:after {
background: #FF364A;
}


/* btn_white
======================================== */
.btn_white .btn {
background: #fff;
display: block;
text-align: center
}
.btn_white .btn:after {
background: var(--btn-gray-color);
}


/* btn_long
======================================== */
.btn_long {
display: block;
margin: 50px 0 0 0;
}
.btn_long .btn {
padding: 20px 0;
    font-size: 1.2em;
}
.btn_long .btn:before {
    right: 3% !important;
}


/* btn_s
======================================== */
.btn_s .btn {
width: 57px;
height: 57px;
font-size: 0;
position: relative;
display: block;
}
.btn_s .btn:before {
content: url(../img/bace/arrow_01_white.svg);
width: 15px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
z-index: 1;
}


/* arrow_white
======================================== */
.arrow_white .btn:before {
content: url(../img/bace/arrow_01_white.svg);
width: 11px;
position: absolute;
right: 8%;
top: 50%;
transform: translateY(-50%);
line-height: 1;
z-index: 1;
}


/* arrow_black
======================================== */
.arrow_black .btn:before {
mix-blend-mode: difference;
}













/* ★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★

トップページ

★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★ */



/* ==================================================================================

shop_area

================================================================================== */
.shop_area {
display: flex;
}
.shop_area .box a {
padding: 80px 6vw;
}
.shop_area .box a:hover {
background: var(--bg-color);
}
.shop_area .box:first-child a {
border-right: 1px solid var(--boder-color);
padding-left: 15vw;
}
.shop_area .box:last-child a {
padding-right: 15vw;
}
.shop_area p {
font-weight: bold;
font-size: 1.2em;
margin: 25px 0;
}



/* ==================================================================================

news_area

================================================================================== */
.news_area {
border-top: 1px solid var(--boder-color);
border-bottom: 1px solid var(--boder-color);
padding: 70px 0;
margin: 50px 0 0 0;
}
.news_area .news_box {
display: flex;
}
.news_area .title {
line-height: 1.5;
font-weight: bold;
width: 20%;
}
.news_area .title .font_e {
font-size: 2.5em;
}
.news_area ul {
width: 80%;
overflow: auto;
height: 200px;
margin: 0 0 30px 0;
padding: 0 20px 0 0;
}
.news_area a {
position: relative;
line-height: 1.7;
padding: 10px 0 10px 100px;
}
.news_area a:hover {
color: var(--main-color-hover);
}
.news_area a span {
left: 0;
position: absolute;
color: var(--main-color-hover);
}



/* ==================================================================================

column_area

================================================================================== */
.column_area {}

.column_area .main_title {
font-weight: bold;
font-size: 1.5em;
margin: 0 0 20px 0;
}
.column_area .main_title .font_e {
font-size: 2em;
margin: 0 10px 0 0;
}

.column_area .slick-slider {
overflow: hidden;
padding: 0 0 80px 0;
}
.column_area .slick-list {
margin: 0 -20px;
}
.column_area .slick-track li {
margin: 0 20px;
}
.column_area .slick-track li a {
}
.column_area .slick-track li p {
margin: 15px 0 0 0;
line-height: 1.5;
}

.column_area .btn_gray {
transform: translateY(-54px);
}

.column_area .btn_gray,
.news_area .btn_gray {
width: 250px;
margin: 0 0 0 auto;
display: block;
}
.column_area .btn_gray a,
.news_area .btn_gray a {
padding: 15px 0;
}


/* ==================================================================================

students_area

================================================================================== */
.students_area {}
.students_area .title_top {
margin: 0 0 50px 0;
}

.students_area .students_box {}
.students_area .students_box .box {
display: flex;
    gap: 50px;
    border: 1px solid var(--boder-color);
    padding: 40px 50px;
    margin: 50px 0;
}

.students_area .name {
line-height: 1.8;
    margin: 0 0 20px 0;
}
.students_area .name span {
font-size: 1.8em;
font-weight: bold;
letter-spacing: 2px;
}

.students_area .sns {
margin: 20px 0;
}
.students_area .sns a {}
.students_area .sns a:hover {
opacity: 0.5;
}
.students_area .sns img {
width: 25px;
}

.students_area .btn_blue {
    display: block;
    margin: 80px 0 0 0;
}
.students_area .btn_blue a {
    padding: 20px 0;
    font-size: 1.3em;
}



/* ==================================================================================

magazine_area

================================================================================== */
.magazine_area {
margin: 100px 0;
}
.magazine_area ul {
margin: 50px auto;
    display: flex;
    gap: 50px;
    text-align: center;
}
.magazine_area li {
width: 100%;
}
.magazine_area li span  {
    margin: 10px 0 0 0;
    display: block;
    font-size: 1.2em;
}



/* ==================================================================================

teacher_area

================================================================================== */
.teacher_area {
margin: 100px 0;
}

.teacher_area .teacher_box {
}
.teacher_area .teacher_box ul {
}
.teacher_area .teacher_box li {
display: flex;
gap:50px;
border: 1px solid var(--boder-color);
padding: 40px 50px;
margin: 50px 0;
}

.teacher_area .teacher_box li .img {
width: 70%;
}
.teacher_area .teacher_box li .img img {
}

.teacher_area .teacher_box li .text {
width: 100%;
}

.teacher_area .name {
margin: 0 0 20px 0;
}
.teacher_area .name span {
font-size: 1.8em;
letter-spacing: 2px;
font-weight: bold;
}



/* ==================================================================================

chosen_area

================================================================================== */
.title_top {
padding: 0 10%;
line-height: 1.5;
text-align: center;
}
.title_top .font_e {
font-size: 1.5em;
}
.title_top .sub {
font-size: 2.5em;
letter-spacing: 1px;
font-weight: bold;
}

.chosen_area .box_area {}
.chosen_area .box_area .text {
}
.chosen_area .box_area [class*="box_"]:nth-child(odd) .text {
padding: 70px 10% 70px 5%;
}
.chosen_area .box_area [class*="box_"]:nth-child(even) .text {
padding: 70px 5% 70px 10%;
}

.chosen_area .box_area [class*="box_"] {
position: relative;
margin-top: 100px;
}

.chosen_area .box_area .main_title {
font-size: 2.2em;
line-height: 1.5;
font-weight: bold;
color: #fff;
padding: 0 0 50px 0;
}
.chosen_area .box_area [class*="box_"]:nth-child(odd) .main_title {
left: 10%;
}
.chosen_area .box_area [class*="box_"]:nth-child(even) .main_title {
right: 10%;
text-align: right;
}

.chosen_area .box_area ul {
display: flex;
gap: 30px;
color: #fff;
}
.chosen_area .box_area ul li {
background: linear-gradient( rgba(32,49,85,0.8) , rgba(32,49,85,0.2) );
width: 100%;
padding: 25px 3%;
}
.chosen_area .box_area ul li .title {
font-size: 1.3em;
font-weight: bold;
line-height: 1.5;
display: block;
margin: 0 0 20px 0;
}

.chosen_area .box_area .img {
position: absolute;
}

.chosen_area .box_area .text .title {
font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.5;
    margin: 0 0 40px 0;
	 position: relative;
}
.chosen_area .box_area .text .title:before {
content: "";
    width: 20%;
    height: 1px;
    background: #fff;
    left: 0;
    bottom: -20px;
    position: absolute;
}

.chosen_area .box_area [class*="box_"]:nth-child(odd) {
margin-left: 10%;
}
.chosen_area .box_area [class*="box_"]:nth-child(even) {
margin-right: 10%;
}

.chosen_area .box_area [class*="box_"] .img {
bottom: 0;
width: 35vw;
max-width: 520px;
min-width: 350px;
}
.chosen_area .box_area [class*="box_"]:nth-child(odd) .img {
right: 0;
}
.chosen_area .box_area [class*="box_"]:nth-child(even) .img {
left: 0;
}

.chosen_area .box_area img {
transition: all 3000ms;
transform: scale(1.0001);
}
.chosen_area .box_area [class*="box_"]:nth-child(odd) img {
transform-origin: right bottom;
}
.chosen_area .box_area [class*="box_"]:nth-child(odd):hover img {
transform: scale(1.03);
transform-origin: right bottom;
}

.chosen_area .box_area [class*="box_"]:nth-child(even) img {
transform-origin: left bottom;
}
.chosen_area .box_area [class*="box_"]:nth-child(even):hover img {
transform: scale(1.03);
transform-origin: left bottom;
}



/* box_01
======================================== */
.chosen_area .box_area .box_01 {
background: url(../img/top/chosen_01_bg.jpg) scroll no-repeat 0 0 / cover;
}

/* box_02
======================================== */
.chosen_area .box_area .box_02 {
background: url(../img/top/chosen_02_bg.jpg) scroll no-repeat 0 0 / cover;
}

/* box_03
======================================== */
.chosen_area .box_area .box_03 {
background: url(../img/top/chosen_03_bg.jpg) scroll no-repeat 0 0 / cover;
}




/* ==================================================================================

what_area

================================================================================== */
.what_area a {
background: var(--main-color);
color: #fff;
display: flex;
}
.what_area .img {
width: 50%;
}
.what_area .img img {
height: 80vh;
width: 100%;
}
.what_area .text {
text-align: right;
padding: 32vh 0 0 100px;
margin: 0 15% 0 0;
position: relative;
width: 35%;
}
.what_area .text img {
opacity: 0.2;
    width: 70vw;
    max-width: 100vw;
    position: absolute;
    right: 0;
    top: 15vh;
}
.what_area .text .title {
font-size: 2.5em;
font-weight: bold;
margin: 0 0 20px 0;
}
.what_area .text .title span {
font-size: 1.25em;
line-height: 1.4;
letter-spacing: 2px;
}
.what_area .btn_red {
margin: 5vh 0 0 0;
}
.what_area .btn_red span {
margin: 0 0 0 auto;
}



/* ==================================================================================

merit_area

================================================================================== */
.merit_area {
position: relative;
    margin: 50px 0;
}

.merit_area .main_title {
    text-align: center;
    font-size: 2.5em;
    line-height: 1.5;
font-weight: bold;
padding: 50px 0;
}
.merit_area .main_title span {
font-size: 1.2em;
}

.merit_area ul {
display: flex;
}
.merit_area li {
position: relative;
width: 100%;
}
.merit_area li a {
  display: block;
}
.merit_area li img {
min-height: 400px;
max-height: 450px;
width: 100%;
object-position: top;
}
.merit_area p {
position: absolute;
width: 100%;
left: 0;
top: 25%;
font-size: 1.2em;
color: #fff;
line-height: 1.6;
padding: 0 10%;
box-sizing: border-box;
}
.merit_area p span {
text-align: center;
letter-spacing: 2px;
font-size: 1.5vw;
font-weight: bold;
margin: 0 0 -10px 0;
display: block;
}
.merit_area .btn_white {
position: absolute;
left: 50%;
bottom: 10%;
width: 50%;
transform: translateX(-50%);
}
.merit_area .btn_white .btn {
padding: 20px 0;
font-size: 1.4em;
font-weight: bold;
letter-spacing: 1px;
}
.merit_area .btn_white .btn:before {
width: 13px;
right: 5%;
}



/* ==================================================================================

mv

================================================================================== */
.mv {
position: relative;
margin: 110px 0 0 0;
}
.mv:before {
content: "";
background: linear-gradient(90deg, #203155, #fff);
width: 40%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 9000;
mix-blend-mode: multiply;
}

.mv .text {
position: absolute;
left: 5%;
top: 50%;
transform: translateY(-50%);
color: #fff;
z-index: 9999;
mix-blend-mode: hard-light;
}
.mv .text p {
font-weight: bold;
letter-spacing: 2px;
    font-size: 2.5em;
    line-height: 1.5;
    padding: 0 0 30px 0;
    text-shadow: 0 0 10px var(--main-color);
}
.mv .text li {
position: relative;
    color: #fff;
    font-size: 1.5em;
    padding: 10px 25px;
    margin: 10px 0;
background: linear-gradient(90deg, var(--main-color), rgba(32,49,85,0));
}
.mv .text li span {
font-size: 1.5em;
    font-weight: bold;
}

.mv img {
height: 80vh;
width: 100%;
}
.mv .slick-slider {
padding: 0;
}



/* ==================================================================================

header

================================================================================== */
.header {
position:fixed;
width: 100%;
min-width: 900px;
height: 110px;
z-index: 10000;
top: 0;
background: rgba(255,255,255,0.9);
transition: all 500ms cubic-bezier(0.215,0.610,0.355,1.000);
}


/* logo
======================================== */
.header .logo {
position: absolute;
left: 2%;
top: 35px;
width: 25%;
max-width: 270px;
}


/* header_link
======================================== */
.header_link {
display: flex;
justify-content: right;
}
.header_link ul {
display: flex;
}

.header_link .link_01 {
margin: 10px 5px 0 0;
}
.header_link .link_01 a {
padding: 5px 10px;
font-size: 0.8em;
display: inline-block;
}
.header_link .link_01 a:hover {
color: var(--main-color-hover);
}

.header_link .link_02 {
text-align: center;
}
.header_link .link_02 .btn_blue a {
height: 35px;
line-height: 35px;
font-size: 0.9em;
width: 130px;
}
.header_link .link_02 .btn_red a {
height: 50px;
line-height: 50px;
padding: 0 2vw;
font-size: 1.2em;
}
.header_link .link_02 .btn_blue {
margin: 8px 10px 0 0;
}

.header_link .link_02 a span {
position: relative;
}
.header_link .link_02 a span:before {
position: absolute;
}

.online a span,
.document a span {
padding: 0 0 0 20px;
}
.online a span:before,
.document a span:before {
left: 0;
top: -5px;
}
.online a span:before {
content: url(../img/bace/icon_online.svg);
width: 16px;
}
.document a span:before {
content: url(../img/bace/icon_document.svg);
width: 16px;
}

.contact a span {
padding: 0 0 0 32px;
}
.contact a span:before {
content: url(../img/bace/icon_mail.svg);
width: 24px;
left: 0;
top: -8px;
}


/* menu
======================================== */
.menu {
display: none;
}

.gnav_menu {
display: flex;
justify-content: right;
}
.gnav_menu li {
}
.gnav_menu a {
position: relative;
padding: 0 1.5vw;
height: 60px;
line-height: 60px;
font-size:max(0.8vw,12px);
}
.gnav_menu a:hover {
color: var(--main-color-hover);
}
.gnav_menu a:before {
content: "";
position: absolute;
height: 0;
width: 100%;
bottom: 0;
left: 50%;
background: #203155;
transform: translate(-50%);
opacity: 0;
transition: all 300ms cubic-bezier(0.215,0.610,0.355,1.000);
}
.gnav_menu a:hover:before {
height: 4px;
bottom: 0;
opacity: 1;
}
.gnav_menu a span {
font-weight: bold;
}



/* ==================================================================================

header fixed

================================================================================== */
.header.fixed {
top: -50px;
}
.header.fixed .logo {
top: 63px;
}


/* ==================================================================================

contact_btn

================================================================================== */
.contact_btn {}
.contact_btn a {
display: block;
padding: 40px 15%;
border-top: 1px solid var(--boder-color);
position: relative;
transition: all 1000ms cubic-bezier(0.215,0.610,0.355,1.000);
}
.contact_btn a:hover{
padding: 40px 12%;
}
.contact_btn a:hover {
color: #fff;
}
.contact_btn a span {
position: relative;
z-index: 1;
transition: all 1000ms cubic-bezier(0.215,0.610,0.355,1.000);
}
.contact_btn a:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--main-color);
transform-origin: right top;
transform: scale(0, 1);
transition: transform 0.5s;
}
.contact_btn a:hover:after {
transform-origin: left top;
transform: scale(1, 1);
}

.contact_btn a:before {
content: url(../img/bace/arrow_01.svg);
width: 18px;
position: absolute;
right: 15%;
top: 50%;
z-index: 1;
line-height: 0;
transform: translateY(-50%);
}
.contact_btn a:hover:before {
mix-blend-mode: exclusion;
right: 10%;
}

.contact_btn .font_e {
font-size: 2.5em;
line-height: 1.2;
margin: 0 15px 0 0;
}
.contact_btn .font_e span {
color: var(--spot-color);
}
.contact_btn a:hover .font_e {
letter-spacing: 5px;
}


/* second_btn
======================================== */
.second_btn {}
.second_btn a {
background: var(--main-color);
color: #fff;
}
.second_btn a:before {
content: url(../img/bace/arrow_01_white.svg);
}
.second_btn a:hover:before {
mix-blend-mode: unset;
}
.second_btn a:after {
background: var(--main-color-hover);
}
.second_btn a:hover:after {}
.second_btn a .font_e {
letter-spacing: 2px;
}



/* ==================================================================================

footer

================================================================================== */
.footer {
}


/* footer_text
======================================== */
.footer .footer_text {
padding: 30px 15%;
}


/* path
======================================== */
.footer .path {
padding: 0 15% 50px;
font-size: 0.8em;
}
.footer .path ul {
display: flex;
}
.footer .path li a:after {
content: "/";
opacity: 0.7;
margin: 0 15px;
}


/* footer_link
======================================== */
.footer_link {
display: flex;
padding: 0 15%;
}
.footer_link .logo_area {
width: 30%;
}
.footer_link .logo_area a {
width: 70%;
}
.footer_link .logo_area ul {
display: flex;
}
.footer_link .logo_area ul li {
margin: 20px 5px 0 0;
}
.footer_link .logo_area ul img {
height: 25px;
object-fit: contain;
}
.footer_link .logo_area ul li a:hover {
opacity: 0.7;
}

.footer_link .link {
display: flex;
width: 70%;
font-size: 0.9em;
}
.footer_link .link ul {
width: 100%;
}
.footer_link .link .sub a:before {
content: "-";
margin: 0 5px 0 10px;
color: #bbb;
}
.footer_link .link a:hover {
color: var(--main-color-hover);
}


.footer .copy {
text-align: center;
font-size: 0.6em;
letter-spacing: 2px;
padding: 30px 0 10px 0;
opacity: 0.8;
}



/* ==================================================================================

ページトップ

================================================================================== */
#page-top {
position: fixed;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
background: rgba(150,150,150,0.2);
z-index: 9999;
cursor: pointer;
transition: all 1000ms cubic-bezier(0.215,0.610,0.355,1.000);
}
#page-top:hover {
background: rgba(200,200,200,0.9);
}
#page-top:before {
content: "";
width: 13px;
height: 13px;
border: solid #fff;
border-width: 1px 1px 0 0;
transform: rotate(-45deg);
position: absolute;
right: 16px;
top: 24px;
}



/* ==================================================================================

ふわっと表示

================================================================================== */
.move_bottom {transform : translate(0, 130px);}
.move_top {transform : translate(0, -130px);}
.move_right {transform : translate(130px, 0);}
.move_left {transform : translate(-130px, 0);}

[class*="move_"] {
opacity: 0;
}
[class*="_on"] {
transition: all 3000ms cubic-bezier(0.215,0.610,0.355,1.000);
transform : translate(0, 0);
opacity: 1;
}

/* 横並び時に順に出す -----------------*/
[class*="move"]:nth-of-type(2) {
moz-transition-delay: 200ms;
-webkit-transition-delay: 200ms;
-o-transition-delay: 200ms;
-ms-transition-delay: 200ms;
}
[class*="move"]:nth-of-type(3) {
moz-transition-delay: 400ms;
-webkit-transition-delay: 400ms;
-o-transition-delay: 400ms;
-ms-transition-delay: 400ms;
}
[class*="move"]:nth-of-type(4) {
moz-transition-delay: 600ms;
-webkit-transition-delay: 600ms;
-o-transition-delay: 600ms;
-ms-transition-delay: 600ms;
}
[class*="move"]:nth-of-type(5) {
moz-transition-delay: 800ms;
-webkit-transition-delay: 800ms;
-o-transition-delay: 800ms;
-ms-transition-delay: 800ms;
}
[class*="move"]:nth-of-type(6) {
moz-transition-delay: 1000ms;
-webkit-transition-delay: 1000ms;
-o-transition-delay: 1000ms;
-ms-transition-delay: 1000ms;
}
[class*="move"]:nth-of-type(7) {
moz-transition-delay: 1200ms;
-webkit-transition-delay: 1200ms;
-o-transition-delay: 1200ms;
-ms-transition-delay: 1200ms;
}
[class*="move"]:nth-of-type(8) {
moz-transition-delay: 1400ms;
-webkit-transition-delay: 1400ms;
-o-transition-delay: 1400ms;
-ms-transition-delay: 1400ms;
}
[class*="move"]:nth-of-type(9) {
moz-transition-delay: 1600ms;
-webkit-transition-delay: 1600ms;
-o-transition-delay: 1600ms;
-ms-transition-delay: 1600ms;
}
[class*="move"]:nth-of-type(10) {
moz-transition-delay: 1800ms;
-webkit-transition-delay: 1800ms;
-o-transition-delay: 1800ms;
-ms-transition-delay: 1800ms;
}



/* ==================================================================================

共通　画像拡大

================================================================================== */
.img_zoom {overflow:hidden;}
.img_zoom .img {overflow: hidden;}
.img_zoom img {
transition: all 10000ms cubic-bezier(0.215,0.610,0.355,1.000);
z-index:1;
-moz-transform: scale(1.01);
-webkit-transform: scale(1.01);
-ms-transform: scale(1.01);
transform: scale(1.01);
vertical-align: bottom;
}
.img_zoom:hover img {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05) rotate(1deg);
}

.blog-detail__image {
    max-width: 200px;
}

.writer-right {
    margin-left: 15px;
}

.news_all_list .btn_gray {
    text-align: center;
    margin: 50px auto 0;
    width: 30%;
    display: block;
}
.news_all_list .btn_gray .btn {
    padding: 15px 0;
}

.pdf {
border: none;
    text-align: center;
    letter-spacing: 1px;
    color: #fff !important;
    background: var(--main-color);
    display: block;
    width: 450px;
    height: 50px;
    line-height: 50px;
    transition: all 500ms cubic-bezier(0.215,0.610,0.355,1.000);
    z-index: 10;
    cursor: pointer;
    margin-top: 20px;
    max-width: 100%;
}

}
/* ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

【PC】ウィンドウ幅が769px以上の場合に適用するCSS

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ */