@charset "utf-8";
/* 共通設定 */
body {
	width: 100%;
	margin: 0 auto;
    color: #1b1464;
	/* ▼ 背景グラデーション ▼ */
	background:linear-gradient(45deg, #accbee,#e7f0fd,#f7e6eb,#e4edfd);/*グラデーションを定義*/
	background-size: 120% 1000%;/*サイズを大きくひきのばす*/
	animation: bggradient 20s ease infinite;
}
.area {
	overflow: hidden;
}
/* Loading背景画面設定 */
#splash {
	/*fixedで全面に固定*/
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background-color: #fff1ec;
    background-image: linear-gradient(180deg, #c1dcf0 0% 3%, #fefefc 107% 107%);
	text-align:center;
	color:#f694ae;
}
/* 背景グラデーション */
@keyframes bggradient{
	0% {
		background-position: 0% 100%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 100%;
	}
}
.container {
	max-width: 1366px;
    margin: 0 auto;
}
h2 {
    text-align: center;
    font-size: 56px;
    color: #e9839f;
	margin-top: 300px;
}
img {
    max-width: 100%;
}
.logo__img{
	display: block;
	margin: auto;
	width: 165px;
	text-align: center;
}

/* readmore viewmore ボタン */
.more__btn {
	position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	background: #e9839f;
	border: solid 1px #e9839f;
	color:#fff;
    padding: 20px 70px 20px 70px;
	border-radius:50px;
    text-align: center;
    outline: none;
	margin-top: 100px;
    /*アニメーションの指定*/
    transition: ease .2s;
}
.more__btn span{
	padding: 0 30px 0 0;
	font-size: 20px;
}
.more__btn:hover {
	background: #e9839ee4;
}
/* 矢印が右に移動して現在地に戻る */
.more__btn::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top:50%;
    right: 35px;
    /*矢印の形状*/
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}
.more__btn:hover::after {
	/*hoverした際のアニメーション*/
    animation: arrow .5s;
}
/* 矢印の横棒 */
.more__btn::before {
	position: absolute;
	content: "";
	width: 34px;
	height: 2px;
	background-color: #FFFFFF;
	top: 50%;
	right: 35px;
	transform: translateY(-50%);
}
@keyframes arrow {
    50% {
    right: 33px;
    }
    100% {
    right: 35px;
    }
}
/* サブページのh2タイトル */
.article__title {
	text-align: left;
    margin-left: 170px;
}
/* 下部の prev next totop */
.bottom__link {
	margin-top: 300px;
}
.bottom__link-prev {
	display: flex;
	align-items: center;
	margin: 0 auto;
}
.bottom__link-next {
	display: flex;
	align-items: center;
	margin: 0 auto;
}
.bottom__link-prev p {
	margin: 20px;
}
.bottom__link-next p {
	margin: 20px;
}
.bottom__link {
	display: flex;
}
.bottom__link-prev-start {
	display: flex;
	align-items: center;
	margin: 0 auto;
	color: #c7c7c7;
}
.bottom__link-prev-start p {
	margin: 20px;
}
.bottom__link-next-end {
	display: flex;
	align-items: center;
	margin: 0 auto;
	color: #c7c7c7;
}
.bottom__link-next-end p {
	margin: 20px;
}
.toTop {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 100px;
}

/* 背景ウェーブ */
.wave{
    position: relative;
    transform: rotate(15deg);
	margin: 0 auto;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.turnLeft{
	transform: rotate(-15deg);
}
.turnRight{
	transform: rotate(15deg);
}
.waveCanvas{
    position: absolute;
    bottom: 0;
    left: -30%;
    width: 200%;
}
.turnLeft.turnRight.waveCanvas.waveCanvas{
	top: 150px;
}
/* ヘッダー */
.header__nav ul {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: rgba(255, 255, 255, 0.888);
    padding: 0;
    margin: 0 auto;
	position: fixed;
	top: 0;
	width: 100%;
	font-size: 20px;
	z-index: 2;
}
.header__inner {
    position: absolute;
    width: 100%;
}
.header__nav-sp {
    display: none;
}
/* テキストが入れ替わる*/
.gnavi li a{
    /*テキストの基点とするためrelativeを指定*/
	position: relative;
    /*はみ出る要素を隠す*/
	overflow: hidden;
	padding: 0 60px;
}
.gnavi li span{
    /*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:0;
    /*アニメーションの指定*/
	transition: all .3s;
	transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/
    /*ブロック要素にして透過なし、テキスト折り返しなし*/  
	display: block;
	opacity:1;
	white-space: nowrap;
}
/*差し替わるテキストの設定*/
.gnavi li span:nth-child(2){
	opacity:0;/*透過0に*/
    transform: translate(-50%,100%);/*X方向に-50% Y方向に100%*/
}
/*hoverするとテキストが入れ替わる設定*/
.gnavi li:hover span:nth-child(1){
	opacity:0;/*透過0に*/
    transform: translate(-50%,-100%);/*X方向に-50% Y方向に-100%*/
}
.gnavi li:hover span:nth-child(2){
	opacity:1;/*不透明に*/
	transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
	color: #e9839f;
}



/* ファーストビュー */
.fv__text-left {
    position: relative;
	margin: 14% 0;
    font-size: 96px;
    opacity: 0.2;
	font-family: "ht-neon", sans-serif;
    font-weight: 400;
    font-style: normal;
	letter-spacing: 0;
	color: #1b1464;
}
.fv__text-right {
    position: relative;
    text-align: right;
    font-size: 96px;
    opacity: 0.2;
	font-family: "ht-neon", sans-serif;
    font-weight: 400;
    font-style: normal;
	letter-spacing: 0;
	color: #1b1464;
}
h1 {
    text-align: center;
	line-height: 60px;
	color: #e9839f;
}
.blur{
	animation-name:blurAnime;
	animation-duration:7s;
	animation-fill-mode:forwards;
}
@keyframes blurAnime{
    from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
    }

    to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
    }
}
.blurTrigger{
    opacity: 0;
}

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}


/* About */
#About {
    text-align: center;
	position: relative;
}
#About p {
	gap: 20px;
	letter-spacing: 0.3em;
}
.name {
	font-size: 32px;
}
.about__img {
    display: flex;
    justify-content: space-between;
}
.about__img-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	margin: 0;
	width: 25%;
	animation-name:blurAnime;  /* ▼ほわっとさせるアニメーション */
	animation-duration:4s;
	animation-fill-mode:forwards;
	position: absolute;
    top: 50%;
}
.about__img-left-top {
	position: absolute;
	bottom: 60%;
	opacity: 0;
}
.about__img-left-bottom {
	position: absolute;
	opacity: 0;
}
.about__img-left li {
	padding: 100px 0;
}
.about__img-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding: 0;
	position: absolute;
	top: 30%;
	right: 30px;
	width: 30%;
	/*animation-name:blurAnime;*/  /* ▼ほわっとさせるアニメーション */
	animation-duration:4s;
	animation-fill-mode:forwards;
	aspect-ratio: 667/550;  /* 比率保持 */
}
/* @keyframes blurAnime {
	from {
	filter: about__img-right (10px);
	filter: about__img-left (10px);
	transform: scale(1.02);
	}
	to {
	filter: about__img-right (0);
	filter: about__img-left (0);
	transform: scale(1);
	}
} */
.about__img-right-top {
	position: absolute;
	bottom: 80%;
	opacity: 0;
}
.about__img-right-bottom {
	margin-top: 180px;
	opacity: 0;
}
.about__img-right img{ /* 縦指定の自動トリミング */
	object-fit: cover;
}
.fadeUp {
	animation-name:fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity: 0;
	}
	@keyframes fadeUpAnime{
        from {
		opacity: 0;
		transform: translateY(100px);
        }
        to {
		opacity: 1;
		transform: translateY(0);
        }
	}
.about__textarea-main {
	margin: 0 auto;
	top: 10%;
	left: 30%;
	line-height: 30px;
}
.about__img-container {
	position: relative;
	width: 100%;   /* 幅100%に対して縦もwidthに合わせた100% */
	height: auto;
	overflow: hidden;  /* 要素からはみ出た部分を非表示 */
}
.about__img {
	position: absolute;
	width: 30%;
	height: 30%;
	background-size: cover;   /* 比率保持で自動で要素全体に背景画像 */
	background-repeat: no-repeat;  /* 余白の際の画像リピートなし */
}
/* sp版ではbackground-imageで表示(positionの設定だと画面幅に合わせてトリミング形式は不可) */
.about__img-left-top {
	top: 10%;
	left: 10%;
	background-image: url('/path/to/image1.png');
}
.about__img-left-bottom {
	bottom: 10%;
	left: 10%;
	background-image: url('/path/to/image2.png');
}
.about__img-right-top {
	top: -50%;
	right: 10%;
	background-image: url('/path/to/image3.png');
}
.about__img-right-bottom {
	bottom: 10%;
	right: 10%;
	background-image: url('/path/to/image4.png');
}
/* About---サブページ */
.about__profile {
	display: flex;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	margin-top: 100px;
}
.about__name-profile {
	font-size: 32px;
	text-align: left;
}
.about__img-profile {
	width: 40%;
	height: 40%;
}
.about__textarea-profile {
	display: block;
	margin: 0 0 0 40px;
	line-height: 30px;
}
/* Skills */
#Skills img {
	height: 50%;
}
.design-icon {
	width: 70%;
}
.skillscard {
	display: flex;
	justify-content: space-evenly;
}
#Skills li {
	text-align: center;
}
#Skills p {
	font-size: 18px;
	line-height: 30px;
}
.skillscard__title {
	font-size: 32px;
	font-weight: 500;
}
/* Works---メインページ */
#Works {
    text-align: center;
}
.works__list-main {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
}
.works__list-main img {
	width: 60%;
	margin: 0 auto;
	filter:drop-shadow(1px 1px 5px #0e0d4255);
}
.works__list-main-top {
	flex: 0 0 33%;
	margin-top: 80px;
}
.works__list-main-bottom {
	flex: 0 0 40%;
	padding-top: 5%;
}
/* Work---サブページ */
.works__list_sub-text {
	max-width: 700px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
.works__list_sub-title {
	width: 35%;
	margin: 10% 15% 5%;
	display: inline-block;
	border-bottom: solid 2px #fff;
	padding-bottom: 20px;
	text-align: center;
	font-size: 20px;
}
.works__list_sub-textdetail li {
	display: flex;
	justify-content: center;
}
.works__list_sub-textdetail p {
	width: 40%;
	display: inline-block;
	border-bottom: solid 2px #fff;
	padding: 0 25px 35px 25px;
	line-height: 30px;
}
.works__list_sub-texttitle {
	width: 30%;
	white-space: nowrap;
	display: inline-block;
	border-bottom: solid 2px #fff;
	font-weight: bolder;
}
.works__main_img-hb {
	width: 50%;
	margin: 15% auto 5%;
}
.works__main_img {
	width: 20%;
	margin: 15% auto 5%;
}
.works__comp {
	display: flex;
	justify-content: space-around;
	margin-top: 100px;
}
.works__comp-hb {
	width: 60%;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	margin-top: 100px;
}
.works__comp img {
	width: 50%;
}
.works__canmp-insta {
	display: flex;
	text-align: center;
	padding: 0;
	gap: 50px;
}
.works__canmp-instaonly {
	width: 70%;
	text-align: center;
}
.works__camp-x {
	display: flex;
	text-align: center;
	padding: 0;
	gap: 50px;
}
.works__main_salonimg {
	width: 60%;
	margin: 15% auto 5%;
	text-align: center;
}
.works__camp-salonsite {
	text-align: center;
}
.works__main_img-cafe {
	width: 60%;
	margin: 15% auto 5%;
}
.works__comp-cafe {
	display: flex;
	flex-direction: column;
}
.works__comp-cafepc {
	width: 60%;
	text-align: center;
	padding: 0;
	margin: 0 auto;
	margin-top: 100px;
	margin-bottom: 60px;
}
.works__comp-cafesp {
	width: 70%;
	display: flex;
	padding: 0;
	margin: 0 auto;
	gap: 50px;
}
/* contact */
#Contact {
    text-align: center;
}
#Contact p {
	line-height: 35px;
	margin-top: 80px;
}
#Contact span {
	font-size: 18px;
}
.contactmore__btn {
	text-decoration: none;
	display: inline-block;
	background: #e9839f;
	border: solid 1px #e9839f;
	color:#fff;
    padding: 20px 70px 20px 70px;
	border-radius:50px;
    text-align: center;
    outline: none;
	margin-top: 100px;
    /*線の基点とするためrelativeを指定*/
	position:relative;
}
/*線の設定*/
.contactmore__btn::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 15px;
    left: 10%;
    transform: translateY(-50%);
	transition: .5s all;
    /*線の形状*/
    width: 0;
    height: 1px;
    background: #fff;
}
.contactmore__btn:hover::after {
	width: 80%;
}

/* footer */
#footer {
    text-align: center;
	margin-top: 200px;
}

/* contact form */
.c-form {
	max-width: 600px;
	margin: 0 auto;
}
.c-form__item {
	display: flex;
	margin-bottom: 20px;
}
.c-form__label,
.c-form__input {
	padding: 10px;
}
.c-form__label {
	width: 90%;
}
.c-form__input {
	width: 90%;
	font-size: 16px;
	border: solid 1px #333;
	border-radius: 4px;
}
.c-form__input:focus-visible {
	outline:#e9839f auto 1px;
}
.c-form__required {
	color: #fff;
	background-color: #e9839f;
	border-radius: 4px;
	padding: 5px 5px;
	margin: 0 20px 0 0;
}
.c-form__any {
    color: #fff;
	background-color: #c7c7c7;
	border-radius: 4px;
	padding: 5px 5px;
	margin: 0 20px 0 0;
}
textarea.c-form__input {
	height: 160px;
}
.c-form__submit {
	margin-left: 50%;
}
.c-form__submit button {
	font-size: 18px;
	color: #fff;
	background-color: #e9839f;
	border: solid 1px #e9839f;
	border-radius: 50px;
	padding: 10px 32px;
	transition: 0.4s;
	cursor: pointer;
}
.c-form__submit button:hover {
	color: #e9839f;
	background-color: transparent;
}
/* サンクスページ */
#thanks__text {
	text-align: center;
	margin: 300px 0 170px 0;
	line-height: 30px;
}
.thanks__text-title {
	font-size: 50px;
	color: #e9839f;
}
/*========= 流れるテキスト ===============*/
/*共通*/
.slide-in {
	overflow: hidden;
    display: inline-block;
}
.slide-in_inner {
	display: inline-block;
}
/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}
.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:2s;
	animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX100 {
from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
}
to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
}
}
.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX-100 {
from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
}
to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
}
}


/* ------sp版------ */

/* メディアクエリを使って、画面幅が縮まるときに背景位置を調整 */
/* 1200px → 768px → 450px */
@media screen and (max-width: 1200px) {
	.about__img-left-top,
	.about__img-left-bottom,
	.about__img-right-top,
	.about__img-right-bottom {
		background-position: center;  /* 背景画像位置を真ん中 */
	}
}
@media screen and (max-width:768px) {
    .container {
        width: 100%;
        margin: 0 auto;
		text-align: center;
    }
	h1 {
		font-size: 20px;
	}
	h2 {
		margin-top: 200px;
	}
	.article__title {
		margin-left: 8%;
		padding: 10%;
		margin: 0;
	}
	.header__nav-sp {
        z-index: 9998;
    }
	.fv__text-left {
		margin: 0 0 80px 0;
		padding-top: 20%;
		font-size: 40px;
		text-align: left;
	}
	.fv__text-right {
		font-size: 40px;
	}
	#About .name {
		font-size: 20px;
		font-weight: normal;
	}
	#About p {
		line-height: 30px;
	}
	#About{
		background-image: url(../img/img/sp_about_1@2x.png);
		background-size: cover;  /* 比率保持で自動で要素全体に背景画像 */
		background-position: center;  /* 背景画像位置を真ん中 */
		background-repeat: no-repeat;  /* 画像リピートなし */
		padding: 200px 0;
	}
	.about__img-left-top {
		top: 10%;
		left: 10%;
		background-image: url('/path/to/image1.png');
	}
	.about__img-left-bottom {
		bottom: 10%;
		left: 10%;
		background-image: url('/path/to/image2.png');
	}
	.about__img-right-top {
		top: -50%;
		right: 10%;
		background-image: url('/path/to/image3.png');
	}
	.about__img-right-bottom {
		bottom: 10%;
		right: 10%;
		background-image: url('/path/to/image4.png');
	}

	#About h2{
		margin-top: 130px;
	}
	.about__img-left,
	.about__img-right{
		display: none;  /* pcの時のバラバラに置いていた画像の表示を消す */
	}
	.about__profile {
		display: block;
	}
	.about__name-profile {
		margin-top: 15%;
	}
	.about__img-profile {
		width: 60%;
		padding: 0 20%;
		text-align: center;
	}
	.about__textarea-profile {
		margin: 0 40px;
	}
	.more__btn
	.btn_readmore {
		margin-top: 30px;
	}
	.works__list-main {
		display: block;
	}
	.works__list-main p {
		font-size: 18px;
	}
	.works__list-main-bottom {
		margin-top: 80px;
	}
	.works__list_sub-title {
		width: 35%;
		margin: 10% 15% 0;
		padding-bottom: 20px;
	}
	.works__list_sub-textdetail {
		padding: 0;
	}
	.works__list_sub-textdetail li {
		flex-direction: column;
		align-items: center;
	}
	.works__list_sub-textdetail p {
		width: 60vw;
		padding-bottom: 10px;
		padding-left: 15px;
	}
	.works__main_img-hb {
		width: 85%;
		margin: 0 auto;
	}
	.works__main_img {
		width: 40%;
		margin: 0 auto;
	}
	.works__main_img-cafe {
		width: 80%;
	}
	.works__comp-hb {
		width: 85%;
	}
	.works__canmp-insta,
	.works__camp-x {
		gap: 20px;
	}
	.works__comp img {
		width: 85%;
	}
	.works__canmp-instaonly {
		padding: 0;
	}
	.works__camp-salonsite {
		padding: 0;
	}
	.works__main_salonimg {
		width: 80%;
	}
	.works__comp-cafepc {
		width: 85%;
	}
	.works__comp-cafesp {
		width: 85%;
		gap: 20px;
	}
	#Slills p {
		padding-bottom: 20px;
	}
	.skillscard {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		padding: 20px;
	}
	#Skills li {
		width: 50%;
	}
	#Skills img {
		margin-top: 50px;
	}
	.design-icon {
		width: 22%;
	}
	#Contact {
		padding: 0 16px;
	}
	.contactmore__btn {
		padding: 20px;
	}
	.c-form__item {
		flex-wrap: nowrap;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.c-form__label {
		width: 60%;
	}
	.c-form__input {
		width: 55%;
	}
	.c-form__submit {
		margin-left: 20%;
	}
	.bottom__link {
		margin-top: 130px;
	}
	#footer {
		margin-top: 100px;
	}
	/* ハンバーガーメニュー */
    .header__nav {
        display: none;        /* pc版のnavを消す */
    }
    /* ハンバーガーの枠組み */
    .hamburger {
        display: block;  
		position: fixed;     /* ハンバーガーメニューを表示する */
        width: 70px;          /* 3本線の枠 */
        height: 30px;         /* 3本線の枠 */
        right: 10px;          /* 左にいたものを右に移動 */
        top: 10px;
		right: 10px;
        cursor: pointer;
        z-index: 9999;        /* 要素の重なり順を調整 最前面にハンバーガーメニューを出す ※ position系が付いてる時にしか適用しない [最前面→9999][最背面→ -1] */
    }
    /* ハンバーガーの3本線 */
    .hamburger span {
        width: 30px;         /* widthとheightですごい細長い長方形を作って線に見立ててる状態 */
        height: 2px;
        background-color: #1b1464;
        position: absolute;     /* ハンバーガーの枠組みの上に浮かせる */
        top: 15px;              /* 枠組みが30pxなので真ん中に線をつけたいから半分の15px */
		right: 15px;
        transition: .3s;        /* 0.3秒かけてxの状態に動く */
    }
    /* 擬似要素 (::before,::after) HTMLではないけどCSSで擬似的に要素を作る。装飾系で使用。２個まで */
    .hamburger span::before {    /* 上の線  装飾が前に来るのは[before] */
        /* 45度回転させる */
        width: 30px;
        height: 2px;
        background-color: #1b1464;
        position: absolute;
        content: "";          /* 本来ない要素を擬似要素で作ってるからcontent:"";を入れて要素と認識させる before,afterが入る時はcontentはセット */
        top: -12px;           /* 真ん中の線から12px分上に上げる */
        transition: .3s;      /* 0.3秒かけてxの状態に動く */
    }
    .hamburger span::after {    /* 下の線 装飾が後ろに来るのは[after]*/
        width: 30px;
        height: 2px;
        background-color: #1b1464;
        position: absolute;
        content: "";
        bottom: -12px;              /* 真ん中の線から12px分下に下げる */
        transition: .3s;           /* 0.3秒かけてxの状態に動く */
    }
    /* ハンバーガーメニューが開いた時 */
    .open span {
        background-color: transparent;  /* JQueryのToggleclassでつけたopenに対してtransparentで透明にする。このspanは基本の真ん中の線 */
    }
    .open span::before {
        transform: rotate(45deg);    /* rotate→回転 deg→度数 45度、線を回転させる */
        top: 0;                       /* 3本線でつけた位置を0にする 交点を作る */
    }
    .open span::after {
        transform: rotate(-45deg);    /* -45度、線を回転させる */
        bottom: 0;                    /* 3本線でつけた位置を0にする 交点を作る */
    }
    .header__nav-sp {
        position: absolute;
		position: fixed;
        width: 100%;                  /* 白い覆いを幅いっぱいに表示 */
        height: 100vh;                /*「vew hight」どんな画面サイズであっても画面いっぱいに表示 */
        background-color: #ffffffe6;     /* 半透明入りの白のカラーコード */
    }
	.header__nav-sp li {
		font-size: 30px;
	}
    .header__nav-sp ul {
        height: 100%;                /* 画面いっぱいに表示*/
        display: flex;
        flex-direction: column;      /* 縦並び */
        align-items: center;         /* 真ん中配置 */
        justify-content: center;     /* 画面中央配置 */
        gap: 40px; 
		padding: 0;                  /* 文字間調整 */
    }
}

@media screen and (max-width: 450px) {
	#About{
		padding: 50px 0;
	}
	.design-icon {
		width: 40%;
	}
	.more__btn 
	.btn_readmore {
		margin-top: 20px;
	}
}