@charset "UTF-8";
@import url("grid.css");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #0068a2;
    --link-color: #fc6e6f;
    --linkhover-color: rgba(50,54,133,1.0);
    --back-color: rgba(76,197,248,0.3);
    --border-color: rgba(132,245,222,0.6);
    --white-color: #fff;
    --gray-color: #555;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    /*display:block;*/
    color: var(--base-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}


/*ヘッダー
-------------------------------------*/
.header {
	display: flex;
    flex-direction: row;
    padding: 2rem 0 0 0;
}

.header h1 img{
	height: 3.0rem;
	width: auto;
}

.header-box {
	margin-left: auto;
	margin-top: 8px;
}
.contact-button {
	padding: 1rem;
	border: 2px solid var(--base-color);
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 1rem 0 0 0;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a:hover {
    background-color: var(--back-color);   
}
nav a {
    padding: 0.5rem;
}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.header {
	flex-direction: column;
    margin-bottom: 10px;
}
.header h1 img{
	height: auto;
}

.header #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
}
nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/common/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
#close  {
    display: block;
    background: url(../img/common/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}
    
/*メイン画像
-------------------------------------*/
.mainimg {
    width: 100%;
	padding: 0;
    background-color: rgba(50,54,133,0);
    background: rgba(50,54,133,0) url("../img/alteryx/we_002/mv.png") no-repeat top center;
    background-size: cover;
}

.mainimg_over {
    background:linear-gradient(65deg, rgba(50,54,133,0.9) 0%, rgba(50,54,133,0.9) 48%, rgba(50,54,133,0.0) 48%, rgba(50,54,133,0.0) 100%);
}

.mainimg .container {
    /*background: url("../img/alteryx/we_002/mv.png") no-repeat bottom center;
    background-size:cover; */
    max-width: 1200px;
    padding: 1.0rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media screen and (max-width: 768px) {
	   
    .mainimg .container {
        background: url("../img/alteryx/we_002/mv_sp.png") no-repeat bottom center;
        background-size:cover; 
        max-width: 1200px;
        padding: 1.0rem;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
/*メインコンテンツ
-------------------------------------*/
main {
	margin: 0;
}

section:nth-child(2n-1) {
    width: 100%;
	margin: 0 auto;
	padding: 6rem 0;
    background: linear-gradient(45deg, rgba(132,245,222,0.6), rgba(76,197,248,0.6));
}

section:nth-child(2n) {
    width: 100%;
	margin: 0 auto;
	padding: 6rem 0;
    background: linear-gradient(135deg, rgba(132,245,222,0.6), rgba(76,197,248,0.6));
}

.section_inner { /* sectionの背景と余白*/
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; 
    padding: 4.0rem 1.0rem 6.0rem;
    display: block;
	background-color: var(--white-color);
    border-radius: 1.2rem;
}

.section_title_h2 {
	margin: 0 auto;
    font-weight: 600;
    text-align: center;
    font-size: 40px;
    line-height: 2.0;
    letter-spacing: .04em;
	padding: 4rem 0;
    color: var(--base-color);
}
.section_title_h2 span {
    font-size: 24px;
    line-height: 1.5;
    color: var(--gray-color);
}
.section_title_h3 {
	margin: 0 auto;
    font-weight: 600;
    text-align: center;
    font-size: 30px;
    line-height: 2.0;
    letter-spacing: .04em;
	padding: 4rem 0;
    color: var(--base-color);
}
.section_read {
    display: block;
    width: 80%;
    margin: 0 auto;
    text-align: left;
}

.container {
}
.container_inner{
}
.container_title_h3 {
    display: block;
    text-align: center;
	margin: 0 auto;
    font-weight: 600;
    font-size: 30px;
    line-height: 1.5;
    letter-spacing: .02em;
	padding: 4rem 0 6rem;
    color: var(--base-color);
}

.row{
    justify-content: space-between;
}


#section01 .col,
#section03 .col,
#section05 .col {
	padding: 2rem;
    background-color: var(--white-color);
    border: 2px solid var(--base-color);
    border-radius: 1.0rem;
}

.col_title_h3 {
	margin: 0 auto;
    font-weight: 600;
    font-size: 30px;
    line-height: 1.5;
    letter-spacing: .02em;
	padding: 0 0 4rem;
}

@media screen and (max-width: 768px){

.section_inner { /* sectionの背景と余白*/
        width: 95%;
        max-width: 768px;
        margin: 0 auto; 
        padding: 2.0rem 0.5rem 4.0rem;
        display: block;
        background-color: var(--white-color);
        border-radius: 1.2rem;
}
.section_title_h2 {
	margin: 0 auto;
    font-weight: 600;
    text-align: center;
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: .04em;
	padding: 4rem 0;
    color: var(--base-color);
}
.section_title_h2 span {
    font-size: 18px;
    line-height: 1.5;
    color: var(--gray-color);
}
.section_title_h3 {
	margin: 0 auto;
    font-weight: 600;
    text-align: center;
    font-size: 22px;
    line-height: 2.0;
    letter-spacing: .04em;
	padding: 4rem 0;
    color: var(--base-color);
}
.section_read {
    display: block;
    width: 80%;
    margin: 0 auto;
    text-align: left;
}

.container {
}
.container_inner{
}
.container_title_h3 {
    display: block;
    text-align: center;
	margin: 0 auto;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: .02em;
	padding: 4rem 0 6rem;
    color: var(--base-color);
}

.row{
    justify-content: space-between;
}


#section01 .col,
#section03 .col,
#section05 .col {
	padding: 1.0rem;
    background-color: var(--white-color);
    border: 1px solid var(--base-color);
    border-radius: 1.0rem;
}

.col_title_h3 {
	margin: 0 auto;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: .02em;
	padding: 0 0 4rem;
}

}

.span-block {
    display: block;
}

.under {
    border-bottom: 0.4rem solid var(--base-color);
    padding:0 1rem 1rem 1rem;
}

.mark {
color: var(--base-color);
}

.marker {
background: linear-gradient(transparent 70%, rgba(132,245,222,0.7)70%);
padding-bottom: 0.01em;
}
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.white-back {
	background-color: var(--white-color);
}
.gray-back {
	background-color: var(--back-color);
}

@media screen and (max-width: 768px){
    .under {
        border: none;
        padding:0 1rem 1rem 1rem;
    }

}



/*キャッチコピー
-------------------------------------*/
.catch {
    width: 60%;
    max-width: 680px;
    padding: 4.8rem 2.4rem 2.4rem 4.8rem;
}

.catch .catch_title1 {
	display: inline-block;
    margin: 0 0 0 0;
    color: rgba(252,110,111,1.0);
    font-size: 4.8ex;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1rem;
    /*background-color: rgba(50,54,133,1.0);*/
    /*background: linear-gradient(-60deg, rgba(252,110,111,0.8), rgba(50,54,133,0.8));*/
	/*transform: skewX(-30deg);*/
}
.catch .catch_title1 span {
    color: rgba(252,110,111,1.0);
}

.catch .catch_title2 {
	display: inline-block;
    padding: 0 0 3.6rem 0;
    margin: 0 0;
    color: rgba(252,110,111,1.0);
    font-size: 4.8ex;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1rem;
     /*background-color: rgba(50,54,133,1.0);*/
    /*background: linear-gradient(-60deg, rgba(252,110,111,0.8), rgba(50,54,133,0.8));*/
}
.catch .catch_title2 span {
    color: rgba(252,110,111,1.0);
    font-size: 60px;
    font-weight: 600;
    line-height: 1.2;
	padding: 0 0.15em;
}

[data-ruby] {
	position: relative;
}

[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -0.2rem;
	left: 6rem;
	right: 4rem;
	margin: auto;
	font-size: 1.8rem;
    letter-spacing: 0.25rem;
}

.catch .catch_ad {
    margin: 0 0 0 0;
    color: #fff; /* #0078c0 */
    font-size: 2.8ex;
    font-weight: 400;
    line-height: 1.2;
}

/* FV内CTAボタンエリア
---------------------------*/

.cta_box {
    display: block;
    padding: 2.0rem 0 2.0rem 2.0rem;
    margin: 0 10.0rem;
}

.cta_wrap {
    display: flex;
}

.catch_dl_btn {
    padding: 15px 28px 15px;
    width: 300px;
    height: 80px;
    margin: 0 10px;
    font-weight: 600;
    position: relative;
    color: var(--white-color);
     /*background:linear-gradient(-60deg, rgba(255,204,0,1.0) ,rgba(255,102,0,1.0));*/
    background-color: #fc6e6f;
    border: 2px solid #fc6e6f;
    border-radius: 40px;
}
.catch_dl_btn a {
    color: var(--white-color);
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
}

.catch_dl_btn:hover {
    background-color: #fc6e6f;
    border: 2px solid #fc6e6f;
    border-radius: 40px;
}

.catch_dl_btn:hover a {
    color: var(--white-color);
    top:48%;
    left:50%;
    transform:translate(-50%,-50%);
}

.catch_trial_btn,
.catch_form_btn {
    padding: 15px 28px 15px;
    width: 300px;
    height: 80px;
    position: relative;
    color: var(--white-color);
    /*background:linear-gradient(-60deg, rgba(1,119,119,1.0) ,rgba(47,114,184,1.0));*/
    background-color: var(--base-color);
    border: 2px solid var(--base-color);
    border-radius: 40px;
    margin: 0 10px;
    font-weight: 600;
}

.catch_trial_btn a,
.catch_form_btn a {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    color: var(--white-color);
}

.catch_trial_btn:hover,
.catch_form_btn:hover {
    color: var(--white-color);
    background-color: var(--base-color);
    border: 2px solid var(--base-color);
    border-radius: 40px;
}

.catch_trial_btn:hover a,
.catch_form_btn:hover a {
    color: var(--white-color);
    top:48%;
    left:50%;
    transform:translate(-50%,-50%);
}

@media screen and (max-width: 768px){
    .catch {
        width: 98%;
        max-width: 768px;
        padding: 4.0rem 2.4rem 2.4rem;
    }
    
    .catch .catch_title1 {
        display: inline-block;
        margin: 0 0 3.2rem 0;
        color: rgba(252,110,111,1.0);
        font-size: 42px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0.15rem;
        /*background-color: rgba(50,54,133,1.0);*/
        /*background: linear-gradient(-60deg, rgba(252,110,111,0.8), rgba(50,54,133,0.8));*/
        /*transform: skewX(-30deg);*/
    }
    
    .catch .catch_title2 {
        display: inline-block;
        padding: 0 0 4.8rem 0;
        margin: 0 0;
        color: rgba(252,110,111,1.0);
        font-size: 42px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0.15rem;
         /*background-color: rgba(50,54,133,1.0);*/
        /*background: linear-gradient(-60deg, rgba(252,110,111,0.8), rgba(50,54,133,0.8));*/
    }
    .catch .catch_title2 span {
        color: rgba(252,110,111,1.0);
        font-size: 42px;
        font-weight: 600;
        line-height: 1.2;
        padding: 0 0.15em;
    }
    
    [data-ruby] {
        position: relative;
    }
    
    [data-ruby]::before {
        content: attr(data-ruby);
        position: absolute;
        top: -1.0rem;
        left: 3.2rem;
        right: 2rem;
        margin: auto;
        font-size: 1.4rem;
        letter-spacing: 0.15rem;
    }
    
    .catch .catch_ad {
        margin: 0 0 0 0;
        color: #fff; /* #0078c0 */
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2;
    }

    .cta_box {
        display: block;
        padding: 0;
        margin: 0 0 3.0rem;
    }
    
    .cta_wrap {
        display: flex;
        flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    }
    .catch_dl_btn {
        margin-bottom: 10px;
    }

}

/* セクション内CTAボタンエリア
-------------------------------*/

.section_inner .cta_wrap {
    display: flex;
    justify-content: center;
    padding: 6rem 0 2rem;
}

@media screen and (max-width: 768px){

    .section_inner .cta_wrap {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }
}

/* ページ内CTAボタンエリア
-------------------------------*/

.cta_area {
    width: 100%;
	padding: 4rem 0 6rem 0;
    background: rgba(50, 54, 133, 1.0) !important;
}

.cta_area .section_title_h2 {
    margin: 0 auto;
    font-weight: 600;
    text-align: center;
    font-size: 40px;
    line-height: 2.0;
    letter-spacing: .04em;
    padding: 4rem 0;
    color: var(--white-color);
}
.cta_area .section_title_h2 span {
    color: var(--white-color);
}

.cta_area .cta_wrap {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px){

    .cta_area {
        width: 100%;
        padding: 0 1.0rem 2.0rem 1.0rem;
        background: rgba(50,54,133,1.0)!important;
    }

    .cta_area .section_title_h2 {
        margin: 0 auto;
        font-weight: 600;
        text-align: center;
        font-size: 36px;
        line-height: 2.0;
        letter-spacing: .02em;
        padding: 4rem 0;
        color: var(--white-color);
    }

    .cta_area .section_title_h2 span {
        color: var(--white-color);
    }
    
    .cta_area .cta_box {
        width: 100%;
        display: block;
        margin: 0 auto;
    }

    .cta_area .cta_wrap {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

    .cta_area .catch_dl_btn {
        padding: 15px 28px 15px;
        width: 300px;
        height: 80px;
        margin: 0 10px 5px;
        font-weight: 600;
        position: relative;
        color: var(--white-color);
        background-color: var(--link-color);
        border: 2px solid var(--link-color);
        border-radius: 40px;
    }

.cta_area .catch_dl_btn a {
    color: var(--white-color);
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
}

.cta_area .catch_dl_btn:hover {
    background-color: var(--link-color);
    border: 2px solid var(--white-color);
}

.cta_area .catch_dl_btn:hover a {
    color: var(--white-color);
}

.cta_area .catch_trial_btn,
.cta_area .catch_form_btn {
    padding: 15px 28px 15px;
    width: 300px;
    height: 80px;
    position: relative;
    color: var(--white-color);
    /*background:linear-gradient(-60deg, rgba(1,119,119,1.0) ,rgba(47,114,184,1.0));*/
    background-color: var(--base-color);
    border: 2px solid var(--base-color);
    border-radius: 40px;
    margin: 0 10px;
    font-weight: 600;
}

.cta_area .catch_trial_btn a,
.cta_area .catch_form_btn a {
    color: var(--white-color);
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
}

.cta_area .catch_trial_btn:hover,
.cta_area .catch_form_btn:hover {
    background-color: var(--white-color);
    border: 2px solid var(--base-color);
}

.cta_area .catch_trial_btn:hover a,
.cta_area .catch_form_btn:hover a {
    color: var(--link-color);
}

}


/*課題　section01
-------------------------------------*/
#section01 .row {
	padding-bottom: 4rem;
}

#section01 .row:last-child {
	padding-bottom: 0;
}

#section01 .col.span-6 p {
	background: url("../img/common/check.png") no-repeat top left;
	background-size: auto 32px;
	padding-left: 4rem;
}

@media screen and (max-width: 768px){
    #section01 .row {
        padding-bottom: 0;
    }
	#section01 .row .col {
        margin-bottom: 10px;
    }
}


/* 解決 section02
-------------------------------------*/
#section02 .row {
    flex-wrap: wrap;
    align-content: flex-start;
}

#section02 .row .col {
	padding: 4.0rem;
    margin-bottom: 4.0rem;
    background-color: var(--white-color);
    border: 2px solid var(--base-color);
    border-radius: 1.0rem;
}

#section02 .row .col h3 {
    color: var(--base-color);
    margin: 0 auto 2rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .02em;
    padding: 0;
}

#section02 .row .col img {
	width: 100%;
	overflow: hidden;
	margin-bottom: 1.0rem ; 
}

#section02 .row .col p {
	padding: 0;
}
@media screen and (max-width: 768px){
	
}

/*section03
-------------------------------------*/

#section03 .container_inner {
}

#section03 .movie_wrap {
    display: block;
    margin: 0 auto;
}

#section03 .movie_inner {
    margin: 4.0rem 0 3.0rem;
    padding: 4.0rem;
    background-color: var(--back-color);
    /* border: 2px solid var(--back-color); */
    border-radius: 2.0rem;
}

#section03 .movie_iframe {
    width:  650px;
    height: 360px;
}

@media screen and (max-width: 768px){

    #section03 .movie_iframe {
        width:  100%;
        height: auto;
    }
	
}

/*usecase
-------------------------------------*/

#usecase .container {
    padding-top: 8rem;
}

#usecase .row {
    align-items: center
}

#usecase .col {
	padding: 1.8rem 0.8rem;
    background-color: var(--white-color);
    border: 2px solid var(--base-color);
    border-radius: 1.0rem;
    margin-bottom: 1.0rem;
}

#usecase .col h3 {
    color: var(--base-color);
	margin: 0 auto;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .02em;
    padding: 0;
}

@media screen and (max-width: 768px){
    #usecase .col {
        padding: 1.0rem;
        background-color: var(--white-color);
        border: 1px solid var(--base-color);
        border-radius: 1.0rem;
    }
    
    #usecase .col h3 {
        color: var(--base-color);
        margin: 0 auto;
        font-weight: 600;
        font-size: 12px;
        line-height: 1.5;
        letter-spacing: .02em;
        padding: 0;
    }

	
}

/*機能　function
-------------------------------------*/
#function {
    background-color:rgba(0, 120, 192, 0.1);/*#e3f1fc*/
/*background-image: linear-gradient(-30deg, #e3f1fc 20%, #cce9fe 60%, white 100%);*/
	/*background-image: linear-gradient(-30deg, #e3f1fc 20%, #cce9fe 60%, white 100%);*/
}

#function .container {
	padding-top: 8rem;
    /*background: url("../img/experience_bg.png") repeat top center;
    background-size:contain;*/
}

#function .row {
    padding-bottom: 8rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}

#function .row-reverse {
    padding-bottom: 8rem;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}

#function .col.span-5 {
	padding: 0.8rem 0 1.2rem 2.4rem;
    border-left: 1px solid var(--linkhover-color);
    border-bottom: 1px solid var(--linkhover-color);
    
}

#function .col.span-5 .col_title_h3 {
    font-weight: 600;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: .02em;
    padding: 0 0 2.4rem;
}

#function .col.span-5 .col_title_h3 span {
    color: var(--linkhover-color);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: .02em;
    padding: 0 0 1.8rem;
}

#function .col.span-5 p {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: .02em;
    padding: 0 0 1.2rem;
}

#function .col.span-7 {
    padding: 0;
}

#function .col.span-7 img {
	width: 100%;
	overflow: hidden;
    background: #fff;
    border: 1px solid rgba(52, 52, 52, 0.1);
    background-color: --white-color;
    box-shadow: 20px 20px 5px 3px rgba(52, 52, 52, 0.3);
}

@media screen and (max-width: 768px){

    #function .container {
        padding-top: 1rem;
    }

    #function .row {
        padding-bottom: 4.0rem;
        display: flex ;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }

    #function .col.span-5 {
        padding: 0.6rem 1.2rem 0.6rem 1.2rem;
        border-right: 1px solid var(--linkhover-color);
        border-top: 1px solid var(--linkhover-color);
    }

    #function .col.span-5 .col_title_h3 {
        font-weight: 600;
        font-size: 22px;
        line-height: 1.3;
        letter-spacing: .02em;
        padding: 0 0 1.2rem;
    }

    #function .col.span-5 .col_title_h3 span {
        color: var(--linkhover-color);
        font-weight: 600;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: .02em;
        padding: 0 0 0.6rem;
    }

    #function .col.span-5 p {
        font-weight: 400;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: .02em;
        padding: 0 0 0.6rem;
    }

    #function .col.span-7 {
        margin-bottom: 1rem;
    }

    #function .col.span-7 img {
        width: 98%;
        overflow: hidden;
        background: #fff;
        border: 1px solid rgba(52, 52, 52, 0.1);
        background-color: --white-color;
        box-shadow: 5px 5px 3px 1px rgba(52, 52, 52, 0.3);
    }
    
}


/*特徴　feature
-------------------------------------*/
#feature {
    background-color:rgba(0, 120, 192, 0.1);/*#e3f1fc*/
/*background-image: linear-gradient(-30deg, #e3f1fc 20%, #cce9fe 60%, white 100%);*/
	/*background-image: linear-gradient(-30deg, #e3f1fc 20%, #cce9fe 60%, white 100%);*/
}

#feature .container {
	padding-top: 8rem;
    /*background: url("../img/experience_bg.png") repeat top center;
    background-size:contain;*/
}

#feature .row {
    padding-bottom: 8rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}

#feature .row-reverse {
    padding-bottom: 8rem;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}

#feature .row .col.span-7,
#feature .row-reverse .col.span-7 {
    flex: 0 0 56.6666666667%;
    max-width: 56.6666666667%;
}

#feature .row .col.span-5,
#feature .row-reverse .col.span-5 {
    flex: 0 0 39.3333333333%;
    max-width: 39.3333333333%;
}

#feature .col.span-7 {
	padding: 2rem 4rem;
    border: 1px solid rgba(52, 52, 52, 0.1);
    border-radius: 2.0rem;
    background-color: --white-color;
    box-shadow: 12px 12px 12px -10px rgba(52, 52, 52, 0.7);
}

#feature .col.span-7 .col_title_h3 {
    font-weight: 600;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: .02em;
    padding: 0 0 2.4rem;
}

#feature .col.span-7 .col_title_h3 span {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: .02em;
    padding: 0 0 3.0rem;
}

#feature .col.span-7 p {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: .02em;
    padding: 0 0 1.2rem;
}

#feature .col.span-5 img {
	width: 100%;
	overflow: hidden;
    background: #fff;
}



@media screen and (max-width: 768px){

    #feature .row {
        padding-bottom: 8rem;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-content: space-between;
        align-items: flex-start;
        flex-wrap: nowrap;
    }
    
    #feature .row-reverse {
        padding-bottom: 8rem;
        display: flex;
        flex-direction: column-reverse;
        align-content: space-around;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    
    #feature .col.span-7 {
        padding: 2rem 4rem;
        border: 1px solid rgba(52, 52, 52, 0.1);
        border-radius: 2.0rem;
        background-color: --white-color;
        box-shadow: 12px 12px 12px -10px rgba(52, 52, 52, 0.7);
    }
    
    #feature .col.span-7 .col_title_h3 {
        font-weight: 600;
        font-size: 30px;
        line-height: 1.3;
        letter-spacing: .02em;
        padding: 0 0 2.4rem;
    }
    
    #feature .col.span-7 .col_title_h3 span {
        font-weight: 600;
        font-size: 24px;
        line-height: 1.3;
        letter-spacing: .02em;
        padding: 0 0 3.0rem;
    }
    
    #feature .col.span-7 p {
        font-weight: 400;
        font-size: 18px;
        line-height: 1.5;
        letter-spacing: .02em;
        padding: 0 0 1.2rem;
    }
    
    #feature .col.span-5 img {
        width: 100%;
        overflow: hidden;
        background: #fff;
    }
        
}

/*section04
-------------------------------------*/

#section04 .section_inner {

}

#section04 .container_inner {
}

#section04 .row {
	justify-content: center;
}

#section04 .col {

}

#section04 .col.span-4 {
}


#section04 .col.span-4 {
    margin-left: 4%;
    padding: 0;
}

#section04 .col.span-4:first-child {
    margin-left: 0;
}

#section04 .col.span-4 .img_wrap {
    display: inline-block;
    background-color: var(--back-color);
    border-radius: 30.6666666667rem;
    padding: 5rem;
	margin-bottom: 1rem ;
}

#section04 .col.span-4 .img_wra img {
    display: block;
    width: 40%;
    overflow: hidden;

}

#section04 .col.span-4 h3 {
    color: var(--base-color);
    margin: 0 auto 2rem;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: .02em;
    padding: 0;
}

/*section05
-------------------------------------*/

#section05 .container_inner {
	padding: 0;
    margin-bottom: 8rem;
}

#section05 .row {
	justify-content: center;
}

#section05 .col.span-4 {
    margin-left: 1%;
    padding: 0;
}

#section05 .col.span-3 {
    margin-left: 1%;
    padding: 0;
}

#section05 .col.span-3:first-child {
    margin-left: 0;
}

#section05 .col_title_h3 {
    display: block;
    background-color: #0068a2;
    color: #fff;
	padding: 1.5rem 0;
    font-size: 20px;
    letter-spacing: -0.02em;
}

#section05 .col.span-3 img {
	width: 50%;
	overflow: hidden;
	margin: 2rem 0 0 ;
}

#section05 .col.span-3 p {
	padding: 0;
    font-size: 16px;
    margin: 0 2rem 2rem;
}
#section05 .col.span-4 img {
	width: 50%;
	overflow: hidden;
	margin: 2rem 0 0 ;
}

#section05 .col.span-4 p {
	padding: 0;
    font-size: 16px;
    margin: 0 2rem 2rem;
}

@media screen and (max-width: 768px){

    #section05 .col.span-4 {
        margin-left: 0;
        padding: 0;
        margin-bottom: 10px;
    }
    
    #section05 .col.span-3 {
        margin-left: 0;
        padding: 0;
        margin-bottom: 10px;
    }
	
}
/*理由　reason
-------------------------------------*/
#reason {
    /*background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.63) 20%, #f7f9fd 42%, #ecf1f9 60%, #a4bae9 110%);*/
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.63) 50%, #e3f1fc 62%, #cce9fe 70%, #acd1ed 110%);
}

#reason .container {
	padding-top: 8rem;
    /*background: url("../img/experience_bg.png") repeat top center;
    background-size:contain;*/
}

#reason .row,
#reason .row-reverse {
	padding-bottom: 10rem;
	justify-content: space-between;
}

#reason .col.span-6 .col_title_h3 {
	margin: 0 auto;
    font-weight: 500;
    font-size: 36px;
    line-height: 1.5;
    letter-spacing: .02em;
	padding: 0 0 4rem;
    color: #003366;
}

#reason .col.span-6 .col_title_h3 span {
   dispray:block;
   width:6.0rem;
   height:6.0rem;
}

#reason .col.span-6 img {
	width: 90%;
	overflow: hidden;
    background: #fff;
	box-shadow: 0px 24px 24px -5px rgba(0, 120, 192, 0.3);
    /*box-shadow: 24px 24px 16px rgba(0, 0, 0, 0.1);*/
}

/*事例　case
-------------------------------------*/
#case {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.63) 40%, #e3f1fc 56%, #cce9fe 70%, #acd1ed 110%);
}

#case .container {
	padding: 8rem 0;
    /*background: url("../img/experience_bg.png") repeat top center;
    background-size:contain;*/
}

#case .row {
	padding-bottom: 8rem;

}

#case .col.span-12:first-child {
	font-size: 18px;
    font-weight: normal;
    line-height: 1.8;
    letter-spacing: .02em;
}

#case .col.span-12 {
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: .02em;
}

#case .col.span-12 .case01 {
	margin: 0 auto;
	width: 60%;
	padding: 3rem;
	background: #f2f2f2;
	/*box-shadow: 0px 24px 24px -5px rgba(0, 0, 0, 0.1);*/
    box-shadow: 24px 24px 16px rgba(0, 0, 0, 0.1);
}

#case .col.span-12 h3 {
	color: #0078c0;
	margin: 0 auto;
    font-weight: bold;
    font-size: 2.0rem;
    line-height: 1.5;
    letter-spacing: .02em;
	padding: 0 0 2rem;
}
#case .col.span-12 ul {
	margin: 0 auto;
	width: 88%;
	padding: 2rem;
}

#case .col.span-12 ul li {
	text-align: left;
	list-style: none;
    font-size: 1.4rem;
    line-height: 1.1;
    letter-spacing: .02em;
}

#case .col.span-12 h4 {
	margin: 0 auto;
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: .02em;
	padding: 2rem 0 1.2rem;
}
#case .col.span-12 .img_box {
    margin: 0 auto;
	width: 75%;
	overflow: hidden;
	margin-bottom: 2rem ;
}
#case .col.span-12 img {
	width: 75%;
}

#case .col.span-12 p {
	margin-bottom: 2rem ;
}
@media screen and (max-width: 768px){
	#case .container {
	padding: 4rem 2rem;
    /*background: url("../img/experience_bg.png") repeat top center;
    background-size:contain;*/
}

#case .row {
	padding-bottom: 4rem;

}
	
	#case .col.span-12 .case01 {
	margin: 0 auto;
	width: 95%;
	padding: 3rem;
	background: #f2f2f2;
	/*box-shadow: 0px 24px 24px -5px rgba(0, 0, 0, 0.1);*/
    box-shadow: 12px 12px 8px rgba(0, 0, 0, 0.1);
}
}

/*強味　advantage
-------------------------------------*/
#advantage {
    background-color: rgba(0, 120, 192, 0.1);
    /*background: linear-gradient(-30deg, rgba(226,230,108,0.8), rgba(150,230,226,1.0));*/
}

#advantage .container {
	padding: 8rem 0;
    /*background: url("../img/experience_bg.png") repeat top center;
    background-size:contain;*/
}

#advantage .row {
	padding-bottom: 8rem;
	justify-content: center;
}


#advantage .col.span-6 {
padding: 3rem;
	border-radius: 2rem;
	background: #fff;
	/*box-shadow: 0px 24px 24px -5px rgba(0, 0, 0, 0.1);*/
    box-shadow: 24px 24px 16px rgba(0, 0, 0, 0.1);
}

#advantage .col.span-6 h3 {
	color: #0078c0;
	margin: 0 auto;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.5;
    letter-spacing: .02em;
	padding: 4rem 0;
}

#advantage .col.span-6 img {
	width: 50%;
	overflow: hidden;
	margin-bottom: 2rem ;
}

#advantage .col.span-6 p {
	padding: 0 2rem;
}

@media screen and (max-width: 768px){
	#advantage .container {
	padding: 4rem 2.0rem;
    /*background: url("../img/experience_bg.png") repeat top center;
    background-size:contain;*/
}
	
	#advantage .col.span-6 {
padding: 3rem;
	border-radius: 2rem;
	background: #fff;
	/*box-shadow: 0px 24px 24px -5px rgba(0, 0, 0, 0.1);*/
    box-shadow: 12px 12px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 2rem;
}

}

/* 導入実績 case_study
-------------------------------------*/

#case_study .container {
    padding: 8.0rem 2.0rem;
}

#case_study .container_title_h3 {
    display: block;
    text-align: left;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: .02em;
    padding: 0;
    margin: 0 0 3.0rem;
    color: var(--base-color);
    border: 1px solid var(--white-color);
}
#case_study .headline_box {
    display: flex;
    flex-direction: row;
    padding: 0;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3.0rem;
    background-color: var(--base-color);
    color: #fff;
    border-radius:1.2rem;
}

#case_study .headline_box .col {
    padding: 1rem;
}

#case_study .issue_box {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3.0rem;
}

#case_study .issue_box .span-6 {
    border: 1px solid var(--base-color);
}

#case_study .issue_box .span-6 .col_title_h3 {
    display: block;
    background-color: var(--base-color);
    color: #fff;
    padding: 0.5rem 1.5rem;
    font-size: 20px;
    letter-spacing: -0.02em;
}

#case_study .col ul {
    padding: 1.5rem;
}

#case_study .col ul li {
    list-style: none;
}

@media screen and (max-width: 768px){

    #case_study .container {
        padding: 1rem;
    }

    #case_study .headline_box {
        flex-direction: column;
      }

    #case_study .col {
        margin-bottom: 1rem;
    }
 
    #case_study .row .col ul li {
        font-size: 16px;
    }

}

/*お問い合わせ contact
-------------------------------------*/
#contact {
    background: rgba(50, 54, 133, 1.0) !important;
	/*background: url("../img/contact_bg.png") no-repeat bottom center;
    background-size:contain; */
    padding: 0;
}

#contact .section_inner { /* sectionの背景と余白*/
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; 
    padding: 4.0rem 1.0rem 6.0rem;
    display: block;
	background-color: rgba(50, 54, 133, 1.0) ;
    border-radius: 1.2rem;
}


#contact .section_title_h2 {
	margin: 0 auto;
    font-weight: 600;
    text-align: center;
    font-size: 40px;
    line-height: 2.0;
    letter-spacing: .04em;
	padding: 4rem 0;
    color: var(--white-color);
}

#contact .section_title_h3 {
	margin: 0 auto;
    font-weight: 400;
    text-align: center;
    font-size: 30px;
    line-height: 2.0;
    letter-spacing: .04em;
	padding: 0 0 2rem;
    color: var(--white-color);
}

#contact .section_read {
    display: block;
    width: 75%;
    margin: 0 auto 4rem;
    text-align: left;
    color: var(--white-color);

}


#contact .container {
}

#contact .container_inner{
    width: 100%;
    max-width: 900px;
    margin: 0 auto; 
    padding: 6.0rem 6.0rem 6.0rem;
    display: block;
	background-color: var(--white-color);
    border-radius: 1.2rem;
}

#contact .container_title_h3 {
    display: block;
    text-align: center;
	margin: 0 auto;
    font-weight: 600;
    font-size: 30px;
    line-height: 1.5;
    letter-spacing: .02em;
	padding: 4rem 0 6rem;
    color: var(--base-color);
}


#contact .row{
	padding-bottom: 8rem;
}


@media screen and (max-width: 768px) {
    
  #contact .section_title_h2 {
        margin: 0 auto;
        font-weight: 600;
        text-align: center;
        font-size: 40px;
        line-height: 2.0;
        letter-spacing: .04em;
        padding: 4rem 0;
        color: var(--white-color);
    }
    
    #contact .section_title_h3 {
        margin: 0 auto;
        font-weight: 400;
        text-align: center;
        font-size: 30px;
        line-height: 2.0;
        letter-spacing: .04em;
        padding: 0 0 2rem;
        color: var(--white-color);
    }
    
    #contact .section_read {
        display: block;
        width: 75%;
        margin: 0 auto 4rem;
        text-align: left;
        color: var(--white-color);
    
    }
    
    
    #contact .container {
        padding: 0;
    }
    
    #contact .container_inner{
        width: 100%;
        margin: 0 auto; 
        padding: 2.0rem;
        display: block;
        background-color: var(--white-color);
        border-radius: 1.2rem;
    }
    
    #contact .container_title_h3 {
        display: block;
        text-align: center;
        margin: 0 auto;
        font-weight: 600;
        font-size: 30px;
        line-height: 1.5;
        letter-spacing: .02em;
        padding: 4rem 0 6rem;
        color: var(--base-color);
    }

}

/*フッター
-------------------------------------*/
footer {
    background-color: var(--back-color); 
    padding: 5rem 0;
}
footer h4 {
    border-bottom: 3px solid var(--border-color);
}




/*コピーライト
-------------------------------------*/
.copyright {
    color: var(--white-color);
    text-align: center;
    padding: 1rem 0;
    background-color: #000;
}
.copyright a {
    color: var(--white-color);
    text-decoration: none;
	display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
    background-color: var(--base-color);
    color: var(--white-color);
    width: 50px;
    padding: 10px 5px;
    text-align: center;
    border-radius: 25px;
}
#pagetop a:hover {
    background-color: var(--link-color);
}

/* 幅768px以下の表示
-------------------------------------*/
@media screen and (max-width: 768px){
	
/*ヘッダー
-------------------------------------*/
.header-box {
	display: none;
}	
/*お問い合わせ
-------------------------------------*/
.table th {
	width: 100%;
	display: block;
}	
.table td {
	display: block;
}
}