/**************************************************

BASE

****************************************************/


/* hero-home slider */

.hero-image {
    overflow: hidden;
    position: relative;
}

#topVisual>div {
    overflow: hidden;
}

#topVisual img {
    display: block;
    width: 100%;
    height: auto;
}

body .slick-dots {
    left: 55%;
    max-width: 600px;
    transform: translateX(0);
    bottom: 20px;
    text-align: left;
}

body .slick-dots li {
    width: 77px;
    height: 7px;
    margin: 0 10px;
}

body .slick-dots li button {
    width: 77px;
    height: 7px;
    line-height: 7px !important;
}

body .slick-dots li button::before {
    opacity: 1;
    line-height: 7px !important;
    width: 77px;
    height: 7px;
    font-size: 15px;
    background: #cccccc;
    content: '';
}

body .slick-dots li.slick-active button::before {
    background: #FFAD00;
}

body .slick-dotted.slick-slider {
    margin-bottom: 0;
}


/* title */

.title {
    margin-bottom: 40px;
}

.title span {
    font-size: 4rem;
    color: #1E1F89;
    display: block;
}

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


/*************************************************

CONTENTS

****************************************************/

/* section-1 */

.section-1 {
    padding: 80px 0 110px;
    /*background: url(../../../../../../wp-content/uploads/2021/02/bg_home1-scaled.jpg) no-repeat right top / cover;*/
    background: url(/wp-content/uploads/2021/02/bg_home1-scaled.jpg) no-repeat right top / cover;
}

.section-1 .card {
    flex-basis: 47%;
    margin-bottom: 40px;
}

.section-1 .card .card__title {
    margin: 15px 0 10px;
    font-size: 3.2rem;
    color: #1E1F89;
}


.section-1 .card a,
.section-1 .card2 a {
    display: block;
    text-decoration: none;
    position: relative;
}

.section-1 .card a:hover,
.section-2 .card a:hover {
    opacity: 1;
}

.section-1 .card__img {
    overflow: hidden;
    position: relative;
}

.section-1 .card__img::before {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 7px;
    right: 7px;
    bottom: 7px;
    z-index: 1;
    border: 1px solid #fff;
}

.section-1 .card__img img,
.section-2 .card a img {
    transition: all 0.3s;
}

.section-1 a:hover .card__img img,
.section-2 a:hover .card__img img {
    transform: scale(1.1, 1.1);
}

.section-1 .catch {
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.section-1 .group2 {
    margin-top: 100px;
}

.section-1 .card2 {
    flex-basis: 47%;
}

.section-1 .card2 a h2 {
    color: #fff;
    font-size: 3.3rem;
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1.2;
}

.section-1 .card2 a h2 small {
    display: block;
    font-size: 1.8rem;
    margin-top: 20px;
}

/* section-2 */

.section-2 {
    padding: 85px 0 100px;
    background: url(/wp-content/uploads/2021/02/bg_home4-scaled.jpg) no-repeat right top / cover;
    color: #fff;
}

.section-2 .title span,
.section-2 .title small,
.section-2 .catch {
    color: #fff;
}

.section-2 .catch {
    margin-bottom: 40px;
}

.section-2 .card {
    flex-basis: 30%;
}

.section-2 .card a {
    display: block;
    text-decoration: none;
    padding: 0 0 27px 0;
    position: relative;
}

.section-2 .card .card__img {
    overflow: hidden;
}

.section-2 .card span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: url(/wp-content/uploads/2021/02/ico_arrow_white.png) no-repeat 15px center #FFAD00;
    background-size: 23px auto;
    min-width: 235px;
    line-height: 60px;
}

.section-2 .wrap-btn {
    margin-top: 55px;
}

.section-2 .wrap-btn img {
    max-width: 576px;
    width: 100%;
}

/* section-3 */

.section-3 {
    overflow: hidden;
    padding: 105px 0;
}

.section-3__img {
    flex-basis: 57%;
}

.section-3__txt {
    flex-basis: 43%;
}

.section-3 .title {
    margin-bottom: 20px;
}

.section-3 ul {
    margin-top: 45px;
}

.section-3 li {
    display: inline-block;
}

.section-3 li+li {
    margin-left: 25px;
}

/* section-4 */

.section-4 {
    padding: 100px 0;
    background: #F6F6F6;
}

.section-4__img {
    flex-basis: 34%;
}

.section-4__img img {
    max-width: 413px;
    width: 100%;
}

.section-4__news {
    flex-basis: 60%;
}

.section-4__news .title span {
    display: inline-block;
    vertical-align: middle;
}

.section-4__news .title small {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.section-4__news .title {
    margin-bottom: 10px;
}

.section-4__news ul {
    border-top: 1px solid #ccc;
    margin-bottom: 15px;
}

.section-4__news li {
    padding: 15px 0;
    font-size: 1.6rem;
    border-bottom: 1px solid #ccc;
}

.section-4__news li time {
    font-weight: bold;
    color: #1E1F89;
    margin-right: 25px;
}

.more-link {
    color: #1E1F89;
    font-weight: bold;
    font-size: 1.6rem;
    float: right;
}

/* Responsive
*********************************************************/

.spOn {
    display: none !important;
}

/* Tablet side Only */
@media screen and (min-width:829px) and (max-width:1200px) {

    .section-1 a:hover .card__img img,
    .section-2 a:hover .card__img img {
        transform: scale(1, 1);
    }

    .section-3 .flex{
        flex-direction: column;
    }

    .section-3 .title,
    .section-3 ul{
        text-align: center;
    }

    .section-3__img{
        margin-bottom: 20px;
    }

    

}

/* Smartphone side + Tablet Vertical */
@media screen and (max-width:828px) {
	
	.section-1 .card p,
    .section-2 .card p {
		text-align: left;
    }
	
	.catch {
		text-align: left;
}
	
    body .slick-dots {
        bottom: 5px;
    }

    .section-1,
    .section-2,
    .section-3,
    .section-4 {
        padding: 40px 0;
    }

    .title {
        margin-bottom: 20px;
    }

    .title span {
        font-size: 2.3rem;
    }

    .title small,
    .section-1 .catch {
        font-size: 1.6rem;
    }

    .section-1 a:hover .card__img img,
    .section-2 a:hover .card__img img {
        transform: scale(1, 1);
    }

    .section-1 .card .card__title {
        font-size: 2rem;
    }

    .section-1 .group2,
    .section-2 .wrap-btn {
        margin-top: 40px;
    }

    .section-1 .card2 a h2 {
        font-size: 2.3rem;
        left: 20px;
    }

    .section-1 .card2 a h2 small {
        display: block;
        font-size: 1.6rem;
        margin-top: 10px;
    }

    .section-2 .card span {
        position: static;
        transform: translateX(0);
        display: block;
    }

    .section-2 .card a {
        padding: 0;
    }

    .section-3 .flex {
        flex-direction: column;
    }

    .section-3__img {
        margin-bottom: 20px;
    }

    .section-3 .title {
        text-align: center;
    }

    .section-3 ul {
        margin-top: 20px;
        text-align: center;
    }

    .section-4__news li a {
        display: block;
    }
}

/* Smartphone Vertical */
@media screen and (max-width:415px) {
    .spOn {
        display: block !important;
    }

    .spOff {
        display: none !important;
    }

    #topVisual {
        padding-bottom: 30px;
    }

    body .slick-dots {
        bottom: 0;
        left: 0;
        text-align: center;
    }

    .section-1 .flex {
        flex-direction: column;
    }

    .section-1 .card,
    .section-2 .card {
        margin-bottom: 20px;
    }

    .section-1 .card2+.card2 {
        margin-top: 20px;
    }

    .section-2 .flex {
        flex-wrap: wrap;
    }

    .section-2 .card span {
        font-size: 1.4rem;
        background: url(/wp-content/uploads/2021/02/ico_arrow_white.png) no-repeat 10px center #FFAD00;
        background-size: 16px auto;
        min-width: auto;
        line-height: 50px;
    }

    .section-2 .card {
        flex-basis: 47%;
    }

    .section-2 .wrap-btn {
        margin-top: 20px;
    }

    .section-3 li {
        display: block;
    }

    .section-3 li+li {
        margin-left: 0;
        margin-top: 15px;
    }

    .section-4 .flex {
        flex-direction: column;
    }

    .section-4__news {
        margin-top: 40px;
    }

}