@charset "UTF-8";

@import url("reset.css");
@import url("contents.css");

 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
general
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.sp {
	display: none !important;
}
	.clearfix:after{
		content: ".";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix{
		display: block;
	}

 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
common
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

html, body {
	height: 100%;
	-webkit-text-size-adjust: none;
}
#wrapper {
    overflow: hidden;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	min-height: 100%;
}
#wrapper {
    position: relative;
}


a:hover > img {
	opacity: 0.8;
	filter: alpha(opacity=80);
}


 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
header
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

header.full {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
}
.home #wrapper {
    padding-top: 300vh;
}


 /* 211112修正 */
header .language {
	position: absolute;
    top: 25px;
    right: 22px;
    margin: auto;
    z-index: 10000;
}



header.full #top_main_wrapper {
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    margin: auto;
    width: 409px;
    height: 216px;
	position: absolute;
}
header.full #top_main {
    top: -50vh;
    left: -50vw;
    right: -50vw;
    bottom: -50vh;
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
}
header.full #top_main:before,
header.full #top_main:after {
    content: "";
    left: -50vw;
    right: -50vw;
    display: block;
    height: 97px;
    margin: 0 auto;
    position: absolute;
    width: calc(100% + 30px);
    border-left: 60px solid #000;
    border-right: 60px solid #000;
}
header.full #top_main:before {
    top: -75px;
    border-top: 60px solid #000;
    border-radius: 159px 159px 0 0;
}
header.full #top_main:after {
    bottom: -75px;
    border-bottom: 60px solid #000;
    border-radius: 0 0 159px 159px;
}
header.full #top_main_inner {
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border-radius: 80px;
}
header.full #top_main_inner > * {
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    position: absolute;
    transform: translate(-50%,-50%);
}
header.full #top_main_inner .slide li {
    width: 100vw;
    height: 100vh;
    background: no-repeat center center;
    background-size: cover;
}
header.full #top_main_inner video {
    top: 50%;
    left: 50%;
    width: 177.77777777777vh;
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    transform: translate(-50%,-50%);
}
header.full .top_nav {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 950px;
    height: 379px;
    font-weight: bold;
}
header.full .top_nav ul {
    width: 150px;
    height: auto;
    margin-top: 200px;
    transform: rotate(90deg);
}
header.full .top_nav li {
    margin-bottom: 10px;
}
header.full .top_nav li img {
    transform: rotate(-90deg);
}
header.full .top_nav li.icon_mail {
    margin-top: 20px;
}


header.full .main_scroll {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    width: 170px;
    height: 20px;
    margin: auto;
    transform: rotate(90deg);
    transform-origin: 0 0;
}
header.full .main_scroll a {
    display: block;
    margin-left: 45px;
}

header.full h1 {
	position: absolute;
    bottom: 60px;
    right: 40px;
    width: 180px;
    height: 55px;
    margin: auto;
}



.arrow a{
    position: relative;
    display: inline-block;
}
.arrow a::before{
    position: absolute;
    content: "";
    margin: auto;
    width: 75px;
    height: 1px;
    background: #6B665E;
}
.arrow a::after{
    position: absolute;
    content: "";
    margin: auto;
    width: 10px;
    height: 10px;
    border-top: 1px solid #6B665E;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow a:hover::before {
    background: #FF4545
}
.arrow a:hover::after {
    border-top: 1px solid #FF4545
}



header.full .arrow a::before{
    bottom: 7px;
    right: 0;
}
header.full .arrow a::after{
    bottom: 2px;
    right: 2px;
}





 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
top contents
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#top_about {
    z-index: 1;
	width: 100%;
    position: relative;
    padding: 150px 50px;
    box-sizing: border-box;
}
#top_about .about_box {
	width: 470px;
    margin: 0 0 0 auto;
    background-color: rgba( 255, 255, 255, 0.8);
    padding: 95px 80px 230px;
    border-radius: 220px;
    box-sizing: border-box;
    position: relative;
}
#top_about .about_box .about_figma {
	margin-left: 25px;
}
#top_about .about_box h2 {
	margin: 40px 0;
}
#top_about .about_box p {
	line-height: 2.2em;
}


#top_about .about_box .about_tt {
	position: absolute;
    bottom: 120px;
    left: 80px;
    margin: auto;
    font-size: 24px;
    line-height: 0.8em;
}
#top_about .about_box .about_tt p {
    font-size: 12px;
}

#top_about .about_box .arrow a::before{
    bottom: 30px;
    left: -70px;
    width: 60px;
}
#top_about .about_box .arrow a::after{
    bottom: 25px;
    left: -22px;
}





#top_topics {
    z-index: 2;
    position: relative;
    background: #edebe6;
	padding: 200px 0 300px;
}
#top_topics h2 {
	font-size: 50px;
    margin-left: 100px;
    position: relative;
}
#top_topics .sub_tt {
	font-size: 16px;
    margin-left: 100px;
}

#top_topics .topics_list {
	margin-top: 100px;
}
#top_topics .topics_list li {
	position: relative;
    width: 230px;
}
#top_topics .topics_list li .category {
	position: absolute;
    top: 0;
    left: 250px;
    font-size: 12px;
    transform: rotate(90deg);
    transform-origin: top left;
}
#top_topics .topics_list li .txt {
    height: 45px;
	margin: 10px 0 20px;
}
#top_topics .topics_list li .time {
	font-size: 12px;
}

#top_topics .topics_vall {
	margin: 100px 0 0 100px;
    font-size: 24px;
    position: relative;
}
#top_topics .topics_vall p {
    font-size: 12px;
}
#top_topics .topics_vall.arrow a::before{
    top: 25px;
    left: -100px;
    width: 90px;
}
#top_topics .topics_vall.arrow a::after{
    top: 20px;
    left: -22px;
}




 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
footer
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


footer {
    width: 100%;
    position: relative;
}
footer .ft_inner {
    z-index: 2;
    display: flex;
    padding: 200px 100px 230px;
    background-color: #FFF;
    position: relative;
}
footer .pagetop {
    position: absolute;
    top: -37px;
    right: 50px;
}
footer .pagetop .ft_pagetop {
    fill: #6B665E;
}
footer .pagetop .ft_pagetop:hover {
    fill: #FF4545;
}


footer .ft_left {
    width: 450px;
    position: relative;
}
footer .ft_left .ft_pcnav {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
}
footer .ft_left .ft_pcnav li {
    margin-bottom: 15px;
}
footer .ft_left .ft_pcnav li a {
    display: flex;
    font-size: 18px;
}
footer .ft_left .ft_pcnav li p {
    font-size: 12px;
    margin: 17px 0 0 15px;
}



footer .ft_left .ft_pcnav li.arrow {
    position: relative;
    display: inline-block;
}
footer .ft_left .ft_pcnav li.arrow::before{
    position: absolute;
    content: "";
    margin: auto;
	bottom: 5px;
    left: -100px;
    width: 90px;
    height: 1px;
    background: #6B665E;
}
footer .ft_left .ft_pcnav li.arrow::after {
    position: absolute;
    content: "";
    margin: auto;
	bottom: 0;
    left: -22px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #6B665E;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

footer .ft_left .ft_pcnav .icon_insta,
footer .ft_left .ft_pcnav .icon_fb {
    fill: #6B665E;
}
footer .ft_left .ft_pcnav .icon_insta:hover,
footer .ft_left .ft_pcnav .icon_fb:hover {
    fill: #FF4545;
}


footer .ft_left .copyright {
    margin: 55px 0 20px;
}


footer .ft_right {
    white-space: nowrap;
}
footer .ft_right li {
    display: flex;
}
footer .ft_right li a {
    display: flex;
    font-size: 20px;
}
footer .ft_right li p {
    font-size: 12px;
    margin: 8px 0 0 10px;
}
footer .ft_right li.subnav {
    font-size: 12px;
    color: #a6a6a6;
}
footer .ft_right li.subnav a {
    font-size: 12px;
}
footer .ft_right .pro_nav {
    display: flex;
}
footer .ft_right .pro_nav li {
    display: block;
    font-size: 12px;
    color: #a6a6a6;
    margin-right: 35px;
}
footer .ft_right .pro_nav li a {
    font-size: 12px;
    color: #a6a6a6;
}
footer .ft_right li.mb25 {
    margin-bottom: 20px;
}
footer .ft_right .ft_topics ul {
    display: flex;
}
footer .ft_right .ft_topics ul li:nth-child(n + 2) {
    position: relative;
	padding-left: 35px;
}
footer .ft_right .ft_topics ul li:nth-child(n + 2):before {
	position: absolute;
	content: "／";
	top: 0;
	left: 12px;
	margin: auto;
}

footer .ft_right .ft_projects {
    display: flex;
	margin-top: 10px;
}
footer .ft_right .ft_projects li {
    margin-right: 50px;
}
footer .ft_right .ft_projects li a {
    font-size: 12px;
}
footer .ft_right .ft_projects ul.cate_service {
    display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: 100px;
}





 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
SP
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

@media only screen and (max-width: 800px) {
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	img.sp {
		display: inline-block !important;
	}
    
    
    
     /* navメニュー */
	
	nav.globalMenuSp {
		position: fixed;
		top: 0;
		right: -100vw;
		width: 250px;
		color: #FFF;
		transition: all 0.6s;
		background-color: rgba(0,0,0,0.7);
		height: 100%;
		min-height: 100vh;
        z-index: 9998;
	}
	/* このクラスを、jQueryで付与・削除する */
	nav.globalMenuSp.active {
		right: 0;
	}
	.navToggle {
		display: block;
		position: fixed;    /* bodyに対しての絶対位置指定 */
		right: 20px;
		top: 20px;
		width: 20px;
		height: 20px;
		cursor: pointer;
		z-index: 9999;
		text-align: center;
	}
    .navToggle img {
		width: 20px;
		height: 20px;
	}
	.navToggle.active p:nth-of-type(1),
	.navToggle p:nth-of-type(2) {
		display: none;
	}
	.navToggle.active p:nth-of-type(2) {
		display: block;
	}
    
    
    nav.globalMenuSp .nav_logo {
		padding: 25px 0 0 40px;
	}
    #globalmenu {
		margin: 60px 0 0 40px;
        color: #FFF;
	}
    #globalmenu li {
        font-size: 19px;
        margin-bottom: 22px;
        position: relative;
	}
    #globalmenu li::before {
        position: absolute;
        content: "";
        top: 18px;
        left: -40px;
        margin: auto;
        width: 26px;
        height: 1px;
        background: #FFF;
    }
    #globalmenu li::after {
        position: absolute;
        content: "";
        top: 13px;
        left: -26px;
        margin: auto;
        width: 10px;
        height: 10px;
        border-top: 1px solid #FFF;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #globalmenu li a {
        display: flex;
		color: #FFF;
	}
    #globalmenu li p {
		font-size: 12px;
        padding: 7px 0 0 10px;
	}
    .globalMenuSp .sub_menu {
		margin-left: 40px;
	}
    .globalMenuSp .sub_menu li {
		margin-bottom: 10px;
	}
    .globalMenuSp .sub_menu li a {
		display: flex;
		color: #FFF;
	}
    .globalMenuSp .sub_menu li p {
		padding: 20px 0 0 10px;
	}
	.globalMenuSp .sub_menu li.jpen {
		padding: 20px 0;
	}
    
    
    
    
    
     /* header */
    
    
     /* 211112修正 */
     header .language {
         top: 20px;
         right: auto;
         left: 20px;
     }
     header.full #top_main_wrapper,
     header.full #top_main {
         width: 186px;
         height: 98px;
     }
     header.full #top_main:before,
     header.full #top_main:after {
        height: 44px;
        border-width: 30px;
        width: calc(100% + 14px);
     }
     header.full #top_main:before {
        top: -37px;
        border-radius: 72px 72px 0 0;
     }
     header.full #top_main:after {
        bottom: -37px;
        border-radius: 0 0 72px 72px;
     }
    header.full #top_main img {
         width: 130px;
         height: auto;
     }
     header.full #top_main_inner {
        border-radius: 36px;
     }
     header.full .main_scroll {
	     position: absolute;
         top: auto;
         bottom: 180px;
     }


    
    
    
     /* top contents */
    
     #top_about {
         padding: 30px 20px 100px;
     }
     #top_about .about_box {
	     width: auto;
         margin: 0;
         padding: 95px 30px 230px;
     }
     #top_about .about_box .about_figma {
	     margin: 0;
         text-align: center;
     }
    #top_about .about_box .about_figma img {
         width: 163px;
     }
     #top_about .about_box p {
         letter-spacing: 0em;
     }
     #top_about .about_box .about_tt {
         left: 50px;
     }
     #top_about .about_box .arrow a::before{
         left: -50px;
         width: 40px;
     }





     #top_topics {
	     padding: 100px 0 150px;
     }
     #top_topics h2 {
	     font-size: 37px;
         margin-left: 20px;
     }
     #top_topics h2:after {
         background: url(../images/sp/topics_icon.png) no-repeat;
         background-size: 105px 57px;
         width: 105px;
         height: 57px;
         left: 180px;
     }
     #top_topics .sub_tt {
	     font-size: 12px;
         margin-left: 20px;
     }


     #top_topics .topics_list li.space {
         width: 0;
     }
    .slider .slick-slide.space {
        margin-right: 20px;
    }
    
    #top_topics .topics_list li {
        width: 180px;
    }
    #top_topics .topics_list li .category {
        left: 200px;
        font-size: 10px;
    }
    #top_topics .topics_list li .txt {
        height: 30px;
        font-size: 10px;
    }
    #top_topics .topics_list li .time {
	    font-size: 10px;
    }

    #top_topics .topics_vall {
        width: 100%;
	    margin: 50px 20px 0 180px;
        font-size: 20px;
    }
    #top_topics .topics_vall p {
        font-size: 10px;
    }
    #top_topics .topics_vall.arrowa a::before{
        top: 21px;
        left: -180px;
        width: 170px;
    }
    #top_topics .topics_vall.arrow a::after{
        top: 16px;
        left: -22px;
    }

    
    
    
    
     /* footer */

    footer .ft_inner {
        display: block;
        padding: 150px 0 100px;
    }
    footer .ft_inner h3 {
        text-align: center;
    }
    footer .ft_inner h3 img {
        width: 200px;
    }

    footer .ft_left {
        width: auto;
    }
    footer .ft_left .ft_spnav {
        margin: 55px 0 0 50px;
    }
    footer .ft_left .ft_spnav li {
        margin-bottom: 10px;
    }
    footer .ft_left .ft_spnav li a {
        display: flex;
        font-size: 18px;
    }
    footer .ft_left .ft_spnav li p {
        font-size: 10px;
        margin: 7px 0 0 10px;
    }
    footer .ft_left .ft_spnav li.arrow a {
        display: block;
    }
    footer .ft_left .ft_spnav li.arrow a::before {
        top: 18px;
        left: -50px;
        width: 35px;
    }
    footer .ft_left .ft_spnav li.arrow a::after {
        top: 13px;
        left: -26px;
    }
    
    
    footer .ft_left .ft_pcnav {
        position: static;
        margin: 50px 0 0 50px;
    }
    footer .ft_left .ft_pcnav ul {
        display: flex;
    }
    footer .ft_left .ft_pcnav li {
        margin-bottom: 15px;
        margin-right: 30px;
    }
    footer .ft_left .ft_pcnav li p {
        font-size: 10px;
        margin: 17px 0 0 10px;
    }
    

    
    
}