@charset "utf-8";
/* CSS Document */

#index header {
    background-color: #ffffff;
}

#index main {
    padding-top: 0px;
}

#index main:before {
	display: none;
}




#index #mainview {
    position: relative;
    width: 100%;
    padding-top: 59.2592%;/*アスペクト比　画像の高さが変わったら合わせて変更*/
}

#index #mainview .mv_slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -2;
}

#index #mainview .mv_slide .mv_slide1 {
    width: 100%;
    height: 100%;
    background-image: url(../img/index/mv_slide1.jpg);
    background-size:100%;
    background-position: center;
    background-repeat: no-repeat;
}

#index #mainview .mv_phrase {
	position: absolute;
    top: 36.5%;
    max-width: 570px;
    width: 45%;
}

#index #mainview .mv_phrase p {
	position: relative;
    padding-left: 15%;
    padding-right: 15px;
}

#index #mainview .mv_phrase .main_text {
	margin-bottom: 25px;
}

#index #mainview .mv_phrase .main_text:after {
	position: absolute;
    content: '';
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 20px;
    background: #ffffff;
    transform: scale(0, 1);
    transform-origin: left top;
    z-index: -1;
	animation: line 2s both;
}

#index #mainview .mv_phrase .main_text:first-of-type:after {
    width: 67%;
}


@keyframes line {
from {
    transform: scale(0, 1);
}
to {
    transform: scale(1, 1);
}
}

#index #mainview .mv_phrase .sub_text {
	font-size: 22px;
	line-height: 2;
	animation-delay: 2.5s;
}


#index #mainview .mv_slide .svg_anime {
	position: absolute;
    top: 12vw;
    left: 57.05vw;
    width: 38vw;
    z-index: 1;
}

#index #mainview .mv_slide .svg_anime .frame {
	position: absolute;
    left: 0.2vw;
    top: 25.9vw;
    width: 11.75vw;
    z-index: -1;
}

.svg_anime #large_circle {
    fill: none;
	stroke: #000000;
}

.svg_anime #line {
    stroke-dasharray: 1000px;
    fill: none;
    stroke: transparent;
	opacity: 0;
}

.svg_anime #small_circle {
	opacity: 0;
}

.svg_anime #text_group {
	opacity: 0;
}

@keyframes svg-line {
	0% {
		opacity: 0;
		stroke-dashoffset:1000px;
		stroke:transparent;
	}
	50% {
		opacity: 1;
		stroke:#000000;
	}
	100% {
		opacity: 1;
		stroke-dashoffset:0px;
		stroke:#000000;
	}
}

@keyframes svg-fadein {
	from {
    	opacity: 0;
	}
	to {
    	opacity: 1;
	}
}

#mainview .mv_slide .svg_anime #line {
	animation: svg-line 2s both;
	animation-delay: 0.5s;
}

#mainview .mv_slide .svg_anime #small_circle {
	animation: svg-fadein 1s both;
	animation-delay: 0.5s;
}

#mainview .mv_slide .svg_anime #text_group {
	animation: svg-fadein 1s both;
	animation-delay: 1.5s;
}











#index .value {
	position: relative;
	padding: 80px 0px;
}

#index .value:after {
	position: absolute;
    content: "";
    display: block;
    top: 0px;
    left: -420px;
    width: 680px;
    height: 660px;
    background-color: #00A3FF;
    z-index: -1;
    transform: skewX(-45deg);
}

#index .value .title {
    justify-content: flex-start;
}

#index .value .title .category {
    width: 130px;
	font-size: 160px;
	line-height: 1;
}

#index .value .title .category span {
	display: block;
	font-size:20px;
	color: #ffffff;
}

@media screen and (min-width: 1550px) {

#index .value .title .category span {
	color: #000000;
}

}

#index .value .title .lead_text {
	width: 50%;
    font-size: 25px;
    font-weight: 700;
    margin-left: 10%;
}

#index .value .title .lead_text span {
	background:linear-gradient(transparent 60%, #00E2FF 60%);
}

#index .value .title .click_cards {
	width: calc(35% - 130px);
    margin-left: 5%;
    justify-content: flex-start;
}

#index .value .title .click_cards img {
	width:auto;
}

#index .value .title .click_cards .arrow_box {
	position: relative;
    display: block;
    padding-top: 100px;
    margin-left: 10%;
}

#index .value .title .click_cards .arrow_box span {
    position: absolute;
    content: "";
    width: 2px;
    height: 30px;
    background-color: #000000;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
	animation: arrowmove 2s infinite;
}

@keyframes arrowmove {
0% {
    height: 30px;
}
50%{
    height: 80px;
}
100%{
    height: 30px;
}
}

#index .value .title .click_cards .arrow_box span:after {
	position: absolute;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 2px #000000;
    border-right: solid 2px #000000;
    transform: rotate(135deg);
    bottom: 0;
    left: -5px;
}

#index .value .cardarea {
	margin-top: 50px;
}

#index .value .cardarea .card_wrap {
	position: relative;
    padding-top: 35vw;
}

#index .value .cardarea .card_wrap .item {
	position: absolute;
	max-width: 254px;
    width: 18vw;
}


#index .value .cardarea .card_wrap .card1 {
	top: 5vw;
    left: 0.5vw;
    transform: rotate(-8deg);
	z-index: 2;
}

#index .value .cardarea .card_wrap .card2 {
    top: 4vw;
    left: 15.75vw;
    transform: rotate(20deg);
	z-index: 1;
}

#index .value .cardarea .card_wrap .card3 {
	top: 6.5vw;
    left: 32.6vw;
    transform: rotate(-9deg);
	z-index: 0;
}

#index .value .cardarea .card_wrap .card4 {
	top: 1vw;
	left: 48vw;
    transform: rotate(3deg);
	z-index: 2;
}

#index .value .cardarea .card_wrap .card5 {
	top: 2.75vw;
    left: 66vw;
    transform: rotate(12deg);
	z-index: 1;
}

#index .value .cardarea .card_wrap .card6 {
	top: 6.5vw;
	left: 82.5vw;
    transform: rotate(-8deg);
	z-index: 2;
}


#index .value .cardarea .card_wrap .item a {
	cursor: pointer;
	display: block;
}

#index .value .cardarea .card_wrap .item img {
    transition: transform .8s cubic-bezier(.43,.05,.17,1),opacity .8s cubic-bezier(.26,.06,0,1);
}

#index .value .cardarea .card_wrap .item:hover img {
    transform: rotate(5deg);
    transition-duration: .5s,.3s;
}

#index .value .cardarea .card_wrap .card1 a {
	animation-delay: 0.15s;
}

#index .value .cardarea .card_wrap .card2 a {
	animation-delay: 0.3s;
}

#index .value .cardarea .card_wrap .card3 a {
	animation-delay: 0.45s;
}

#index .value .cardarea .card_wrap .card4 a {
	animation-delay: 0.6s;
}

#index .value .cardarea .card_wrap .card5 a {
	animation-delay: 0.75s;
}

#index .value .cardarea .card_wrap .card6 a {
	animation-delay: 0.9s;
}

#index .value .loop_text {
	margin-top: 30px;
}

#index .value .loop_text img {
    padding: 0px 2%;
}


/*モーダル設定*/

#index .remodal-overlay {
    background: rgba(0 153 255 / 65%);
}

#index .remodal .modal_detail .modal_info {  
	position: relative;
}

#index .remodal .modal_detail .modal_info .img_box {
	max-width: 260px;
    width: calc(95% - 490px);
}

#index .remodal .modal_detail .modal_info .text_box {  
	max-width: 490px;
    width: 100%;
    text-align: left;
}

#index .remodal .modal_detail .modal_info .text_box h3 {
	font-size: 32px;
    letter-spacing: 4px;
}

#index .remodal .modal_detail .modal_info .text_box p {
	margin-top: 20px;
    width: 53%;
	line-height: 2;
}

#index .remodal .modal_detail .modal_info .text_box img {
    position: absolute;
    max-width: 280px;
    width: 38%;
    bottom: -30px;
    right: -20px;
    z-index: -1;
}



#index .remodal2 .modal_detail .modal_info .text_box p {
    width: 59%;
}

#index .remodal3 .modal_detail .modal_info .text_box p {
    width: 55%;
}

#index .remodal4 .modal_detail .modal_info .text_box p {
    width: 61%;
}

#index .remodal5 .modal_detail .modal_info .text_box p {
    width: 56%;
}

#index .remodal6 .modal_detail .modal_info .text_box p {
    width: 65%;
}





#index .about {
	padding: 120px 0px;
}

#index .about .text_box,
#index .business .text_box,
#index .people .text_box {
	width: 38%;
}

#index .about .category,
#index .business .category,
#index .people .category,
#index .environment .category,
#index .information .category {
	font-size: 18px;
	color:#0099FF;
}

#index .about .title,
#index .business .title,
#index .people .title,
#index .environment .title,
#index .information .title  {
	font-size: 40px;
	margin-top: 45px;
}

#index .about .text_box .title + p,
#index .business .text_box .title + p,
#index .project .title_wrap + p,
#index .people .text_box .title + p,
#index .information .title + p  {
	margin-top: 50px;
	font-size: 15px;
	line-height: 2;
}

#index .about .text_box .btn_wrap:not(:first-of-type),
#index .business .text_box .btn_wrap:not(:first-of-type),
#index .information .text_box .right .btn_wrap:not(:first-of-type) {
	margin-top: 15px;
}

#index .about .movie {
	width: 50%;
}

#index .about .movie a {
	display: block;
	position: relative;
}

#index .about .movie a:before {
    content: "";
    position: absolute;
	top: 50%;
    left: 51.75%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
    border: 12px solid transparent;
    border-left: 25px solid #ffffff; 
    z-index: 1;
}

#index .about .movie a:after {
    position: absolute;
    content: "";
    width: 70px;
    height: 70px;
    border-radius: 35px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	background-color:#C71414;
    z-index: 0;
	-webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

#index .about .movie a:hover:after {
	background-color:#0099ff;
}

#index .about .movie img {
    border-radius: 10px;
	-webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

#index .about .movie a:hover img {
	opacity: 0.7;
}

#index .about .movie p {
	margin-top: 10px;
}

#index .about .movie_sp {
	display: none;
}


#index .business {
	position: relative;
	padding: 120px 0px 30%;
    background-color: #E0EFEF;
	z-index: 1;
}

#index .business .bg_box {
	position: absolute;
	content:"";
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
}

#index .business .bg_box:after {
	position: absolute;
    content: "";
    width: 85%;
    height: 90%;
    background-image: url(../img/index/business_bg.png);
    background-size: 60vw;
    background-position: right bottom;
    background-repeat: no-repeat;
    right: 0;
    bottom: -100px;
}

#index .business .bg_box .svg_anime {
	position: absolute;
    bottom: 28.25vw;
    right: 5.5%;
    width: 25vw;
    z-index: 1;
}

.svg_anime.active #line {
	animation: svg-line 2s both;
	animation-delay: 0.5s;
}

.svg_anime.active #small_circle {
	animation: svg-fadein 1s both;
	animation-delay: 0.5s;
}

.svg_anime.active #text_group {
	animation: svg-fadein 1s both;
	animation-delay: 1.5s;
}



#index .project {
    position: relative;
    margin-top: -25%;
    padding: 0px 0px 50px;
    z-index: 1;
}

#index .project .title_wrap {
	justify-content: flex-start;
    align-items: flex-end;
	padding: 20px 0px 0px 25px;
    border-left: solid 7px #0099ff;
}

#index .project .title_wrap .category {
	line-height: 1.2;
	font-size: 45px;
}

#index .project .title_wrap .category span {
	display: block;
	margin-left: 80px;
}

#index .project .title_wrap .title {
	font-size: 16px;
	margin:0px 0px 15px 30px;
}

#index .project .title_wrap + p {
	padding-left: 32px;
}

#index .project .project_slide {
	margin-top: 40px;
	align-items: flex-end;
}

#index .project .project_slide .thumb_slider {
	width: 55%;
    left: -10%;
	margin-bottom: 0px;
}

#index .project .project_slide .thumb_slider .img_item {
	padding-left: 2.5%;
}

#index .project .project_slide .thumb_slider .img_item .link_zoom_box .link_wrap {
    border-radius: 10px;
}

#index .project .project_slide .thumb_slider .img_item .link_zoom_box .zoom_wrap {
	padding-top: 65%;
}

#index .project .project_slide .thumb_slider .img_item.project1 .link_zoom_box .zoom_wrap {
    background-image: url("../img/index/story_link1.jpg");
}

#index .project .project_slide .thumb_slider .img_item.project2 .link_zoom_box .zoom_wrap {
    background-image: url("../img/index/story_link2.jpg");
}

#index .project .project_slide .thumb_slider .img_item.project3 .link_zoom_box .zoom_wrap {
    background-image: url("../img/index/story_link3.jpg");
}

#index .project .project_slide .slick-dots {
	width: auto;
    bottom: 0px;
    right: -25px;
}

#index .project .project_slide .slick-dots li {
	margin-top: 10px;
    width:3px;
    height: 25px;
    background: #707070;
    display: block;
	-webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

#index .project .project_slide .slick-dots li button {
    width: 3px;
    height: 50px;
    padding: 0px;
}

#index .project .project_slide .slick-dots li.slick-active {
    background: #0099FF;
    height:50px;
}

#index .project .project_slide .slick-dots li button:before {
    display: none;
}

#index .project .project_slide .text_slider {
	width: 40%;
    left: -10%;
	margin-bottom: 20px;
}

#index .project .project_slide .text_slider p {
	font-size: 16px;
}

#index .project .project_slide .text_slider h3 {
	margin-top: 20px;
}

#index .project .project_slide .text_slider h3 svg {
	fill: #000000;
    stroke: #000000;
    stroke-width: 0.5;
}

#index .title_sp {
    display: none;
}



#index .project .project_slide .text_slider a {
	position: relative;
	display: inline-block;
    margin-top: 20px;
    color: #0099ff;
}

#index .project .project_slide .text_slider a .more {
	position: relative;
    display: block;
    width:100px;
    height: 25px;
    overflow: hidden;
}

#index .project .project_slide .text_slider a .more:before,
#index .project .project_slide .text_slider a .more:after {
	position: absolute;
    display: block;
    font-size: 16px;
    content: "View more";
    font-family: 'Prompt','Noto Sans JP', sans-serif;
    font-weight: 600;
    width: 100%;
    height: 20px;
    color: #0099FF;
    z-index: 2;
}

#index .project .project_slide .text_slider a .more:after {
	opacity: 0;
    transform: translate(0%, -100%);
    -webkit-transform: translate(0%, -100%);
    -ms-transform: translate(0%, -100%);
}

#index .project .project_slide .text_slider a:hover .more:before {
	animation: morebefore 1s infinite;
}

#index .project .project_slide .text_slider a:hover .more:after {
	animation: moreafter 1s infinite;
}


#index .project .project_slide .text_slider a .line {
    position: absolute;
    display: block;
    width: 45px;
    height: 1px;
    top: 12px;
    left: 110px;
}

#index .project .project_slide .text_slider a .line:before,
#index .project .project_slide .text_slider a .line:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    transform: scale(1, 1);
    transform-origin: right top;
    transition: transform 0.3s;
    background-color: #000000;
}

#index .project .project_slide .text_slider a .line:after {
    width: 0%;
    transform: scale(0, 1);
    transform-origin: left top;
}

#index .project .project_slide .text_slider a:hover .line:before {
	animation: line-before 1s infinite;
}

#index .project .project_slide .text_slider a:hover .line:after {
	animation: line-after 1s infinite;
}




#index .project .project_slide .thumb_slider:hover ~ .text_slider a .more:before {
	animation: morebefore 1s infinite;
}

#index .project .project_slide .thumb_slider:hover ~ .text_slider a .more:after {
	animation: moreafter 1s infinite;
}

#index .project .project_slide .thumb_slider:hover ~ .text_slider a .line:before {
	animation: line-before 1s infinite;
}

#index .project .project_slide .thumb_slider:hover ~ .text_slider a .line:after {
	animation: line-after 1s infinite;
}







#index .people {
	position: relative;
	padding: 80px 0px 200px;
}

#index .people:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 120px;
	background-color: #0099ff;
	left: 0;
	bottom: 0;
}



#index .people .people_slide {
	display: none;
    position: absolute;
    right: 3.5%;
	bottom: 0;
    width: 55%;
    z-index: 1;
}

#index .people .people_slide.slick-initialized {
	display: block;
}


#index .people .people_slide .item a {
	display: block;
}

#index .people .people_slide .item .img_box {
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
	transform: scale(0.85,0.85);
	transform-origin: bottom center;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    margin: 0px -40px;
}

#index .people .people_slide .item .profile {
    margin: 15px 0px 0px 20px;
	opacity: 0;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

#index .people .people_slide .item .profile p {
    color: #ffffff;
	font-size: 13px;
	line-height: 1.7;
}

#index .people .people_slide .item .profile p span {
    padding-left: 20px;
}

/*slick-centerがついた時の処理*/

#index .people .people_slide .item.slick-center .img_box {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
	transform: scale(1,1);
}

#index .people .people_slide .item.slick-center .profile {
	opacity: 1;
}


#index .people .people_slide .slick-prev,
#index .people .people_slide .slick-next {
    top: auto;
    bottom: -20px;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 5;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

#index .people .people_slide .slick-prev:before,
#index .people .people_slide .slick-next:before {
	content: "";
}

#index .people .people_slide .slick-prev {
	background-image: url("../img/index/slide_arrow_left.svg");
}

#index .people .people_slide .slick-next {
	background-image: url("../img/index/slide_arrow_right.svg");
}

#index .people .people_slide .slick-prev:hover,
#index .people .people_slide .slick-next:hover {
	opacity: 0.5;
}


#index .people .people_slide .slick-dots {
	bottom: -40px;
}

#index .people .people_slide .slick-dots li {
	margin: 0px 0px;
    width: 8.5%;
    height: 2px;
	background: #ffffff;
}

#index .people .people_slide .slick-dots li button {
    width: 100%;
    height: 2px;
    padding: 0px;
}

#index .people .people_slide .slick-dots li.slick-active {
    background: #000000;
}

#index .people .people_slide .slick-dots li button:before {
    display: none;
}




#index .environment {
	position: relative;
	padding: 70px 0px 80px;
	background-color: #0099ff;
	color:#ffffff;
}

#index .environment:after {
	position: absolute;
	content: "";
	width: 85%;
	height: 1px;
	background-color: #ffffff;
	left: 0;
	bottom: 0;
}

#index .environment .category {
	color:#ffffff;
}

#index .environment .text_box {
	width: 80%;
	align-items: flex-start;
}

#index .environment .left {
	width: 40%;
}

#index .environment .right {
    width: 50%;
    margin-top: 80px;
}

#index .environment .right p {
    font-size: 15px;
    line-height: 2;
}



#index .information {
	position: relative;
	padding: 80px 0px 25%;
	background-color: #0099ff;
	color:#ffffff;
	overflow: hidden;
	z-index:2;
}

#index .information:after {
	position: absolute;
    content: "";
    display: block;
    bottom: -5px;
    right: -45%;
    width: 70%;
    height: 120%;
    background-color: #ffffff;
    z-index: -2;
    transform: skewX(-45deg);
}

#index .information .category {
	color:#ffffff;
}

#index .information .text_box {
	width: 82%;
	align-items: flex-start;
}

#index .information .left {
	width: 28%;
}

#index .information .right {
    width: 65%;
    margin-top: 80px;
}

#index .information .right .btn_wrap:first-of-type {
    margin-top: 0px;
}

#index .information .bg_box {
	position: absolute;
	content:"";
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#index .information .bg_box:after {
	position: absolute;
	content:"";
	width: 100%;
	height: 100%;
    background-image: url(../img/index/information_bg.png);
    background-size: 100vw;
    background-position: right bottom -30px;
    background-repeat: no-repeat;
}

#index .information .bg_box .svg_anime {
	position: absolute;
    bottom: 1.9vw;
    right: 5%;
    width: 40vw;
    z-index: 1;
}

	

#index .information .bg_box .svg_anime_sp {
	display: none;
}




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

#index .value .title .lead_text {
    width: 55%;
    margin-left: 5%;
}



#index .about .text_box, 
#index .business .text_box, 
#index .people .text_box {
    width: 45%;
}


#index .business {
    padding: 120px 0px 20%;
}

#index .business .bg_box:after {
    background-size: 70vw;
    right: -40px;
    bottom: -10px;
}

#index .business .bg_box .svg_anime {
    bottom: 41.25vw;
    right: 6%;
}


#index .project {
	margin-top: -10%;
}

#index .project .title_wrap {
    display: block;
}

#index .project .title_wrap .title {
    margin: 15px 0px 0px 0px;
    padding-bottom: 30px;
}

#index .project .title_wrap + p {
    padding-left: 0px;
}

#index .project .title_wrap + p br {
    display: none;
}

#index .project .project_slide .thumb_slider {
    width: 50%;
    left: -15%;
}

#index .project .project_slide .text_slider {
    width: 50%;
    left: -10%;
}


#index .people .people_slide {
    width: 52%;
}

 #index .people .text_box {
    width: 40%;
}

#index .people .people_slide .slick-prev,
#index .people .people_slide .slick-next {
    bottom: -85px;
}

#index .people .people_slide .slick-prev {
    left: 0px;
}

#index .people .people_slide .slick-next {
    right: 0px;
}



#index .information:after {
    bottom: -30px;
    right: -50%;
    height: 100%;
}



}


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

#index #mainview {
    padding-top:150%;
}

#index #mainview .mv_phrase {
    top: 15%;
	max-width: 90%;
    width: 90%;
}

#index #mainview .mv_phrase p {
    padding-left: 7.5%;
}

#index #mainview .mv_slide .mv_slide1 {
	background-image: url("../img/index/mv_slide1_sp.jpg");
}

#index #mainview .mv_slide .svg_anime {
	top: 71.5vw;
    width: 67vw;
    left: 25.75vw;
}

#index #mainview .mv_slide .svg_anime .frame {
    left: 0.5vw;
    top: 45.825vw;
    width: 20.75vw;
}


#index .value:after {
    left: -520px;
    width: 620px;
    height: 570px;
}

#index .value .title .category {
    width:100%;
    font-size: 110px;
    margin-bottom: 30px;
}

#index .value .title .category span {
    font-size: 15px;
}

#index .value .title .lead_text {
    width: 70%;
    font-size: 22px;
    margin-left: 0%;
    line-height: 1.85;
}

#index .value .title .click_cards {
    width: 25%;
}

#index .value .title .click_cards img {
    width: 75%;
}



#index .value .cardarea .card_wrap {
    padding-top: 88vw;
}

#index .value .cardarea .card_wrap .item {
    max-width: 32%;
    width: 32vw;
}


#index .value .cardarea .card_wrap .card1 {
    left: 0.5vw;
}

#index .value .cardarea .card_wrap .card2 {
    left: 32vw;
    transform: rotate(12deg);
}

#index .value .cardarea .card_wrap .card3 {
	top: 3.5vw;
    left: 64vw;
}

#index .value .cardarea .card_wrap .card4 {
	top: 48vw;
    left: 2vw;
    transform: rotate(8deg);
}

#index .value .cardarea .card_wrap .card5 {
	top: 47.75vw;
    left: 36vw;
    transform: rotate(-10deg);
}

#index .value .cardarea .card_wrap .card6 {
	top: 44.5vw;
    left: 67.5vw;
    transform: rotate(5deg);
}



/*モーダル設定*/
	
#index .remodal .modal_detail .modal_info .img_box {
    max-width: 270px;
    width: 50%;
    margin: auto;
}

#index .remodal .modal_detail .modal_info .text_box {
    position: relative;
    max-width: 100%;
    padding: 50px 0px 100px;
}

#index .remodal .modal_detail .modal_info .text_box h3 {
    font-size: 27px;
    letter-spacing: 2px;
}

#index .remodal .modal_detail .modal_info .text_box h3 br {
    display: none;
}

#index .remodal .modal_detail .modal_info .text_box img {
    right: 0px;
    bottom: 0px;
    width: 37%;
}

#index .remodal .modal_detail .modal_info .text_box p {
    margin-top: 40px;
}

#index .remodal .modal_detail .modal_info .text_box p,
#index .remodal2 .modal_detail .modal_info .text_box p,
#index .remodal3 .modal_detail .modal_info .text_box p,
#index .remodal4 .modal_detail .modal_info .text_box p,
#index .remodal5 .modal_detail .modal_info .text_box p,
#index .remodal6 .modal_detail .modal_info .text_box p {
    width: 60%;
}


#index .remodal .modal_detail .modal_info .text_box p br {
	display: none;
}




#index .about .title,
#index .business .title,
#index .people .title, 
#index .environment .title, 
#index .information .title {
    font-size: 35px;
    margin-top: 30px;
}

#index .about .text_box, 
#index .business .text_box,
#index .people .text_box {
    width: 100%;
}



#index .about .movie_pc {
	display: none;
}

#index .about .movie_sp {
	display: block;
    margin: 50px auto;
}

#index .about .movie {
    width: 100%;
}



#index .business {
    padding: 120px 0px 80%;
}

#index .business .bg_box:after {
    background-size: 100vw;
    right: 0px;
    bottom: -90px;
    width: 100%;
    height: 100%;
}

#index .business .bg_box .svg_anime {
    width: 45vw; 
	bottom: 47.25vw;
}



#index .project {
    margin-top: -90px;
}

#index .project .title_wrap {
    padding: 30px 0px 0px 25px;
}

#index .project .title_wrap .category {
    font-size: 40px;
    color: #ffffff;
    filter: drop-shadow(1px 1px 3px #000000);
}

#index .project .title_wrap .category span {
    display: inline-block;
    margin-left: 20px;
}

#index .project .title_wrap .title {
    margin: 30px 0px 0px 0px;
    padding-bottom: 40px;
}


#index .project .project_slide .thumb_slider {
    width:100%;
    left: 0%;
    right: 0%;
    margin: auto;
}

#index .project .project_slide .thumb_slider .img_item {
    padding: 0px 1% 50px;
}

#index .project .project_slide .slick-dots {
    right: 0;
    left: 0;
}

#index .project .project_slide .slick-dots li {
    width: 20%;
    height: 4px;
	display: inline-block;
}

#index .project .project_slide .slick-dots li.slick-active {
    height: 4px;
}

#index .project .project_slide .slick-dots li button {
    width: 20%;
    height: 4px;
}

#index .project .project_slide .text_slider {
    width: 90%;
    left: 0%;
    right: 0%;
    margin: 50px auto 0px;
}




#index .people {
    padding: 80px 0px 50px;
}

#index .people:after {
    height: 25%;
}

#index .people .people_slide {
    position: relative;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin-top: 50px;
}

#index .people .people_slide .slick-dots li {
    width: 7.5%;
}


#index .people .people_slide .slick-prev {
    left: 5%;
}

#index .people .people_slide .slick-next {
    right: 5%;
}

#index .people .people_slide .item .profile {
    margin: 15px 0px 0px 0px;
	text-align: center;
}




#index .environment {
    padding: 120px 0px 80px;
}

#index .environment .text_box {
    width: 100%;
}

#index .environment .left {
    width: 100%;
}

#index .environment .right {
    width: 100%;
    margin-top: 50px;
}



#index .information {
    padding: 80px 0px 50%;
}

#index .information:after {
    display: none;
}

#index .information .text_box {
    width: 100%;
}

#index .information .left {
    width: 100%;
}

#index .information .right {
    width: 100%;
    margin-top: 50px;
}

#index .information .bg_box .svg_anime_pc {
	display:none;
}

#index .information .bg_box .svg_anime_sp {
	display: block;
}

#index .information .bg_box:after {
    background-size: 130vw;
    background-position: right bottom -5px
}

#index .information .bg_box .svg_anime {
	bottom: 3vw;
    width: 60vw;
}

#index .information .bg_box .svg_anime svg {
    fill: #ffffff;
}

#index .information .bg_box .svg_anime.active #line {
    animation: svg-line_white 2s both;
}

@keyframes svg-line_white {
	0% {
		opacity: 0;
		stroke-dashoffset:1000px;
		stroke:transparent;
	}
	50% {
		opacity: 1;
		stroke:#ffffff;
	}
	100% {
		opacity: 1;
		stroke-dashoffset:0px;
		stroke:#ffffff;
	}
}

#index .information .bg_box .svg_anime #large_circle {
    stroke: #ffffff;
}



}


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

#index #mainview {
    padding-top: 200%;
}

#index #mainview .mv_slide .mv_slide1 {
    background-image: url(../img/index/mv_slide1_sp2.jpg);
}

#index #mainview .mv_slide .svg_anime {
    top: 94.5vw;
    width: 87vw;
    left: 5.75vw;
}

#index #mainview .mv_slide .svg_anime .frame {
    left: 0.5vw;
    top: 59.35vw;
    width: 27vw;
}

#index #mainview .mv_phrase {
    top: 18%;
}

#index #mainview .mv_phrase .sub_text {
    font-size: 15px;
}


#index .value .title .category {
    margin-bottom: 50px;
    font-size: 95px;
}

#index .value .title .lead_text {
    width: 100%;
    font-size: 18px;
}

#index .value .title .lead_text br {
	display: none;
}

#index .value .title .click_cards {
    width: 35%;
    margin: 30px auto 0px;
}

#index .value .cardarea .card_wrap {
    padding-top: 185vw;
}

#index .value .cardarea .card_wrap .item {
    max-width: 48%;
    width: 46vw;
}

#index .value .cardarea .card_wrap .card2 {
    left: 48vw;
}

#index .value .cardarea .card_wrap .card3 {
	top: 65.5vw;
    left: 8vw;
    transform: rotate(4deg);
}

#index .value .cardarea .card_wrap .card4 {
	top: 64vw;
    left: 53vw;
    transform: rotate(-4deg);
}

#index .value .cardarea .card_wrap .card5 {
	top: 125.75vw;
    left: 2vw;
    transform: rotate(-2deg);
}

#index .value .cardarea .card_wrap .card6 {
	top: 123.5vw;
    left: 48.5vw;
    transform: rotate(10deg);
}



#index .remodal .modal_detail .modal_info .img_box {
    max-width: 60%;
    width: 60%;
}

#index .remodal .modal_detail .modal_info .text_box {
    padding: 30px 0px 0px;
}

#index .remodal .modal_detail .modal_info .text_box h3 {
    font-size: 16px;
    letter-spacing: 1.5px;
}

#index .remodal .modal_detail .modal_info .text_box p,
#index .remodal2 .modal_detail .modal_info .text_box p,
#index .remodal3 .modal_detail .modal_info .text_box p,
#index .remodal4 .modal_detail .modal_info .text_box p,
#index .remodal5 .modal_detail .modal_info .text_box p,
#index .remodal6 .modal_detail .modal_info .text_box p {
    margin-top: 20px;
    width: 100%;
}

#index .remodal .modal_detail .modal_info .text_box img {
    position: relative;
    right: 0px;
    left: 0px;
    bottom: auto;
    max-width: 50%;
    width: 50%;
    margin: auto;
}

#index .remodal.remodal1 .modal_detail .modal_info .text_box img {
    margin-top: 20px;
}


#index .about .category,
#index .business .category,
#index .people .category,
#index .environment .category,
#index .information .category {
    font-size: 15px;
}

#index .about .title,
#index .business .title,
#index .people .title,
#index .environment .title, 
#index .information .title {
    font-size: 25px;
    margin-top: 20px;
}

#index .about .text_box .title + p,
#index .business .text_box .title + p,
#index .project .title_wrap + p,
#index .people .text_box .title + p,
#index .information .title + p,
#index .environment .right p {
    font-size: 14px;
	margin-top: 35px;
}


#index .about {
    padding: 80px 0px;
}


#index .business {
    padding: 80px 0px 95%;
}

#index .business .bg_box:after {
    background-size: 130vw;
    bottom: -100px;
}

#index .business .bg_box .svg_anime {
    width: 60vw;
    bottom: 52vw;
}


#index .project {
    margin-top: -65px;
}

#index .project .title_wrap {
    border-left: solid 5px #0099ff;
    padding: 15px 0px 0px 15px;
}

#index .project .title_wrap .category {
    font-size: 32px;
}

#index .project .title_wrap .title {
    margin: 15px 0px 0px 0px;
    padding-bottom:15px;
}



#index .title_pc {
    display: none;
}

#index .title_sp {
    display:block;
}



#index .project .project_slide .text_slider a .more {
    width: 85px;
    height: 20px;
}

#index .project .project_slide .text_slider a .more:before,
#index .project .project_slide .text_slider a .more:after {
    font-size: 13px;
}

#index .project .project_slide .text_slider a .line {
    width: 30px;
    left: 90px;
}





#index .people .people_slide {
    margin-top: 30px;
}

#index .people .people_slide .item .profile p {
    font-size: 12px;
}

#index .people .people_slide .item .profile p span {
    padding-left: 15px;
}

#index .people .people_slide .slick-prev, 
#index .people .people_slide .slick-next {
    width: 40px;
    height: 40px;
	bottom: -50px;
}



#index .environment {
    padding: 80px 0px 80px;
}

#index .environment .right {
    margin-top: 0px;
}

#index .information {
    padding: 80px 0px 68%;
}

#index .information .bg_box:after {
    background-size: 165vw;
    background-position: right -70px bottom -5px;
}

#index .information .bg_box .svg_anime {
    bottom: 7vw;
    width: 80vw;
}





}