@charset "UTF-8";

/* ==============
common
============== */

html {
    font-size: 62.5%;
}

body {
    font-family: 
        'Robot',
        'Noto Sans JP',
        'BIZ UDPGothic',
        'Josefin Sans';
    font-style: normal;
    color: #0f0f0f;
    background-color: gainsboro;
    /* background-color: #0f0f0f; */
}

img {
    max-width: 100%;
    height: auto;
}

.topic__main {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 106px;
    text-shadow: -5px 2px 0px rgba(0, 0, 0, 0.07);
}

.section--about .topic__main {
    text-shadow: 20px 20px 0px rgba(0, 0, 0, 0.07);
}

.topic__span {
    color: #FFF8E0;
    font-family: "Noto Sans JP";
    font-size: 2.0rem;
    font-weight: 300;
}

.topic {
    color: #FFF8E0;
    font-family: Roboto;
    font-size: 11.7rem;
    font-weight: 100;
}

.sub__menu {
    display: flex;
    color: #FFF6E0;
    font-family: Roboto;
    font-size: 2.0rem;
    font-weight: 300;
    text-align: center;
    justify-content: center;
    text-shadow: none;
    margin-top: 20px;
}

.sub__menu .now {
    border-bottom: 1px solid #fE4FA3;
}

.vector {
    margin: 0 4px;
    margin-top: -2px;
}

.name .font {
    font-size: 6rem;
}

h1 .font {
    font-size: 11.7rem;
}

.section--contact .title .font {
    font-size: 6.3rem;
}

@media screen and (max-width:540px) {
    /* 540px以下に適用 */
    .sub__menu {
        display: flex;
        font-family: Roboto;
        font-size: 1.4rem;
        font-weight: 300;
        text-align: center;
        justify-content: center;
        text-shadow: none;
        margin-top: 20px;
    }

    .vector {
        margin: 0 1px;
        margin-top: -2px;
        width: 12px;
        height: 12px
    }
}

@media screen and (max-width:470px) {
    /* 470px以下に適用 */
    .topic__main {
        padding-top: 110px;
    }
    
    .topic__span {
        font-size: 1.6rem;
    }
    
    .topic {
        font-size: 8.0rem;
    }

    h1 .font {
        font-size: 8.0rem;
    }
}

/* ==============
header
============== */
header {
    height: 50px;
    background: #0f0f0f;
    position: absolute;
    z-index: 3;
    width: 100%;
}

.logo {
    position: relative;
    color: #FFF8E0;
    font-family: Roboto;
    font-size: 2.2rem;
    font-weight: 100;
    height: 50px;
    width: 200px;
    z-index: 4;
    left: 15px;
    padding-top: 12px;
}

.logoname {
    font-size: 1.8rem;
}

/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
	top: 0;
	width: 100%;
    height: 100%;
    background: #0f0f0f;
    opacity: 87%;
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
	opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li{
	text-align: center; 
	list-style: none;
}

#g-nav li a{
	color: #FFF8E0;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 300;
    font-family: Roboto;
    font-size: 2.1rem;
    font-style: normal;
}

#g-nav li a span {
    font-size: 1.0rem;
}


/*==================================================
　5-2-2 2本線が×に
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	position: relative;
	width: 50px;
    height:50px;
	cursor: pointer;
    z-index: 9999;
    position: fixed;
    right: 10px;
    top: 0;
}
	
/*ボタン内側*/

.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
	background-color: #FE4FA3;
  }


.openbtn span:nth-of-type(1) {
	top:22px;	
  	width: 50%;
}

.openbtn span:nth-of-type(2) {
	top:29px;
  	width:30%;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
    top: 20px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 35%;
}

.openbtn.active span:nth-of-type(2) {
    top: 32px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 35%;
}

/* =============
top
============= */
.section--top {
    height: 729px;
    background: #0f0f0f;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.section--top .inner {
    height: 653px;
    background: #1F2020;
    display: block;
    background-image: url(../img/Vector.png);
    background-repeat: no-repeat;
    background-position: bottom;
    margin: 0 auto;
}   

.object {
    width: 736px;
    height: 75vh;
    top: 25%;
    left: 50%;
    position: relative;
    z-index: 1;
    bottom: 0; /* 親要素の下端に配置 */
    transform: translateX(-50%); /* X方向の中央調整 */
}

@media screen and (max-width:450px) {
    .object {
        height: 80vh;
        top: 20%;
    } 
}

.section--contact .object {
    width: 736px;
    height: 653px;
    top: 0%;
}

.triangle {
    clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%);
    height: 100%;
    width: 113%;
    margin: 0;
    position: absolute;
    left: 50%;
    bottom: 0; /* 親要素の下端に配置 */
    transform: translateX(-50%); /* X方向の中央調整 */
    animation: a 8s ease infinite;
    display: flex;
    background: linear-gradient(0deg, #1c1a1b, #b4b4b4);
    background-size: 200% 200%;
  }

  .section--contact .triangle {
    width: 122%;
}

  @keyframes a {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

.lamp {
    width: 172px;
    position: absolute;
    /* top: 20vh; */
    left: 50%;
    transform: translate(-50%, -50%);
}  

.trapezoid {
    clip-path: polygon(23% 0%, 76% 0%, 100% 100%, 0% 100%);
    width: 172px;
    height: 66px;
    position: absolute;
    background-color: #858585;
    z-index: 1;
}

.circle_top {
    clip-path: ellipse(50% 25% at 50% 50%);
    width: 172px;
    height: 65px;
    position: absolute;
    background-color: #fff8e0;
    top: 35px;
    z-index: 2;
    animation: a 8s ease infinite;
    display: flex;
    background: linear-gradient(0deg, #a6aaac, #fff6e0);
    background: linear-gradient(0deg, #a6aaac, #fcedc8);
    background-size: 200% 200%;
}


.section--top .title{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF8E0;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Roboto;
    font-size: 9.5rem;
    font-weight: 100;
    line-height: normal;
    text-align: center;
    padding-top: 194px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
}

.section--top span {
    font-size: 6.0rem;
}

@media screen and (max-width:470px) {
    /* 470px以下に適用 */
    .section--top .title{
        font-size: 6.5rem;
    }
    
    .section--top span {
        font-size: 4.0rem;
    }
}

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:76px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    z-index: 1;
    /*丸の形状*/
	width:13px;
	height:13px;
	border-radius: 50%;
	background:#FE4FA3;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 7.6s ease-in-out infinite,
		cirlemovehide1 7.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:550px;}
     100%{bottom:-4500px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:5px;
	height: 650px;
	background:#b5b6b6;
}

/* =============
works
============= */
.section--works {
    height: auto;
    background: #1F2020;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}

.section--works .inner {
    height: auto;
    background: #1F2020;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background-image: url();
}  

.slant-bg {
    width: 100%;
    margin: 0;
    height: auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(251deg, #D1D1D1 18.24%, #1F2020 130.69%);
    /* グラデーション */
    background-size: 200% 200%;
    animation: Grad 5s ease infinite;
    align-items: center;
    justify-content: center;
}

@keyframes Grad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.slant-bg::before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    border-right: 47vw solid transparent;
    border-left: 0vw solid transparent;
    border-top: 272px solid #1F2020;
}

@media screen and (max-width:777px) {
    /* 777px以下に適用 */
    .slant-bg::before {
        border-top: 151px solid #1F2020;
    }
}

.aaa {
    z-index: 3;
    position: relative;
    overflow: hidden;
}

.works__list {
    margin: 0 auto;
    margin-top: 86px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    max-width: 935px;
    flex-wrap: wrap;
}

.works__box a {
    display: flex;
    width: 362px;
    height: 476px;
    padding: 37px 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border-radius: 6.6px;
    border: 1.6px solid #FFF8E0;
    background: #605e59;
    background-blend-mode: multiply;
    display: flex;
    flex-direction: column;
    gap: 29px;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.3s ;
}

.works__box a:hover {
    background: #e2dfd2;
}

.works__img {
    background: whitesmoke;
    box-shadow: 0px 7.876px 7.876px 0px rgba(0, 0, 0, 0.25);
    height: 220px;
    width: 330px;
    border-radius: 1.9px;
}

.works__img img {
    object-fit: cover;
    width: 330px;
    height: 220px;
    border-radius: 1.9px;
    object-position: top;
}

.works__box__3 .works__img img{
    object-fit: contain;
    width: 265px;
    height: 220px;
    border-radius: 1.9px;
    object-position: top;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
    display: flex;
    padding: 10px;
}

.works__about {
    display: flex;
    width: 330px;
    height: 146px;
    padding: 19px 27px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 17px;
    border-radius: 4.1px;
    background: #FFF;
}

.works__about .title {
    color: #272829;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 500;
}

.works__about .text {
    color: #272829;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
}

.tool {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.more {
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    background: #fe4fa3;
    padding: 4px 5px 5px 5px;
    border-radius: 2px;
}

.tool__img {
    display: flex;
    gap: 6px;
}

.tool__size {
    width: 22px;
    height: 22px;
}

.fuller-button {
	color: rgba(255,255,255,1);
	transition: box-shadow 0.3s, color 0.3s;
	margin: 1em;
    display: block;
    padding: 16px 2px;
    border-radius: 4px;
    border: 2px solid #FE4FA3;
    color: #FFF8E0;
    text-align: center;
    font-family: Roboto;
    font-size: 1.6rem;
    font-weight: 300;
    margin: 0 auto;
    margin-top: 150px;
    margin-bottom: 230px;
    /* transition: 1s; */
    position: relative;
    width: 230px;
	
	&.red {
		box-shadow: inset 0 0 1em rgba(251, 81, 177, 0.4), 0 0 1em rgba(251, 81, 177, 0.6);
		border: #FE4FA3 solid 2px;
	}
	
	&.red:hover {
		background-color: #FE4FA3;
		box-shadow: inset 0 0 0 rgba(251, 81, 177, 0.4), 0 0 1.5em rgba(251, 81, 177, 0.6);
	}
	
	&.white {
		box-shadow: inset 0 0 0.8em rgba(255,255,255,0.3), 0 0 0.8em rgba(255,255,255,0.3);
		border: #fff solid 2px6
	}
	
	&.white:hover {
		color: rgba(0,0,0,0.8);
		background-color: #fff;
		box-shadow: inset 0 0 0 rgba(255,255,255,0.3), 0 0 1.2em rgba(255,255,255,0.5);
	}
}


@media screen and (max-width:1190px) {
    /* 1190px以下に適用 */
    .works__list {
       flex-direction: column;
    }
    .fuller-button {
        margin-top: 90px;
    }
}

@media screen and (max-width:470px) {
    /* 470px以下に適用 */
    .works__list {
        margin-top: 86px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        max-width: auto;
    }
    
    .works__box a {
        display: flex;
        width: 335px;
        height: 441px;
        padding: 34px 14px;
        gap: 26px;
        border-radius: 6.1px;
        border: 1.5px solid #FFF8E0;
    }

    .works__img {
        border-radius: 1.8px;
        width: 306px;
    }

    .works__about {
        width: 305px;
        padding: 17px 24px;
        gap: 15px;
        border-radius: 3.8px;
    }
    
    .works__about .title {
        font-size: 1.4rem;
    }
    
    .works__about .text {
        font-size: 1.2rem;
    }
    
    .more {
        font-size: 1.2rem;
        padding: 3px 4px;
        border-radius: 1.5px;
    }
    
    .tool__img {
        gap: 5px;
    }
    
    .tool__size {
        width: 20px;
        height: 20px;
    }
    
}



/* =========================================
footer
============================================ */
footer {
    position: relative;
    z-index: 1;
}
/* =========================================
contact
============================================ */
.section--contact {
    height: 834px;
    background: #0f0f0f;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    overflow: hidden;
}
/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown3{
    /*描画位置※位置は適宜調整してください*/
    position:absolute;
	/* bottom:10px; */
	left:50%;
}

/* 線の描写 */
.scrolldown3:after{
	content:"";
    /*描画位置*/
	position: absolute;
	left:0;
    /*線の形状*/
	width:4px;
	height: 97px;
	background:#858585;
    z-index: 2;
}

.section--contact .inner {
    height: 653px;
    background: #1F2020;
    display: block;
    margin: 0 auto;
    position: relative;
    /* background-image: url(../img/contact.png); */
    background-repeat: no-repeat;
    background-position: bottom;
    top: 97px;
} 

.section--contact p {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Roboto;
    font-weight: 100;
    text-align: center;
}

.section--contact .title {
    color: #FFF6E0;
    padding-top: 282px;
    font-size: 6.3rem;
    position: relative;
}
.section--contact .fuller-button {
    margin-top: 30px;
    background-color: #FE4FA3;
    animation: bgchange 7.6s ease infinite;
    &.red {
		box-shadow: inset 0 0 1em rgba(251, 81, 251, 0.4), 0 0 1em rgba(251,81,81,0.4);
		border: #FE4FA3 solid 2px;
	}
	
	&.red:hover {
		background-color: #FE4FA3;
		box-shadow: inset 0 0 0 rgba(251, 81, 242, 0.4), 0 0 1.5em rgba(251,81,81,0.6);
	}
	
	&.white {
		box-shadow: inset 0 0 0.8em rgba(255,255,255,0.3), 0 0 0.8em rgba(255,255,255,0.3);
		border: #fff solid 2px;
	}
	
	&.white:hover {
		color: rgba(0,0,0,0.8);
		background-color: #fff;
		box-shadow: inset 0 0 0 rgba(255,255,255,0.3), 0 0 1.2em rgba(255,255,255,0.5);
	}
}

@keyframes bgchange{
    90%  {background:transparent;}/*変化させたい色*/
    10%  {background:#FE4FA3;}/*変化させたい色*/
}

.menu {
    display: flex;
    bottom: 0px;
    position: relative;
    justify-content: center;
    font-size: 2.0rem;
    margin-top: 26px;
    gap: 9px;
    color: #FFF6E0;
    font-family: Roboto;
    font-weight: 100;
    text-align: center;
    margin-left: 22px;
}

.menu__works {
    width: 89px;
    border-right: 1px solid #FE4FA3;
    border-left: 1px solid #FE4FA3  
}

.copy {
    margin-top: 10px;
    font-family: Roboto;
    color: #FFF6E0;
    font-size: 1.4rem;
}