@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/* ==================
    common
===================== */
html{
    font-size: 62.5%;
}

body{
    font-size: 1.7rem;
    font-weight: 400;
    font-family: 'Noto Sans JP';
    color: #333;
    background-color: #fff;
}

.inner{
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

.sp{
    display: none;
}

.heading1{
    font-size: 4rem;
    font-weight: 300;
    color: #fff;
}

.heading1 .size--sm{
    display: inline-block;
    width: 100%;
    font-size: 0.75em;
    font-weight: 100;
    margin-bottom: 35px;

}

.heading2{
    text-align: center;
    font-weight: 100;
    font-size: 4rem;
    color: #3b5485;
}

.top-about .heading2{
    color: #62769d;
}

.template-news .heading2{
    color: #333;
}

.template-contact .heading2,
.service-vision .heading2{
    color: #fff;
}

.lead-text{
    text-align: center;
    font-size: 3rem;
    margin-top: 25px;
    line-height: 1.66;
}

.top-about .lead-text{
    color: #fff;
}

.template-contact .lead-text{
    color: #fff;
    margin-top: 60px;
    line-height: 1.466;
}

.btn{
    width: 90%;
    max-width: 300px;
    margin: auto;
    border: 1px solid;
    border-radius: 50px;
    background-color: transparent;
    overflow: hidden;
    transition: 0.4s ease;
}

.top-about .btn{
    margin-top: 60px;
    border-color: #fff;
}

.template-case .btn{
    margin-top: 80px;
    border-color: #333;
}

.template-news .btn{
    margin-top: 70px;
    border-color: #333;
}

.template-case .btn:hover,
.template-news .btn:hover{
    background-color: #333;
}

.template-contact .btn{
    margin-top: 50px;
    border-color: #fff;
}

.top-about .btn:hover,
.template-contact .btn:hover{
    background-color: #fff;
}

.article-single .btn,
.archive-section .btn,
.archive .template-case .btn{
    margin-top: 80px;
    border-color: #3b5485;
}

.article-single .btn:hover,
.archive-section .btn:hover,
.archive .template-case .btn:hover{
    background-color: #3b5485;
}

.btn__link{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 20px 0;
    position: relative;
    font-size: 1.5rem;
    transition: 0.4s ease;
}

.top-about .btn__link,
.template-contact .btn__link{
    color: #fff;
}

.top-about .btn:hover .btn__link{
    color: #3b5485;
}

.template-contact .btn:hover .btn__link{
    color: #333;
}

.template-case .btn__link,
.template-news .btn__link{
    color: #333;
}

.template-case .btn:hover .btn__link,
.template-news .btn:hover .btn__link{
    color: #fff;
}

.article-single .btn__link,
.archive-section .btn__link,
.archive .template-case .btn__link{
    color: #3b5485;
}


.article-single .btn:hover .btn__link,
.archive-section .btn:hover .btn__link,
.archive .template-case .btn:hover .btn__link{
    color: #ffffff;
}


.btn__link::before{
    content: "";
    display: block;
    width: 30px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    top: 0;
    right: 5%;
    transition: 0.4s ease;
}

.top-about .btn__link::before,
.template-contact .btn__link::before{
    background-image: url('../img/common/arrow-white01.svg');
}

.top-about .btn:hover .btn__link::before{
    background-image: url('../img/common/arrow-blue01.svg');
}

.template-contact .btn:hover .btn__link::before{
    background-image: url('../img/common/arrow-black01.svg');
}

.template-case .btn__link::before,
.template-news .btn__link::before{
    background-image: url('../img/common/arrow-black01.svg');
}

.template-case .btn:hover .btn__link::before,
.template-news .btn:hover .btn__link::before{
    background-image: url('../img/common/arrow-white01.svg');
}

.article-single .btn__link::before,
.archive-section .btn__link::before,
.archive .template-case .btn__link::before{
    background-image: url('../img/common/arrow-blue01.svg');
}

.article-single .btn:hover .btn__link::before,
.archive-section .btn:hover .btn__link::before,
.archive .template-case .btn:hover .btn__link::before{
    background-image: url('../img/common/arrow-white01.svg');
}

.breadcrumb{
    display: flex;
    align-items: flex-start;
    width: 90%;
    margin: 10px auto 0;
}

.breadcrumb li{
    font-size: 1.3rem;
    font-weight: 400;
    margin-right: 20px;
    position: relative;
    line-height: 1.3;
    flex-shrink: 0;
}

.breadcrumb li::before,
.breadcrumb li::after{
    content: "";
    display: block;
    width: 7px;
    height: 1px;
    background-color: #333;
    position: absolute;
    top: 50%;
    left: 100%;
    transform-origin: right;
}

.breadcrumb li::before{
    transform: translateX(6px) rotate(15deg);
}

.breadcrumb li::after{
    transform: translateX(6px) rotate(-15deg);
}

.breadcrumb li:last-child{
    margin-right: 0;
    flex-shrink: 1;
}

.breadcrumb li:last-child::before,
.breadcrumb li:last-child::after{
    display: none;
}

.breadcrumb a{
    display: inline-block;
    width: 100%;
    height: 100%;
}

.about .page-content{
    margin-top: -30px;
}

@media screen and (max-width: 1024px){
    .heading1,
    .heading2{
        font-size: 3.2rem;
    }

    .heading1 .size--sm{
        margin-bottom: 25px;
    }

    .lead-text {
        font-size: 2.4rem;
        margin-top: 20px;
    }

    .template-contact .lead-text{
        margin-top: 40px;
    }
}

@media screen and (max-width: 767px){
    .pc{
        display: none;
    }

    .sp{
        display: block;
    }

    .heading1,
    .heading2{
        font-size: 2.4rem;
    }

    .heading1 .size--sm{
        margin-bottom: 15px;
    }


    .lead-text {
        font-size: 1.8rem;
        margin-top: 15px;
    }

    .template-contact .lead-text{
        margin-top: 30px;
    }

    .top-about .btn{
        margin-top: 40px;
    }

    .template-case .btn{
        margin-top: 60px;
    }

    .template-news .btn{
        margin-top: 50px;
    }

    .template-contact .btn {
        margin-top: 30px;
    }

    .btn__link{
        font-size: 1.4rem;
	    padding: 18px 0;
    }

    .breadcrumb li{
        font-size: 1.1rem;
    }
	.btn{
	    width: 15em;
	}
}

/* ==================
    header
===================== */
.header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    background-color: #fff;
}

.header__inner{
    display: flex;
    align-items: center;
    padding: 10px 2.8125vw 5px 10px;
}

.header-logo{
    width: 180px;
}

.header-logo__inner{
    display: block;
    width: 100%;
    height: 100%;
}

.header-logo img{
    width: 100%;
}

.header-menu{
    margin-left: auto;
    width: auto;
}

.header-menu__list{
    display: flex;
}

.header-menu__list > li{
    margin-left: 3vw;
	position: relative;
	z-index: 0;
}

.header-menu__list > li:first-child{
    margin-left: 0;
}

.header-menu__list a{
    display: block;
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
    color: #333;
    transition: 0.4s ease;
	padding: 15px 0;
}

.header-menu__list a:hover{
    color: #3b5485;
}

.hamburger-menu {
    display: none;
    position: fixed;
    top: 6px;
    right: 7px;
    width: 40px;
    height: 40px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.6);
}

.bar {
    position: absolute;
    width: 80%;
    height: 2px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #3b5485;
    border-radius: 4px;
    transition: 0.4s ease;
}

.bar_top {
    top: 30%;
}
  
.bar_middle {
    top: 50%;
}
  
.bar_bottom {
    top: 70%;
}
  
.hamburger-menu.js-close .bar_top {
    top: 43%;
    transform: translateX(-50%) rotate(45deg);
}
    
.hamburger-menu.js-close .bar_middle {
    opacity: 0;
    transition: 0.1s;
}
    
.hamburger-menu.js-close .bar_bottom {
    top: 43%;
    transform: translateX(-50%) rotate(-45deg);
}

.sub-menu{
	display: none;
position: absolute;
	top: 100%;
	left: 0;
	width: 200px;
	z-index: 1;
}

.sub-menu a{
	background-color: rgba(59, 84, 133, 1);
	color: #fff;
	padding: 15px;
	font-size: 1.5rem;
}

.sub-menu a:hover{
	color: #fff;
    background-color: rgb(95 119 167);
}

@media screen and (min-width: 1601px){
	.header-menu__list > li {
    margin-left: 48px;
}
}

@media screen and (max-width: 1024px){
    .header-menu__list a{
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 767px){
    .header {
        position: static;
    }

    .header-logo {
        width: 135px;
    }

    .header-menu{
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       z-index: 90;
       background-color: #fff;
       transform: translateX(110%);
       transition: 0.4s ease;
    }
	.header__inner{
	    padding: 5px 2.8125vw 5px 10px;
	}

    .header-menu.js-active{
        transform: translateX(0);
    }
    
    .header-menu__list{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
    }

    .header-menu__list > li{
       text-align: center;
		margin-left: auto;
    }

    .header-menu__list > li:first-child{
        margin-top: 0;
    }

    .header-menu__list a{
        font-size: 1.5rem;
		padding: 20px 0;
    }
	
	.header-menu__list > li > a{
		border-bottom: 1px solid #3b5485;
}

    .hamburger-menu{
        display: block;
    }
	
	.dropdown-parent > a{
position: relative;
	}
	
	.dropdown-parent > a::before,
	.dropdown-parent > a::after{
		content: "";
		display: block;
		width: 20px;
		height: 1px;
		background-color: #3b5485;
		position: absolute;
		top: 50%;
		right: 5%;
		transform: translateY(-50%);
	}
	
	.dropdown-parent > a::after{
		transform: translateY(-50%) rotate(90deg);
		transition: 0.4s ease;
	}
	
	.dropdown-parent > a.js-active::after{
		transform: translateY(-50%) rotate(0deg);
	}
	
	.sub-menu{
	display: none;
position: static;
	width: 100%;
		border-bottom: 1px solid #3b5485;
		margin-top: 5px;
}
	
	.sub-menu li{
		margin-top: 0;
	}
	
	.sub-menu a{
		font-size: 1.3rem;
		padding: 9px 0;
		background-color: transparent;
			color: #3b5485;
	}
}

/* ==================
    mainvisual
===================== */
.mainvisual{
    padding-top: 70px;
}

.mainvisual-wrap{
    position: relative;
}

.top .mainvisual-wrap{
    height: 678px;
}

.under .mainvisual-wrap{
    height: 510px;
}

.mainvisual .img-wrap{
    width: 100%;
    height: 100%;
}

.mainvisual-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right 30% bottom 45%;
}

.mainvisual-inner{
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}

.top .mainvisual-inner .mainvisual-inner__lead01{
    font-size: 6rem;
    line-height: 1.5;
}

.top .mainvisual-inner .mainvisual-inner__lead01 .size--sm{
    font-size: 0.5em;
    display: inline-block;
    width: 100%;
    line-height: 1;
}

.top .mainvisual-inner .mainvisual-inner__text{
    font-size: 1.7rem;
    line-height: 1.88;
    margin-top: 20px;
}

.top .mainvisual-inner .mainvisual-inner__lead02{
    font-size: 2.6rem;
    display: inline-block;
    margin-top: 40px;
    padding: 3px 20px;
    background-color: #3b5485;
    color: #fff;
}

.under .color-layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.8;
    background-color: rgba(0, 0, 0, 1);
}

.about .color-layer,
.single .color-layer,
.archive .color-layer,
.contact .color-layer,
.confirm .color-layer,
.thanks .color-layer,
.error .color-layer,
.service-archive .color-layer{
    opacity: 0.2;
}

@media screen and (max-width: 1024px){
    .top .mainvisual-inner .mainvisual-inner__lead01 {
        font-size: 4.5rem;
    }

    .top .mainvisual-inner .mainvisual-inner__text {
        font-size: 1.6rem;
        margin-top: 15px;
    }

    .top .mainvisual-inner .mainvisual-inner__lead02 {
        font-size: 2.3rem;
        margin-top: 25px;
    }
}

@media screen and (max-width: 767px){
    .mainvisual {
        padding-top: 0;
    }

    .top .mainvisual-wrap{
        height: 610px;
    }

    .under .mainvisual-wrap{
        height: 210px;
    }

    .top .mainvisual-inner .mainvisual-inner__lead01 {
        font-size: 2.8rem;
    }

    .top .mainvisual-inner .mainvisual-inner__text {
        font-size: 1.3rem;
        margin-top: 10px;
    }

    .top .mainvisual-inner .mainvisual-inner__lead02 {
        font-size: 1.8rem;
        margin-top: 20px;
    }
	.mainvisual-inner{
	    top: 43%;
	}
}
@media screen and (max-width: 520px){
	.top .mainvisual-wrap{
		height: 550px;
	}
}
/* ==================
    top-about
===================== */
.top-about{
    padding: 80px 0 145px;
    background-color: #3b5485;
}

.top-about__text{
    text-align: center;
    font-size: 1.7rem;
    line-height: 2;
    margin-top: 50px;
    color: #fff;
}

@media screen and (max-width: 1024px){
    .top-about{
        padding: 70px 0 135px;
    }

    .top-about__text{
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 767px){
    .top-about{
        padding: 60px 0 90px;
    }

    .top-about__text{
        font-size: 1.5rem;
        margin-top: 20px;
	    line-height: 1.8;
    }
}

/* ==================
    service
===================== */
.service{
    padding: 75px 0 100px;
}

.service__content{
    display: flex;
    flex-wrap: wrap;
    margin-top: 110px;
	background-color: #323232;
}

.service__item{
    width: 50%;
    height: 550px;
}

.service__item-link{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.service__item .img-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.service__item .img-wrap::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(50, 50, 50, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.service__item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: 0.4s ease;
}

.service__item-link:hover img{
    transform: scale(1.1, 1.1);
}

.service__item-body{
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 450px;
    padding-bottom: 40px;
    z-index: 1;
}

.service__item-body::before{
    content: "";
    display: block;
    width: 70px;
    height: 15px;
    background: url('../img/common/arrow-white02.svg') no-repeat;
    background-size: 100%;
    background-position: center;
    position: absolute;
    bottom: 0;
    right: 0;
}

.service__item-body .service__number{
    font-size: 7rem;
    font-weight: 100;
    display: inline-block;
    width: 100%;
    color: rgba(255, 255, 255, 0.3);
}

.service__item-body .service__name{
    font-size: 3.6rem;
    margin-top: 15px;
    color: #fff;
}

.service__item-body .service__text{
    line-height: 2;
    font-size: 1.7rem;
    margin-top: 30px;
    color: #fff;
}

@media screen and (max-width: 1024px){
    .service__content {
        margin-top: 90px;
    }

    .service__item{
        height: 400px;
    }


    .service__item-body .service__number {
        font-size: 5.5rem;
    }

    .service__item-body .service__name {
        font-size: 3.2rem;
    }

    .service__item-body .service__text {
        font-size: 1.6rem;
        margin-top: 20px;
    }
}

@media screen and (max-width: 767px){
    .service {
        padding-top: 60px;
    }

    .service__content {
        margin-top: 60px;
		background-color: transparent;
    }

    .service__item{
        width: 100%;
        height: 350px;
    }

    .service__item-body {
        padding-bottom: 25px;
    }

    .service__item-body::before {
        width: 55px;
    }

    .service__item-body .service__number {
        font-size: 4rem;
    }

    .service__item-body .service__name {
        font-size: 2.8rem;
        margin-top: 10px;
    }

    .service__item-body .service__text {
        font-size: 1.5rem;
        margin-top: 15px;
		line-height:1.8;
    }
}

/* ======================
    template-case study
=========================*/
.template-case{
    padding: 90px 0 155px;
}

.template-case__content{
    margin-top: 95px;
}

.template-case__card{
    display: flex;
    width: 95%;
    max-width: 1352px;
    margin-top: 65px
}

.template-case__card:nth-child(even){
    margin-left: auto;
}

.template-case__card:first-child{
    margin-top: 0;
}

.template-case__body{
    order: 2;
    flex-grow: 1;
    background-color: #3b5485;
    transition: 0.4s ease;
    max-width: 582px;
}

.template-case__body:hover{
    opacity: 0.9;
}

.template-case__body:hover ~ .img-wrap img{
    transform: scale(1.1, 1.1);
}

.template-case__card:nth-child(even) .template-case__body{
    order: 1;
}

.template-case__body-link{
    padding: 70px 9.45% 45px;
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.4s ease;
    pointer-events: auto;
}

.template-case__title{
    font-size: 3rem;
    line-height: 1.46;
    color: #fff;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.template-case__name{
    font-size: 1.7rem;
    margin-top: 30px;
    display: inline-block;
    color: #fff;
    width: 100%;
}

.template-case-btn{
    margin-top: 105px;
    display: inline-block;
    font-size: 1.5rem;
    padding-right: 45px;
    position: relative;
    color: #fff;
}

.template-case-btn::before{
    content: "";
    display: block;
    width: 30px;
    height: 100%;
    background: url('../img/common/arrow-white01.svg') no-repeat;
    background-size: 100%;
    background-position: center;
    position: absolute;
    top: 0;
    right: 0;
}

.template-case__card .img-wrap{
    width: 56.95%;
    max-width: 770px;
    order: 1;
    overflow: hidden;
}

.template-case__card .img-wrap img{
    transition: 0.4s ease;
}

.template-case__card:nth-child(even) .img-wrap{
    order: 2;
}

.template-case__card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1024px){
    .template-case {
        padding: 70px 0 95px;
    }

    .template-case__body-link {
        padding: 55px 25px 40px;
    }

    .template-case__title {
        font-size: 2.6rem;
    }

    .template-case__name {
        font-size: 1.6rem;
        margin-top: 25px;
    }
}

@media screen and (max-width: 767px){
    .template-case {
        padding: 60px 0;
    }

    .template-case__content {
        margin-top: 50px;
    }

    .template-case__card {
        display: block;
	    width: 90%;
		margin-top: 11%;
    }

    .template-case__body-link {
        padding: 30px 20px 30px;
    }

    .template-case__title {
        font-size: 2.1rem;
    }

    .template-case__name {
        font-size: 1.45rem;
        margin-top: 15px;
    }

    .template-case-btn {
        margin-top: 35px;
        font-size: 1.4rem;
        padding-right: 30px;
    }

    .template-case-btn::before {
        width: 25px;
    }

    .template-case__card .img-wrap{
        width: 100%;
        height: 230px;
    }
}

/* ==================
    template-news
===================== */
.template-news{
    padding: 75px 0 85px;
    background-color: #f4f4f4;
}

.template-news__content{
    width: 90%;
    max-width: 900px;
    margin: 45px auto 0;
}

.article-archive{
    border-top: 1px solid #979797;
}

.article-archive:last-child{
    border-bottom: 1px solid #979797;
}

.article__link{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 22px 3.888% 20px;
    transition: 0.4s ease;
}

.article__link:hover{
    opacity: 0.7;
}

.article__time{
    font-size: 1.6rem;
    color: #000;
    line-height: 1.375;
    flex-shrink: 0;
    display: inline-block;
}

.article__cat{
    display: inline-block;
    font-size: 15px;
    font-weight: 400;
    margin-left: 3.8%;
    line-height: 1.2;
    color: #fff;
    background-color: #3b5485;
    padding: 3px 7px;
    flex-shrink: 0;
}

.article__title{
    font-size: 1.6rem;
    line-height: 1.2;
    flex-grow: 1;
    margin-left: 3.8%;

}
.template-news .article__title{
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

@media screen and (max-width: 1024px){
    .template-news {
        padding: 70px 0 80px;
    }

    .article__time,
    .article__title {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 767px){
    .template-news {
        padding: 30px 0 70px;
    }

    .article__link {
        display: block;
        padding: 15px 3.888%;
    }

    .article__time,
    .article__title {
        font-size: 1.4rem;
    }

    .article__title{
        margin: 8px 0 0;
	    line-height: 1.6;
    }
	.template-news .article__title{
		-webkit-line-clamp: 2;
	}
	.template-news__content{
	    margin: 30px auto 0;
	}
	.article__cat{
		font-size: 13px;
		padding: 2px 7px;
	}
}

/* ==================
    template-contact
===================== */
.template-contact{
    padding: 65px 0 75px;
    background: url('../img/top/contact.jpg') no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 0;
}

.template-contact::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

@media screen and (max-width: 767px){
    .template-contact{
        padding: 40px 0 60px;
    }
}

/* ==================
    footer
===================== */
.footer{
    padding: 60px 0;
    background-color: #f4f4f4;
}

.footer__inner{
    width: 90%;
    max-width: 1100px;
    margin: auto;
    display: flex;
    align-items: center;
}

.footer-logo{
    width: 164px;
}

.footer-logo img{
    width: 100%;
}

.copyright{
    margin-left: auto;
    text-align: right;
    margin-top: 50px;
}

.copyright small{
    font-size: 1.5rem;
}

@media screen and (max-width: 1024px){
    .footer{
        padding: 50px 0;
    }

    .footer-logo {
        width: 140px;
    }

    .copyright small {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 767px){
    .footer{
        padding: 15px 0;
    }

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

    .footer-logo {
        width: 110px;
        margin: auto;
    }

    .copyright {
        text-align: center;
        margin-top: 15px;
    }

    .copyright small {
        font-size: 1.2rem;
    }
}

/* ==================
    サービスページ
===================== */
.service-about__text{
    text-align: center;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 2;
    margin-top: 35px;
}

.service-vision{
    background: url('../img/common/vision.jpg') no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.service-vision .inner{
    padding: 100px 0 50px;
    position: relative;
    z-index: 1;
}

.service-vision__item{
    font-size: 2.6rem;
    color: #fff;
    font-weight: 400;
    line-height: 1.92;
    text-align: center;
    padding: 45px 0;
    border-bottom: 1px solid #969696;
}

.service-vision__item:last-child{
    border-bottom: none;
}

.service-vision__item .size--sm{
    font-size: 0.65em;
    display: block;
}

.service-content{
	padding-bottom: 100px;
}

.service-content__body{
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    background-color: #f4f4f4;
    margin: 85px auto 0;
    padding: 50px 0 45px;
}
.panel-widget-style-for-101-2-0-1 .service-content__body{
	justify-content:center;
}

.service02 .service-content__body{
	max-width: 734px;
}

.service-content__body.brand-content{
    display: block;
    background-color: #f5e6ce;
    padding: 0;
}

.brand-content--top{
    padding: 35px 0;
}

.brand-content--top .img-wrap{
    margin: auto;
    width: 40%;
    max-width: 200px;
}

.brand-content--top img{
    width: 100%;
}

.brand-content--bottom{
    display: flex;
}

.service-content__card{
    width: calc(100% / 3);
    padding: 0 10px;
    flex-grow: 1;
    max-width: 366px;
    border-right: 1px solid #7b7b7b;
    position: relative;
}

.panel-widget-style-for-101-2-0-1 .service-content__card:last-child{
    border-right:none;
}
.panel-widget-style-for-101-2-0-1 .service-content__card{
	width: calc(100% / 2);
	max-width: 480px;
	    padding: 0 30px;
	    border-right: none;
}
.service-content__card:nth-child(3n){
    border-right: none;
}

.service-content__card:nth-child(n + 4){
    margin-top: 45px;
}

.brand-content--bottom .service-content__card{
    padding: 0;
    border: none;
    max-width: none;
}

.service02 .service-content__card{
	width: calc(100% / 2);
	max-width: 368px;
	border: none;
}

.service02 .service-content__card:nth-child(odd){
	border-right: 1px solid #7b7b7b;
}

.service02 .service-content__card:nth-child(n + 3){
    margin-top: 45px;
}

.service-content__card .img-wrap{
    width: 70%;
    max-width: 115px;
    margin: auto;
}

.brand-content--bottom .service-content__card .img-wrap{
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}

.service-content__card img{
    width: 100%;
}

.brand-content--bottom .service-content__card img{
    height: 100%;
    object-fit: cover;
}

.brand-content__wrap{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgb(82, 44, 0, 0.6);
    padding: 30px 15px;
    width: 100%;
}

.service-content__card-name{
    font-size: 2.3rem;
    text-align: center;
    font-weight: 400;
    margin-top: 30px;
}

.service-content__card-text{
    font-size: 1.7rem;
    line-height: 2;
    text-align: center;
    font-weight: 400;
    margin-top: 10px;
}

.brand-content__wrap .service-content__card-name,
.brand-content__wrap .service-content__card-text{
    text-align: left;
    color: #fff;
}

.brand-content__wrap .service-content__card-name{
    margin-top: 0;
}

.brand-content__wrap .service-content__card-text{
    margin-top: 30px;
}

.service-content__body.solar-system{
    padding: 0;
    display: block;
}

.solar-system__title{
    background-color: #e4e4e4;
    text-align: center;
    font-size: 3.4rem;
    font-weight: 700;
    padding: 45px;
}

.solar-system__inner{
    padding: 45px 2.72%;
}

.solar-system__text{
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 2;
}

.solar-system--top > .solar-system__text{
    text-align: center;
}

.solar-system img{
    width: 100%;
}

.solar-system .flex-box{
    display: flex;
}

.solar-system--top .flex-box{
    margin: 40px auto 0;
    align-items: center;
    background-color: #fff;
    max-width: 1027px;
}

.solar-system--top .flex-box .img-wrap{
    width: 58.42%;
    max-width: 600px;
}

.solar-system--top .flex-box .text-box{
    flex-grow: 1;
    width: 41.57%;
    padding: 30px 2.27%;
}

.solar-system__list{
    margin-top: 30px;
}

.solar-system__list li{
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.41;
    margin-top: 20px;
    padding-left: 18px;
    position: relative;
}

.solar-system__list li:first-child{
    margin-top: 0;
}

.solar-system__list li::before{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 5px;
    left: 0;
}

.solar-system__list li:first-child:before{
    background-color: #be0000;
}

.solar-system__list li:nth-child(2)::before{
    background-color: #0071a7;
}

.solar-system__list li:last-child:before{
    background-color: #f1cc21;
}

.solar-system--bottom{
    margin-top: 55px;
    background-color: #fff;
}

.solar-system__lead{
    display: inline-block;
    color: #534741;
    font-size: 2.4rem;
    font-weight: 700;
    padding: 25px 0 25px 25px;
    line-height: 1.3;
}

.solar-system__box02 .solar-system__lead{
    padding-left: 0;
}

.solar-system__box02{
    padding: 0 25px 50px;
}

.solar-system--bottom .flex-box{
    justify-content: center
}

.solar-system__mode{
    background-color: #f4f4f4;
}

.solar-system--bottom .flex-box .solar-system__mode{
    width: calc((100% - 30px) / 2);
    max-width: 469px;
    margin-left: 30px;
}

.green-mode{
    margin-top: 50px;
}

.solar-system--bottom .flex-box .solar-system__mode:first-child{
    margin-left: 0;
}

.solar-system__mode-name{
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    padding: 15px 0;
}

.economical-mode .solar-system__mode-name{
    background-color: #eac84c;
}

.safe-mode .solar-system__mode-name{
    background-color: #f99dc1;
}

.green-mode .solar-system__mode-name{
    background-color: #bbd661;
}

.solar-system__mode-body{
    padding: 30px 5.33%;
}

.solar-system__mode-body span{
    font-size: 2.4rem;
    font-weight: 700;
    display: inline-block;
    line-height: 1.3;
}

.economical-mode .solar-system__mode-body span{
    color: #eac84c;
}

.safe-mode .solar-system__mode-body span{
    color: #f99dc1;
}

.green-mode .solar-system__mode-body span{
    color: #bbd661;
}

.solar-system__mode-body .solar-system__text{
    margin-top: 25px;
}

.solar-system__mode-body .solar-system__text + span{
    margin-top: 40px;
}

.solar-system__box02 .img-wrap{
    margin-top: 30px;
}

.brand-content01 .brand-content__wrap{
    padding-top: 40px;
    padding-bottom: 55px;
}


.brand-content01 .brand-content--top .img-wrap{
    max-width: 256px;
}

.brand-content01 .service-content__card-name{
    text-align: center;
    font-size: 2.6rem;
}

.brand-content01 .service-content__card-text{
    text-align: center;
}

.brand-content .btn-container{
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.brand-content .btn-container .btn{
    width: calc((100% - 45px) / 2);
    border-color: #ffffff;
    margin: 0;
}

.brand-content .btn-container .btn + .btn{
    margin-left: 45px
}

.brand-content .btn-container .btn__link{
    color: #ffffff;
}

.brand-content .btn-container .btn .btn__link::before {
    background-image: url('../img/common/arrow-white01.svg');
}

.brand-content .btn-container .btn:hover {
    background-color: #ffffff;
}

.brand-content .btn-container .btn:hover .btn__link{
    color: #333333;
}

.brand-content .btn-container .btn:hover .btn__link::before{
    background-image: url('../img/common/arrow-black01.svg');
}

@media screen and (max-width: 1024px){
    .service-about__text{
        font-size: 1.6rem;
    }

    .service-vision__item{
        font-size: 2.2rem;
    }

    .service-content__card-name{
        font-size: 2.1rem;
    }

    .service-content__card-text{
        font-size: 1.6rem;
    }

    .solar-system__title {
        font-size: 3rem;
        padding: 40px;
    }

    .solar-system__text{
        font-size: 1.6rem;
    }

    .solar-system__list li {
        font-size: 1.6rem;
    }

    .solar-system__lead {
        font-size: 2.1rem;
        padding: 20px 0 20px 20px;
    }

    .solar-system__mode-name,
    .solar-system__mode-body span{
        font-size: 2.1rem;
    }

    .solar-system__box02 {
        padding: 0 20px 40px;
    }

    .solar-system__mode-body .solar-system__text + span {
        margin-top: 30px;
    }

    .green-mode {
        margin-top: 40px;
    }

    .brand-content01 .service-content__card-name{
        font-size: 2.4rem;
    }
}

@media screen and (max-width: 767px){
    .service-vision .inner{
        padding: 60px 0 50px;
    }

    .service-about__text{
        font-size: 1.5rem;
    }

    .service-vision__item{
        font-size: 1.8rem;
        padding: 25px 0;
        margin-top: 10px;
    }

    .service-vision__item .size--sm{
        margin-top: 10px;
    }

    .service-content__body{
        margin-top: 50px;
    }

    .brand-content--bottom{
        display: block;
    }

    .panel-widget-style-for-101-2-0-1 .service-content__card,
    .service-content__card,
	.service02 .service-content__card{
        width: 90%;
        margin: auto;
        border-right: none;
        border-bottom: 1px solid #7b7b7b;
        padding: 30px 0;
        flex-grow: 0;
    }

    .brand-content--bottom .service-content__card{
        width: 100%;
    }

    .service-content__card:last-child{
        border-bottom: none;
    }
	
	.service02 .service-content__card:nth-child(odd){
		border-right: 0;
	}
	
	.service02 .service-content__card:nth-child(n + 3) {
    margin-top: 0;
}

    .service-content__card-name{
        font-size: 1.9rem;
    }

    .service-content__card-text{
        font-size: 1.5rem;
    }

    .solar-system--top .flex-box{
        flex-direction: column-reverse;
        padding-bottom: 30px;
    }

    .solar-system__title {
        font-size: 2.4rem;
        padding: 30px;
    }

    .solar-system__text{
        font-size: 1.5rem;
    }

    .solar-system__inner {
        padding: 30px 2.72%;
    }

    .solar-system--top .flex-box .text-box {
        width: 100%;
        padding: 30px 2.27%;
    }

    .solar-system__list li {
        font-size: 1.5rem;
    }

    .solar-system--top .flex-box .img-wrap {
        width: 90%;
    }

    .solar-system--bottom {
        margin-top: 40px;
    }

    .solar-system__lead {
        font-size: 1.8rem;
        padding: 15px 0 15px 15px;
    }

    .solar-system__mode-name,
    .solar-system__mode-body span{
        font-size: 1.8rem;
    }

    .solar-system--bottom .flex-box{
        display: block;
    }

    .solar-system--bottom .flex-box .solar-system__mode{
        width: 100%;
        margin: 20px auto 0;
    }

    .solar-system--bottom .flex-box .solar-system__mode:first-child{
        margin-top: 0;
        margin-left: auto;
    }

    .solar-system__box02 {
        padding: 0 15px 30px;
    }

    .solar-system__mode-body {
        padding: 30px 15px;
    }

    .solar-system__mode-body .solar-system__text{
        margin-top: 15px;
    }

    .solar-system__mode-body .solar-system__text + span {
        margin-top: 20px;
    }

    .green-mode {
        margin-top: 30px;
    }

    .solar-system__list li{
        padding-left: 13px;
    }

    .solar-system__list li::before{
        width: 10px;
        height: 10px;
    }

    .brand-content01 .service-content__card-name{
        font-size: 2.2rem;
    }

    .brand-content .btn-container {
        display: block;
        margin-top: 30px;
    }

    .brand-content .btn-container .btn {
        width: 100%;
        margin: auto;
    }

    .brand-content .btn-container .btn + .btn {
        margin: 25px auto 0;
    }

    .brand-content01 .brand-content__wrap{
        position: static;
        background-color: rgb(82, 44, 0, 1);
    }
}

/* ==================
    about
===================== */
.about-message{
    padding: 120px 0 110px;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 62.5%, transparent 62.5%, transparent 100%), url('../img/about/img.jpg');
    background-attachment: fixed;
    background-size: cover;
}

.about-message .heading2,
.about-message .lead-text{
    text-align: left;
}

.message__wrap{
    width: 63%;
}

.about-message__body{
    margin-top: 25px;
}

.about-message__text{
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 2;
}

.about-message__text + .about-message__text{
    margin-top: 35px;
}

.about-company__list{
    margin-top: 45px;
}

.about-company__list div{
    display: flex;
    align-items: center;
    padding: 25px;
    border-bottom: 1px solid #b4b4b4;
}
.about-company__list .t_box01,
.about-company__list .t_box02{
	border-bottom:none;
}
.about-company__list .t_box01{
	padding: 25px 25px 0;
}
.about-company__list .t_box02{
	    padding: 15px 25px 0;
}
.about-company__list .t_box03{
	    padding: 15px 25px 25px;
}
.about-company__list div:first-child{
    border-top: 1px solid #b4b4b4;
}

.about-company__list dt,
.about-company__list dd{
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.41;
}

.about-company__list dt{
    min-width: 102px;
}

.about-company__list dd{
    margin-left: 3.63%;
}

.about-company .map{
    margin-top: 55px;
    width: 100%;
    height: 0;
    padding-top: 40.54%;
    position: relative;
}

.about-company .map iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1024px){
    .about-message{
        padding: 100px 0 90px;
    }

    .about-message__text,
    .about-company__list dt,
    .about-company__list dd{
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 767px){    
    .about .page-content{
        margin-top: 0;
    }   

    .about-message{
        padding: 60px 0;
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 80%, transparent 97%, transparent 100%), url('../img/about/img.jpg');
        background-size: 100%;
        background-position: bottom;
    }

    .message__wrap{
        width: 100%;
    }

    .about-message__text + .about-message__text{
        margin-top: 20px;
    }

    .about-message__text,
    .about-company__list dt,
    .about-company__list dd{
        font-size: 1.5rem;
    }

    .about-company__list div{
        display: block;
        padding: 15px;
    }

    .about-company__list dd{
        margin: 10px 0 0;
    }
	.about-company .map{
	    padding-top: 75%;
	}
}

/* ==================
    ニュース
===================== */
.article-single,
.archive-section{
    padding: 60px 0 100px;
}

.article-single .article__cat{
    margin-left: 0;
}

.article-single .article__title{
    font-size: 2.6rem;
    margin-top: 20px;
    margin-left: 0;
}

.article-single .article__time{
    margin-top: 20px;
}

.article__body {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.76;
    margin-top: 60px;
}

.archive-section .template-news__content{
    margin-top: 0;
}

@media screen and (max-width: 1024px){
    .article-single .article__title{
        font-size: 2.3rem;
    }
  
    .article__body{
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 767px){
    .article-single,
    .archive-section{
        padding-bottom: 60px;
    }

    .article-single .article__title{
        font-size: 2rem;
	    margin-top: 10px;
    }

    .article__body{
        font-size: 1.5rem;
        margin-top: 40px;
    }

    .article-single .btn,
    .archive-section .btn{
        margin-top: 60px;
    }
.article__time {
    margin-top: 15px;
}


}

/* ==================
    ページネーション
===================== */
.pagination{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.pagination > *{
    display: block;
    width: 66px;
    height: 66px;
    text-align: center;
    font-size: 1.6rem;
    padding: 19px 0;
    transition: 0.4s ease;
    position: relative;
    line-height: 26px;
    color: #3b5485;
}

.page-numbers{
    border-left: 1px solid #D6D6D6;
}

.page-numbers:first-child{
    border: none;
}

.page-numbers.current{
    background-color: #3b5485;
    color: #fff;
}

a.page-numbers:hover{
    background-color: #3b5485;
    color: #fff;
}

.page-numbers.next,
.page-numbers.prev{
    background-repeat: no-repeat;
    background-position: center;
}

.page-numbers.next{
    background-image: url('../img/common/arrow-blue01.svg');
}

.page-numbers.next:hover{
    background-image: url('../img/common/arrow-white01.svg');
}

.page-numbers.prev{
    background-image: url('../img/common/arrow-blue01_reverse.svg');
}

.page-numbers.prev:hover{
    background-image: url('../img/common/arrow-white01_reverse.svg');
}


@media screen and (max-width: 767px){
    .pagination > *{
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
        line-height: 12px;
    }
}

/* ==================
    ケーススタディー
===================== */
.casestudy-single .article__title{
    margin-top: 0;
}

.casestudy-single .article__company-name{
    margin-top: 10px;
    display: inline-block;
    font-size: 1.5rem;
}

.article__thumbnail{
    height: 600px;
    margin-top: 50px;
}

.article__thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.article__body div + div{
    margin-top: 30px;
}

.article__body p + p{
    margin-top: 20px;
}

.archive .page-casestudy .template-case__content{
    margin-top: 0;
}

/* ==================
    お問い合わせ
===================== */
.contact .page-content,
.confirm .page-content,
.thanks .page-content,
.error .page-content{
    padding: 60px 0 100px;
}

.form__list > div {
    display: flex;
    margin-top: 30px;
}

.form__list > div:first-child{
    margin-top: 0;
}

.form__list dt {
    min-width: 230px;
    font-size: 2rem;
    font-weight: 500;
}

.form__list .required {
    font-size: .75em;
    font-weight: 700;
    color: #3b5485;
    display: inline-block;
    margin-left: 15px;
}

.form__list dd {
    flex-grow: 1;
}

.form__list input {
    background-color: #f4f4f4;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
}

.form__list textarea {
    width: 100%;
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 10px;
    min-height: 228px;
}

.form-btn__wrap {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.form-btn{
    width: 90%;
    max-width: 300px;
    border: 1px solid #3b5485;
    color: #3b5485;
    border-radius: 50px;
    background-color: #fff;
    transition: 0.4s ease;
    text-align: center;
    padding: 20px 0;
    font-size: 1.5rem;
    display: block;
}

.thanks-btn{
    width: 90%;
    max-width: 300px;
    margin: 100px auto 0;
    border: 1px solid #3b5485;
    border-radius: 50px;
    background-color: #fff;
    overflow: hidden;
    transition: 0.4s ease;
}

.thanks-btn__link{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 20px 0;
    font-size: 1.5rem;
    transition: 0.4s ease;
}

.form-btn + .form-btn {
    margin-left: 30px;
}

.form-btn:hover{
    background-color: #3b5485;
    color: #fff;
}

.thanks-title{
    text-align: center;
    font-size: 2.4rem;
    font-weight: 500;
}

.thanks-text{
    font-size: 1.7rem;
    line-height: 1.3;
    margin-top: 30px;
}

@media screen and (max-width: 767px){
    .contact .page-content,
    .confirm .page-content,
    .thanks .page-content,
    .error .page-content{
        padding: 60px 0;
    }
    .form__list > div {
        display: block;
    }

    .form__list dt {
        font-size: 1.7rem;
    }

    .form__list dd {
        margin-top: 10px;
    }

    .form-btn__wrap{
        display: block;
    }

    .form-btn{
        font-size: 1.4rem;
        margin: auto;
    }

    .thanks-btn{
        margin-top: 60px;
    }

    .thanks-btn__link{
        font-size: 1.4rem;
    }

    .form-btn + .form-btn {
       margin: 20px auto 0;
    }

    .form-btn__wrap{
        display: block;
    }

    .thanks-title{
        font-size: 2rem;
    }

    .thanks-text{
        font-size: 1.5rem;
        margin-top: 20px;
    }
    
}

/* ==================
    サービス一覧
===================== */
.service-archive .page-content{
	padding-top: 60px;
}

.service-archive  .service__content{
	margin-top: 0;
}


@media screen and (max-width: 767px){
	.service-archive .page-content{
	padding: 60px 0;
}
}