@charset "utf-8";

/*===========================================================
特徴
===========================================================*/

.area01 {
	max-width: 130rem;
}

.inPtTxt01 span {
	margin: 1rem 1rem 0 0;
}

/*===========================================================
online01
===========================================================*/

.online01 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 12rem 1.5rem 0;
}

.online01-frame {
    max-width: 122rem;
    width: 100%;
    margin: 0 auto;
}

.online01-img-box {
    width: 100%;
}

.online01-container {
    max-width: 93.3rem;
    width: 100%;
    margin: -13% auto 0;
    padding: 4rem 4rem 5rem;
    border-image: url(../../../../uploads/on_line_bg01.png) 200 / 20rem / 0rem round;
    position: relative;
    z-index: 1;
}

.online01-area {
    max-width: 70rem;
    width: 100%;
    margin: 0 auto;
}

.online-title {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 2.16666;
}

.online-title strong {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 2.16666;
}

.online-title-decoration01 {
    color: var(--primary);
}

.online-title-box {
    text-align: center;
}

.online01-text-box {
    margin: 4rem 0 0;
}

.online01-text-box .in-text01 strong {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary);
}

/*===========================================================
online02
===========================================================*/

.online02 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
	padding: 0 1.5rem;
}

.online02-container {
    max-width: 122rem;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 1.5rem 7rem;
    border: 0.1rem solid var(--base-font-color);
    border-radius: 2rem;
}

.online-title-decoration02 {
    padding: 0.4rem 2.5rem 0.6rem;
    background: var(--primary);
    color: var(--white);
    border-radius: 0.5rem;
}

.online02-text-box {
    margin: 4rem 0 0;
}

/*===========================================================
online03
===========================================================*/

.online03 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 14rem 1.5rem 12rem;
}

.online03-container {
    max-width: 100rem;
    width: 100%;
    margin: 6rem auto 0;
    display: flex;
    align-items: stretch;
    border-radius: 2rem;
    background: linear-gradient(120deg, rgba(5, 46, 135, 100%), rgba(16, 75, 203, 90%));
    overflow: hidden;
}

.online03-img-box {
    max-width: 41.7rem;
    width: 100%;
}

.online03-text-container {
    padding: 3rem 1.5rem 2rem;
    max-width: 58.3rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.online03-text-area {
    max-width: 47.8rem;
    width: 100%;
    margin: 0 auto;
    color: var(--white);
}

.online03-text-box {
    padding: 0 0 2rem;
    border-bottom: 0.1rem solid var(--white);
}

.online03-btn-area {
    margin: 3rem 0 0;
    display: flex;
    justify-content: center;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1920px) {


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

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


}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1024px) {

/*===========================================================
特徴
===========================================================*/

.tit32 {
	font-size: 2.3rem;
}


/*===========================================================
online01
===========================================================*/

.online01 {
    padding: 10rem 1.5rem 0;
}

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 768px) {

/*===========================================================
特徴
===========================================================*/

.tit32 {
	font-size: 2.3rem;
}

/*===========================================================
online01
===========================================================*/

.online01 {
    padding: 8rem 1.5rem 0;
}

.online-title {
	font-size: 2.6rem;
}

.online-title strong {
	font-size: 3rem;
}

/*===========================================================
online03
===========================================================*/

.online03 {
    padding: 12rem 1.5rem 10rem;
}

.online03-container {
    max-width: 50rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.online03-img-box {
    max-width: 100%;
}

.online03-text-container {
	padding: 4rem 1.5rem 4rem;
}

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 576px) {

/*===========================================================
特徴
===========================================================*/

.tit32 {
	font-size: 1.8rem;
}

/*===========================================================
online01
===========================================================*/

.online01 {
    padding: 6rem 1.5rem 0;
}

.online-title {
	font-size: 1.8rem;
}

.online-title strong {
	font-size: 2rem;
}

.online-title-decoration02 {
	padding: 0.4rem 1.5rem 0.6rem;
}

/*===========================================================
online03
===========================================================*/

.online03 {
    padding: 10rem 1.5rem 8rem;
}

.common-title-box02 .bgTxt01 {
    font-size: 6rem;
    bottom: -1rem;
}


}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 414px) {


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

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

/*===========================================================
online03
===========================================================*/

.common-title-box02 .bgTxt01 {
    font-size: 5rem;
}

}


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