@charset "utf-8";

/* mainVisual =========================*/
#mainVisual{position: relative;}
.advantage_mv_text{position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-55%); z-index: 3;
    max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 15px;}
.advantage_mv_text h2{font-size: 30px; color: #fff; font-weight: 500; letter-spacing: 2px; line-height: 1.8;
    display: inline-block; overflow: hidden; position: relative;}
.advantage_mv_text h2::before{
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: #fff;
}
.advantage_mv_text h2.show::before{
    -webkit-animation: passing-bar 1s ease 0.5s 1 normal forwards;
    animation: passing-bar 1s ease 0.5s 1 normal forwards;
}
.advantage_mv_text h2 span{
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.advantage_mv_text h2.show span{
	-webkit-animation: passing-txt 0s ease 1s 1 normal forwards;
	animation:passing-txt 0s ease 1s 1 normal forwards;
}
.mv_read p{font-size: 16px; letter-spacing: 2px; line-height: 2.3; color: #ffffff; margin-top: 20px;}


.planning_read{text-align: center; margin: 0 25px; padding: 80px 0;}
.planning_read p{font-size: 16px; letter-spacing: 2px; line-height: 2.3;}

@media screen and (max-width:1200px){
    .advantage_mv_text h2{font-size: 25px;}
}
@media screen and (max-width:960px){
    .advantage_mv_text h2{font-size: 2.5vw;}
    .mv_read p{font-size: 15px; line-height: 1.8;}
    .planning_read p{font-size: 14px; letter-spacing: 1px;}
}
@media screen and (max-width:640px){
    .advantage_mv_text h2{font-size: 4vw;}
    .planning_read{padding: 40px 0;}
    .planning_read p{text-align: left;}
}

.bk_color{background: #f4f4f4;}
.introduction{margin-bottom: 50px;}
.introduction h4 {font-size: 24px; color: #535557; border-left: 7px solid #671e75; letter-spacing: 2px; line-height: 1.5; padding-left: 15px; margin-bottom: 50px;}
.introduction p{font-size: 16px; line-height: 2;}

@media screen and (max-width:640px){
    .introduction{margin-bottom: 20px;}
    .introduction h4{font-size: 18px;border-left: 5px solid #671e75; padding-left: 10px; letter-spacing: 1px; margin-bottom: 20px;}
    .introduction p{font-size: 14px; line-height: 1.8;}
}

.flex {display: flex;flex-wrap: wrap;}
.caption {font-size: 11px;text-align: right;padding-top: 5px;}

/* network_data =========================*/
#network_data{}
#network_data .p-titleSecondary{margin-bottom: 60px;}
#network_data .n_data_wrap{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#network_data .n_data_blueBox{background: #813F94; width: 49%; 
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}

.n_data_line01{margin:120px auto 0;}
.n_data_blueBox{padding: 20px 0;}
.n_data_blueBox p{color: #fff;}
.icon_col{width: 15%;}
.text_col{width: 55%; padding: 0 2%;}
.minitext_col{width: 20%;}
.text_col p:nth-child(1){font-size: 26px;}
.text_col p:nth-child(2) b{font-family: urw-din, sans-serif; font-size: 100px; font-weight: 400; line-height: 0.81; letter-spacing: -3px;}
.text_col p:nth-child(2) small{font-family: urw-din, sans-serif; font-size:60px;}
.text_col p:nth-child(2){font-size: 34px;}
.text_col p:nth-child(3){font-size: 11px; margin-top: 10px;}
.minitext_col p{font-size: 13px; line-height: 1.5; border: 1px solid #fff; padding: 5px 8px; border-radius: 5px; display: inline-block;}
.n_data_l01_box01 .text_col{padding-left: 4%;}

.n_data_line02{margin-top: 80px; margin-bottom: 80px;}
.n_data_line02 .n_data_blueBox{padding: 20px 0; margin-bottom: 30px;}

.n_data_line02 .graph_title{width: 100%; text-align: center; font-size: 26px;}
.n_data_line02 .graph_title img{vertical-align: middle; padding-right: 20px;}
.n_data_line02 .graph_wrap{margin: 0 5%;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    flex-direction: row-reverse;}
.n_data_line02 .graph_wrap figure{width: 43%;}
.n_data_line02 .graph_wrap .graph_about{width: 57%;}
.n_data_line02 .graph_wrap .graph_about ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.n_data_line02 .graph_wrap .graph_about ul li{width: 48%; font-size: 13px; color: #fff; position: relative; padding-left: 25px; margin-bottom: 15px; line-height: 1.3;}

.n_data_line02 .graph_wrap figure{transform: rotate(45deg) scale(0.7); opacity: 0; transition: 0.8s ease-in;}
.n_data_line02 .graph_wrap figure.show{transform: rotate(0) scale(1); opacity: 1;}

.n_data_line03{margin-bottom: 80px;}
.synergy_wrap{margin-bottom: 30px;}
.synergy_image{text-align: center;}
.synergy_image img {max-width: 1000px;width: 100%;}

.n_data_line04 {margin-bottom: clamp(40px, 5vw, 80px);}
.n_data_line04_contents {justify-content: space-between;}
.n_data_line04_contents__item {width: 48%;}

.graph_wrap .graph_about ul li::before{content: ""; width: 15px; height: 15px; display: inline-block; 
    border-radius: 3px; vertical-align: middle; position: absolute; left: 0;}
.graph_wrap .graph_about ul li:nth-child(1)::before{background: #e4a8c2;}
.graph_wrap .graph_about ul li:nth-child(2)::before{background: #57b5c3;}
.graph_wrap .graph_about ul li:nth-child(3)::before{background: #e39a82;}
.graph_wrap .graph_about ul li:nth-child(4)::before{background: #75c0e4;}
.graph_wrap .graph_about ul li:nth-child(5)::before{background: #ebc997;}
.graph_wrap .graph_about ul li:nth-child(6)::before{background: #7f9fcc;}
.graph_wrap .graph_about ul li:nth-child(7)::before{background: #aebf5d;}
.graph_wrap .graph_about ul li:nth-child(8)::before{background: #b786b2;}
.graph_wrap .graph_about ul li:nth-child(9)::before{background: #9d8a87;}
.graph_wrap .graph_about p{font-size: 11px; margin-top: 10px;}

@media screen and (max-width:1230px){
    .text_col{width: 60%; padding: 0 2%;}
}
@media screen and (max-width:1130px){
    .text_col p:nth-child(2) b{font-size: 80px;}
}
@media screen and (max-width:960px){
    #network_data .n_data_blueBox{width: 100%; margin-bottom: 20px;}

    .icon_col{width: 40%; text-align: right;}
    .icon_col img{max-width: 25%;}

    .minitext_col{width: 100%; text-align: center; margin-top: 10px;}
    .minitext_col p br.tab{display: none;}
}
@media screen and (max-width:640px){
    #network_data .p-titleSecondary{margin-bottom: 40px;}

    .n_data_line01{margin:60px auto 50px;}
    .n_data_blueBox{padding: 20px 15px;}
    .icon_col{width: 100%; text-align: center; margin-bottom: 10px;}
    .text_col{width: 100%; text-align: center;}
    .text_col p:nth-child(1){font-size: 20px;}
    .text_col p:nth-child(2){font-size: 30px;}
    .text_col p:nth-child(2) b{font-size: 60px; letter-spacing: 0;}
    .text_col p:nth-child(3){margin-top: 5px;}

    #network_data .n_data_blueBox{padding: 20px 15px;}
    .n_data_line02{margin-bottom:40px;}
    .n_data_line02 .graph_title{font-size: 20px; margin-bottom: 15px;}
    .n_data_line02 .graph_title img{padding-right: 10px; width: 55px;}

    .n_data_line02 .graph_wrap{margin: 0;}
    .n_data_line02 .graph_wrap figure{width: 100%; margin: 0 20px 20px;}
    .n_data_line02 .graph_wrap .graph_about{width: 100%;}
    .n_data_line02 .graph_wrap .graph_about ul li{font-size: 11px; padding-left: 22px;}
	
		.n_data_line04_contents__item {width: 100%;}
		.n_data_line04_contents__item + .n_data_line04_contents__item {margin-top: 40px;}

    .synergy_image{margin-left: -10px; margin-right: -10px;}
}

/* collaboration =========================*/
#collaboration{padding: 80px 0;}
.p-titleSecondary{margin-bottom: 60px;}
#collaboration .introduction_wrap{display: flex; flex-wrap: wrap; justify-content: left;}
#collaboration .introduction_wrap .introduction{width: 80%;}
#collaboration .introduction_wrap figure{width: 20%; padding-left: 3%;}

.collaboration_wrap{margin-top: 30px; text-align: center;}
.collaboration_wrap img {max-width: 1230px;width: 100%;}

#collaboration .n_data_wrap {}
#collaboration .n_data_blueBox {background: #813F94;max-width: 800px;margin: 15px auto 0;}
#collaboration .text_col {width: 100%;display: flex;justify-content: space-evenly;align-items: center;}

@media screen and (max-width:640px){
    #collaboration{padding: 40px 0;}
    .p-titleSecondary{margin-bottom: 40px;}
    #collaboration .introduction_wrap .introduction,
    #collaboration .introduction_wrap figure{width: 100%;}
    #collaboration .introduction_wrap figure{padding-left:0; text-align: center; max-width: 35%; margin: 0 auto;}

	#collaboration .n_data_wrap {}
	#collaboration .n_data_blueBox {}
	#collaboration .text_col {display: block;}
	
}

/* other_content =========================*/
#other_content{padding: 80px 0;}
#other_content .inner{max-width: 1100px;}

.other_con_wrap{}
.other_con_wrap.retail_wrap{margin-bottom: 150px;}
.other_con_wrap .p-titleSecondary{text-align: left; margin-bottom: 30px;}
.other_con_wrap .introduction h4{margin-bottom: 30px;}

.site_figure ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.site_figure ul li{width: 46%; text-align: center; margin-bottom: clamp(40px, 5vw, 60px);}
.site_figure ul li p{border: 1px solid #671e75; color: #671e75; font-weight: 500; padding: 10px 0; margin-bottom: 20px; border-radius: 50px;}
.site_figure ul li img{border: 1px solid #999;}
.site_figure ul li a{display: block;transition: 0.3s ease;}
/*.site_figure ul li a:hover p{background: #671e75; color: #fff;}*/
.site_figure ul li a:hover {opacity: 0.7;}

.oc_sitePickup {}
.oc_sitePickup a {display: block;margin-bottom: clamp(40px, 5vw, 60px);}
.oc_sitePickup_leadWrap {}
.oc_sitePickup_title {color: #fff;font-weight: 500;line-height: 1.8;background: #671e75;border-radius: 50px;padding: 10px 0;margin-bottom: 20px;text-align: center;}
.oc_sitePickup .flex {justify-content: space-between;}
.oc_sitePickup .flex_item {width: 48%;margin-top: 20px;}
/* ホバー */
.oc_sitePickup a:hover {opacity: 0.7;}

@media screen and (max-width:640px){
    #other_content{padding: 40px 0;}
    .other_con_wrap .other_con_text,
    .other_con_wrap .other_con_figure,
    .other_con_wrap.site_wrap .other_con_text,
    .other_con_wrap.site_wrap .other_con_figure,
    .site_figure ul li{width: 100%;}
    .other_con_wrap.retail_wrap{margin-bottom: 60px;}
    
	.site_figure ul li p {font-size: 13px;letter-spacing: 0;}
	
	.oc_sitePickup .flex {display: block;}
	.oc_sitePickup .flex_item {width: 100%;}
	.oc_sitePickup_title {font-size: 13px;}
}