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

:root{
	--main-c: #D10400;
	--base-c: #FFF7E4;
	--sab-c: #F8EED5;
	--side-c: #2b2b2b;
}

/*タブ切り替え全体のスタイル*/
html{
	font-size: 62.5%;/*16px×62.5%=10px*/
	height: 100%;
	box-sizing: border-box;
}


body{
	letter-spacing: 0.1em;
	line-height: 1.6;
	color: #2b2b2b;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	min-height: 0;
	overflow-x: hidden;
	background: var(--base-c);
	background-image: url("https://www.transparenttextures.com/patterns/exclusive-paper.png");
}
a{
	display: block;
	color: #2b2b2b;
	transition: all .2s;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	-o-transition: all .2s;
}
li{
	list-style: none;
}
img{
	max-width: 100%;
	height: auto;
}
hr{
	margin: 0;
}
span{
	display: inline-block;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- br area -▼▼▼▼-▼▼▼--▼▼---▼---- */

.br-sp{
	display: none;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- font area -▼▼▼▼-▼▼▼--▼▼---▼---- */

.fontA{
	font-family: "Afacad", sans-serif;
}
.fontB{
	font-family: 'Shippori Mincho', serif;
}

.writ-t{
	writing-mode: vertical-rl;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- mouse-stalker -▼▼▼▼-▼▼▼--▼▼---▼---- */

#mouse-stalker{
	pointer-events: none;
	position: fixed;
	top: -10px;
	left: -10px;
	width: 30px;
	height: 30px;
	border: solid 2px white;
	border-radius: 50%;
	transform: translate(0, 0);
	transition: transform 0.2s;
	transition-timing-function: ease-out;
	z-index: 999;
}
#mouse-stalker.is_active{
	top: -40px;
	left: -40px;
	width: 120px;
	height: 120px;
	transition: 0.2s;
	background: none;
}
#mouse-stalker.is_active::after{
	content: "more";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- loading animation -▼▼▼▼-▼▼▼--▼▼---▼---- */


#loading{
	display: flex;
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background: var(--main-c);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	justify-content: center;
	align-items: center;
}
.spinner{
	width: fit-content;
	height: fit-content;
	margin: 0 auto;
	animation: sk-scaleout 2.0s infinite ease-in-out;
}
/* Hide Loading Block */
.loaded{
	opacity: 0;
	visibility: hidden;
}

/* Loading Animation */
@keyframes sk-scaleout{
	0%{
		transform: scale(1.0);
	}
	100%{
		transform: scale(1.2);
		opacity: 0;
	}
}


/* ----▼---▼▼--▼▼▼-▼▼▼▼- flex area -▼▼▼▼-▼▼▼--▼▼---▼---- */

.flex{
	display: flex;
}
.flex-between{
	justify-content: space-between;
}
.flex-column{
	flex-direction: column;
}
.flex-horizon{
	align-items: center;
}
.flex-wrap{
	flex-wrap: wrap;
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,80%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	z-index: 100;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
	overflow-x: hidden;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 420px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content img{
	border-radius: 10px;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- header area -▼▼▼▼-▼▼▼--▼▼---▼---- */

header{
	position: relative;
	box-sizing: border-box;
    border-right: solid 2px var(--main-c);
}
header nav{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    padding: 30px 16px;
    box-sizing: border-box;
    background: var(--base-c);
    background-image: url("https://www.transparenttextures.com/patterns/exclusive-paper.png"),linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
	color: var(--main-c);
    z-index: 100;
    border-right: solid 2px var(--main-c);
    align-items: center;
	justify-content: space-between;
    width: 140px;
	overflow: hidden;
    transition: width 0.6s ease;
}
/* .hamburger{
	position: relative;
	width: 40px;
	height: 40px;
	cursor: pointer;
	text-align: center;
}
.hamburger span{
	position: absolute;
	left: 50%;
	width: 36px;
	height: 1px;
	transform: translate(-50%,-50%);
	background : black;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	transition: 0.5s all;
}
.hamburger span:first-of-type{
	top: calc(50% - 10px);
}
.hamburger span:last-of-type{
	top: calc(50% - 4px);
}
.hamburger.active span{
	background: #2b2b2b;
	background-image: url(https://www.transparenttextures.com/patterns/dark-denim-3.png);
}
.hamburger.active span:first-of-type{
	top : calc(50% - 8px);
	left: 50%;
	width: 30px;
	-webkit-transform: translate(-50%,-50%) rotate(-20deg);
	-moz-transform: translate(-50%,-50%) rotate(-20deg);
	transform: translate(-50%,-50%) rotate(-20deg);
}
.hamburger.active span:last-of-type{
	top : calc(50% - 8px);
	left: 50%;
	width: 30px;
	-webkit-transform: translate(-50%,-50%) rotate(20deg);
	-moz-transform: translate(-50%,-50%) rotate(20deg);
	transform: translate(-50%,-50%) rotate(20deg);
}
.hamburger.animate{
	display: block;
}
.hamburger p{
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	font-size: 1.2rem;
	color: black;
	line-height: 1;
}
.hamburger.active::before{
	display: none;
} */
header .logo{
	width: 100%;
}
header .thema{
	writing-mode: vertical-lr;
	font-size: 2.4rem;
	font-weight: bold;
	letter-spacing: 0.4em;
}
header .btn-sns{
	gap: 3px;
}
header .btn-sns a{
	color: var(--main-c);
	font-size: 1.8rem;
	gap: 0 0.3em;
}
header nav .cta{
	writing-mode: vertical-lr;
	color: var(--main-c);
	font-weight: bold;
	font-size: 1.8rem;
	padding: 30px 16px;
	line-height: 1;
	border: solid 2px var(--main-c);
	border-radius: 90px;
	box-sizing: border-box;
	transition: all ease 0.4s;
	background-color: initial;
}
header nav .cta:hover{
	background-color: var(--main-c);
	color: var(--base-c);
}
header .copy{
	width: calc(100vw - 140px);
	height: 90px;
	margin-left: 140px;
	box-sizing: border-box;
	border-bottom: solid 2px var(--main-c);
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0), linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
	overflow: hidden;
	font-size: min(3vw,4rem);
	letter-spacing: 0.4em;
	color: var(--main-c);
	padding: 30px;
	justify-content: flex-end;
	gap: 10px;
}
header .copy img{
	width: 40px;
}
header .catch{
	position: relative;
	width: calc(100vw - 140px);
	height: calc(100vh - 90px);
	margin-left: 140px;
	box-sizing: border-box;
	overflow: hidden;
	background-color: var(--main-c);
}
header .catch svg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	width: 30vw;
}
header .catch svg path{
	stroke-dasharray: 1500;
	stroke-dashoffset: 2400;
	animation: draw 3s ease-out forwards;
}
@keyframes draw{
	to{
		stroke-dashoffset: 0;
	}
}
header .deco1,
header .deco2{
	position: absolute;
	width: 12vw;
	height: 12vw;
}
header .deco1{
	top: 1vw;
	left: 1vw;
}
header .deco1 li,
header .deco2 li{
	position: absolute;
	width: 6vw;
	height: 6vw;
	display: flex;
	padding: 1.2vw;
	box-sizing: border-box;
}
header .deco1 li:first-child{
	top: 0;
	left: 0;
}
header .deco1 li:last-child{
	bottom: 0;
	right: 0;
}
header .deco2{
	bottom: 1vw;
	right: 1vw;
}
header .deco2 li:first-child{
	top: 0;
	right: 0;
}
header .deco2 li:last-child{
	padding: 0;
	width: 10vw;
	height: auto;
	bottom: 2vw;
	left: 0;
}
.grid-area{
	position: absolute;
	top: -6vw;
	right: -6vw;
}
.grid{
	display: grid;
	grid-template-columns: repeat(6, 7vw);
	grid-template-rows: repeat(5, 7vw);
	position: relative;
}
.cell{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	padding: 1.2vw;
	z-index: 0;
}
.cell::after{
	content: '';
	position: absolute;
	top: -3vw;
	left: -3vw;
	width: 6vw;
	height: 6vw;
	background: url(../image/glow.png) center/cover;
	z-index: -1;
}
.cell.no-grow::after{
	display: none;
}
.anime-object1{
	animation: fuwafuwa 1s ease-in-out infinite alternate;
}
@keyframes fuwafuwa {
	from{
		transform: translateY(0) scale(1)
	}
	to{
		transform: translateY(10px) scale(.9);
	}
}
.anime-object2{
	animation: bounce 2s linear infinite;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-10px);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
  40% {
    transform: translateY(0);
  }
}
.anime-object3{
	animation: heartbeat 3s infinite ease-in-out;
}
@keyframes heartbeat {
	0% {
	transform: scale(1);
	}
	4% {
	transform: scale(1.1);
	}
	7% {
	transform: scale(1);
	}
	11% {
	transform: scale(1.07);
	}
	18% {
	transform: scale(1);
	}
}
.anime-object4{
	animation:5s linear infinite rotation3;
}
@keyframes rotation3{
	0%{ transform:rotateY(0);}
	20%{ transform:rotateY(360deg); }
	50%{ transform:rotateY(0); }
	100%{ transform:rotateY(0); }
}
.anime-object5{
	position: absolute;
	left: -2vw;
	bottom: -2vw;
	width: 4vw;
	animation:6s linear infinite rotation1;
}
@keyframes rotation1{
	0%{ transform:rotate(0);}
	20%{ transform:rotate(180deg); }
	40%{ transform:rotate(360deg);}
	60%{ transform:rotate(0);}
}
.anime-object6{
  animation: korokoro 2.5s linear infinite;
}
@keyframes korokoro {
	0%{ transform: translate(0%, 0%); }
	5%{ transform: translate(10%, 0%) rotate(10deg); }
	25%{ transform: translate(20%, 0%) rotate(20deg); }
	30%{ transform: translate(-10%, 0%) rotate(-10deg); }
	35%{ transform: translate(-15%, 0%) rotate(-15deg); }
	45%{ transform: translate(10%, 0%) rotate(10deg); }
	50%{ transform: translate(15%, 0%) rotate(15deg); }
	60%{ transform: translate(-5%, 0%) rotate(-5deg); }
	65%{ transform: translate(-7%, 0%) rotate(-7deg); }
	75%{ transform: translate(0%, 0%) rotate(0deg); }
	100%{ transform: translate(0%, 0%) rotate(0deg); }
}
.anime-object7{
	transform: rotate(30deg);
	animation: anim_s 3s ease infinite;
}
@keyframes anim_s {
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}
.anime-object8{
  animation:3s linear infinite rotation2;
}
@keyframes rotation2{
	0%{ transform:rotateX(0);}
	40%{ transform:rotateX(360deg); }
	60%{ transform:rotateX(0);}
	80%{ transform:rotateX(0);}
}
header .title{
	position: absolute;
	bottom: 40px;
	left: 40px;
	width: 40vw;
	color: var(--base-c);
}
header .title p{
	font-size: 2vw;
	font-weight: bold;
}
/* header .scroll{
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-size: 1.4rem;
}
header .scroll::before,
header .scroll::after{
	content: '';
	position: absolute;
}
header .scroll::before{
	bottom: 30px;
	left: 50%;
	transform: translate(-50%);
	width: 1px;
	height: 60px;
	background: white;
}
header .scroll::after{
	bottom: 30px;
	left: 50%;
	transform: translate(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
	animation: circlemove 1.6s ease-in-out infinite,cirlemovehide 1.6s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
	0%{bottom: 90px;}
	100%{bottom: 30px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
	0%{opacity:0}
	50%{opacity:1;}
	80%{opacity:0.9;}
	100%{opacity:0;}
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove2{
	0%{bottom: 85px;}
	100%{bottom: 25px;}
}
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide2{
	0%{opacity:0}
	50%{opacity:1;}
	80%{opacity:0.9;}
	100%{opacity:0;}
} */

/* g-menu（初期状態は隠れている） */
.g-menu{
	flex: 1;
    overflow: hidden;
	display: none;
    transition: transform 0.6s ease;
}

/* メニューが開いた状態 */
.g-menu.active{
    display: block;
}
.g-menu .nav_area{
	height: 100%;
	gap: 60px;
	padding: 60px;
	box-sizing: border-box;
	overflow-y: scroll;
	align-items: flex-start;
	border-right: dotted 2px #aaa;
}
.g-menu .top-btn{
	font-size: 2.4rem;
	font-weight: bold;
}
.g-menu .top-btn span{
	font-size: 1.2rem;
	color: #aaa;
}






*,
*::before,
*::after { box-sizing: border-box; }

body.modal-open {
	overflow: hidden;
} /* 背景スクロール固定 */


/* モーダル全体（非表示時） */
.modal[aria-hidden="true"] {
	display: none;
}

/* 表示時の基盤 */
.modal[aria-hidden="false"] {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
}

/* オーバーレイ */
.modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
}

/* ダイアログ */
.modal__dialog {
	position: relative;
	width: min(92vw, 600px);
	max-height: 85vh;
	overflow: auto;
	background: var(--base-c);
	border: solid 2px var(--main-c);
	padding: 3rem 3rem 4.5rem;
	box-shadow: 0 10px 35px rgba(0,0,0,0.25);
	transform: translateY(10px);
	opacity: 0;
	transition: transform 180ms ease, opacity 180ms ease;
}

/* 表示アニメ（:whereで特異性を上げずに適用） */
.modal[aria-hidden="false"] .modal__dialog {
	transform: translateY(0);
	opacity: 1;
}

/* 閉じるボタン */
.modal__close {
	position: absolute;
	top: 8px; right: 8px;
	border: none;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
}

.modal__title {
	margin: 0 2rem 0.25rem 0;
	font-size: 1.25rem;
}

.modal__desc {
	margin: 0 0 1rem 0;
	color: #666;
	font-size: .95rem;
}

.modal__form .field {
	display: grid;
	gap: 6px;
	margin: 0 0 12px 0;
}

.modal__form input,
.modal__form textarea {
	width: 100%;
	border: 1px solid var(--main-c);
	border-radius: 2px;
	padding: .6rem .75rem;
	font: inherit;
	background-color: initial;
}

.modal__form input:focus,
.modal__form textarea:focus {
	outline: 2px solid #2684ff;
	border-color: #2684ff;
}

.btn-primary{
	margin: 0 auto;
	background-color: var(--base-c);
	padding: 10px 40px;
	border: solid 1px var(--main-c);
	display: block;
}













/* ----▼---▼▼--▼▼▼-▼▼▼▼- top page -▼▼▼▼-▼▼▼--▼▼---▼---- */

#top{
	margin-left: 140px;
	border-right: solid 2px var(--main-c);
	box-sizing: border-box;
}
#top .about{
	padding: 160px 0;
	gap: 100px;
}
#top .about-title{
	width: 300px;
	display: block;
	margin: 0 auto;
}
#top .about h2{
	width: 100%;
	font-size: 24rem;
	line-height: 1;
	background-color: var(--main-c);
	color: var(--base-c);
	text-align: center;
	padding: 0 40px;
	box-sizing: border-box;
	background-image: linear-gradient(135deg, var(--base-c) 10px, transparent 0),linear-gradient(-45deg, var(--base-c) 10px, transparent 0);
}
#top .about .content{
	gap: 80px;
	text-align: center;
	line-height: 3;
}
#top .about .content>img{
	width: 600px;
}
#top .about .content p{
	font-size: 2.1rem;
	font-weight: bold;
}
#top .about .content p span{
	font-size: 3.2rem;
	font-weight: bold;
	color: var(--main-c);
}
#top .about .content ul{
	gap: 40px
}
#top .about .content li{
	width: 300px;
}
#top .about .content li:nth-child(2){
	width: 150px;
}
#top .service{
	position: relative;
	color: var(--main-c);
	text-align: center;
	padding: 14vw 0 200px;
	overflow: hidden;
	background-image: linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
}
#top .service svg{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 101%;
	height: auto;
	margin-bottom: 90px;
	margin-left: -0.3em;
}
#top .service h2{
	position: relative;
	writing-mode: vertical-lr;
	font-size: 10rem;
	letter-spacing: 0.8em;
	text-indent: 0.8em;
	margin: -0.8em auto -0.7em;
}
#top .service h2::before{
	content: '-しえん-';
	position: absolute;
	top: 50%;
	right: -0.6rem;
	transform: translateY(-50%);
	font-size: 1.2rem;
	letter-spacing: 2em;
	text-indent: 2em;
}
#top .service .title p{
	font-size: 1.8rem;
}
#top .service ul{
	width: 100%;
	max-width: 1620px;
	padding: 0 60px;
	margin: 0 auto 120px;
	gap: 0 100px;
	box-sizing: border-box;
}
#top .service li{
	position: relative;
	width: calc(33.333% - 67px);
	height: 100%;
	aspect-ratio: 595 / 400;
	gap: 30px;
	justify-content: flex-end;
	padding-bottom: 40px;
	box-sizing: border-box;
	margin-bottom: -110px;
}
#top .service li:first-child,
#top .service li:nth-child(6){
	margin-left: 17.8%;
}
#top .service li:nth-child(6),
#top .service li:last-child{
	gap: 24px;
}
#top .service li img{
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}
#top .service dl{
	width: 280px;
	gap: 20px;
}
#top .service li:nth-child(6) dl,
#top .service li:last-child dl{
	gap: 10px;
}
#top .archives .list>div{
	display: none;
}
#top .service dt{
	font-size: 2.1rem;
	font-weight: bold;
}
#top .service dd{
	font-weight: bold;
	color: var(--side-c);
	letter-spacing: 0;
}
#top .service li p{
	font-size: 1.8rem;
	line-height: 1;
	font-weight: bold;
}
#top .service .catch{
	color: var(--side-c);
	font-size: 2.1rem;
	gap: 30px;
}
#top .service .catch img{
	width: 120px;
}
#top .service .catch p{
	font-weight: bold;
}
#top .service .catch p span{
	font-size: 3.2rem;
	font-weight: bold;
	color: var(--main-c);
}
#top .service>img{
	position: absolute;
	width: 30vw;
	z-index: -1;
}
#top .service .deco1{
	top: 6vw;
	right: 1vw;
}
#top .service .deco2{
	bottom: 1vw;
	left: 1vw;
}
#top .short-v h2{
	color: transparent;
	font-weight: 900;
	font-size: 10vw;
	position: relative;
	-webkit-text-stroke: 2px var(--main-c);
	text-align: center;
	border-top: solid 2px var(--main-c);
	border-bottom: solid 2px var(--main-c);
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
	line-height: 1;
}
#top .short-v h2::before{
	content: attr(data-text);
	-webkit-text-stroke: 0;
	position: absolute;
	inset: 0 auto auto 0;
}
#top .short-v .content{
	position: relative;
	width: calc(100% - 40px);
	height: 640px;
	margin: 20px;
	padding: 120px 20px;
	box-sizing: border-box;
	background: var(--sab-c);
    background-image: url(https://www.transparenttextures.com/patterns/exclusive-paper.png), linear-gradient(135deg, var(--base-c) 10px, transparent 0),linear-gradient(-135deg, var(--base-c) 10px, transparent 0),linear-gradient(45deg, var(--base-c) 10px, transparent 0),linear-gradient(-45deg, var(--base-c) 10px, transparent 0);
	gap: 100px;
	justify-content: center;
	writing-mode: vertical-rl;
}
#top .short-v h3{
	position: relative;
	font-size: 3rem;
	font-weight: bold;
	color: var(--main-c);
	height: fit-content;
}
#top .short-v h3::before,
#top .short-v h3::after{
	content: '';
	position: absolute;
	width: 60px;
	height: auto;
	left: 50%;
	transform: translateX(-50%);
	aspect-ratio: 3/1;
}
#top .short-v h3::before{
	top: -30px;
	background: url(../image/short-title-parts1.png) center/cover;
}
#top .short-v h3::after{
	bottom: -30px;
	background: url(../image/short-title-parts2.png) center/cover;
}
#top .short-v ul{
	gap: 20px;
}
#top .short-v li{
	background-color: var(--main-c);
	color: var(--base-c);
	padding: 10px;
	font-size: 2.1rem;
	line-height: 1;
	height: fit-content;
}
#top .short-v .content div{
	gap: 60px;
	font-size: 1.6rem;
	line-height: 2;
}
#top .short-v p{
	font-weight: bold;
}
#top .short-v .content img{
	position: absolute;
}
#top .short-v .deco1{
	width: 150px;
	top: -10px;
	right: -10px;
}
#top .short-v .deco2{
	width: 300px;
	bottom: -10px;
	left: -10px;
}
#top .archives{
	border-top: solid 2px var(--main-c);
	border-bottom: solid 2px var(--main-c);
	color: var(--main-c);
}
#top .archives .title{
	border-right: solid 2px var(--main-c);
	aspect-ratio: 2 / 3;
	width: 25%;
}
#top .archives .title>div{
	height: auto;
	flex: 1;
}
#top .archives h2{
    writing-mode: vertical-lr;
    font-size: 2.4vw;
	line-height: 1;
	padding: 2vw 1.4vw;
	box-sizing: border-box;
	font-weight: bold;
	background-color: var(--main-c);
	color: var(--base-c);
}
#top .archives .copy{
	position: relative;
	overflow: hidden;
	flex: 1;
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
}
#top .archives .copy p{
	position: absolute;
	top: -1vw;
	right: -1vw;
    height: 120%;
    writing-mode: vertical-lr;
	line-height: 1;
	font-size: 13vw;
    letter-spacing: 0.2em;
}
#top .archives .copy img{
	position: absolute;
	bottom: -1vw;
	left: -1vw;
	z-index: -1;
	width: 10vw;
	mix-blend-mode: multiply;
}
#top .archives .title a{
	border-top: solid 2px var(--main-c);
	height: 4.6vw;
	justify-content: space-between;
	padding: 1vw;
	box-sizing: border-box;
	color: var(--main-c);
	font-size: 1.2vw;
	transition: all ease .4s;
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
}
#top .archives .title a:hover{
	background-color: var(--main-c);
	color: var(--base-c);
}
#top .archives .title a p{
	font-weight: bold;
}
#top .archives .title ion-icon{
	font-size: 2vw;
}
#top .archives .list{
	flex: 1;
}
#top .archives .list .copy{
	display: none;
}
#top .archives .list a{
	position: relative;
	flex: 1;
	border-right: solid 2px var(--main-c);
	padding: 1vw;
	box-sizing: border-box;
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
}
#top .archives .list a:last-child{
	border: none;
}
#top .archives .list a::before{
	content: '';
	position: absolute;
	bottom: 1vw;
	right: 1vw;
	width: 3vw;
	height: 3vw;
	background: url(../image/icon-circle_a.svg) center/cover;
}
#top .archives .list span{
	position: relative;
	aspect-ratio: 4/5;
	background-color: var(--side-c);
	margin-bottom: 1vw;
}
#top .archives .list span::before,
#top .archives .list span::after{
	content: '';
	position: absolute;
}
#top .archives .list span::before{
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 50%;
	aspect-ratio: 1/1;
	object-fit: contain;
	background: url(../image/icon-video.svg) center/cover;
	z-index: 1;
}
#top .archives .list span::after{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0.6;
	transition: all ease .4s;
}
#top .archives .list a:hover span::after{
	opacity: 0;
}
#top .archives .list span img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#top .archives h3{
	color: var(--main-c);
	font-size: 1.0vw;
	font-weight: bold;
	margin-bottom: 0.6vw;
}
#top .archives ul{
	font-size: 0.6vw;
}
#top .blog{
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	border-left: solid 2px  var(--main-c);
	border-right: solid 2px  var(--main-c);
	color: var(--main-c);
	box-sizing: border-box;
}
#top .blog .title{
	width: 33.333%;
	border-right: solid 2px var(--main-c);
	box-sizing: border-box;
}
#top .blog .title dl{
	position: relative;
	 writing-mode: vertical-rl;
	 flex: 1;
	 padding: 80px;
	 box-sizing: border-box;
	 justify-content: center;
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
}
#top .blog .title dl::before,
#top .blog .title dl::after{
	content: '';
	position: absolute;
	width: 200px;
	aspect-ratio: 12/5;
	background: url(../image/icon4.png) center/cover;
	mix-blend-mode: multiply;
	z-index: -1;
}
#top .blog .title dl::before{
	top: 60px;
	right: -60px;
}
#top .blog .title dl::after{
	bottom: 60px;
	left: -60px;
}
#top .blog .title dt{
	font-size: 4.2rem;
	font-weight: bold;
}
#top .blog .title dd{
	font-size: 10rem;
	letter-spacing: 0.1em;
}
#top .blog .title a{
	justify-content: space-between;
	height: 90px;
	border-top: 2px solid var(--main-c);
	padding: 16px;
	box-sizing: border-box;
	color: var(--main-c);
	transition: all ease 0.4s;
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
}
#top .blog .title a:hover{
	background: var(--main-c);
	color: var(--base-c);
}
#top .blog .title a p{
	font-size: 2.1rem;
	font-weight: bold;
}
#top .blog .title a ion-icon{
	font-size: 3.2rem;
}
#top .blog .content{
	flex: 1;
}
#top .blog .content a{
	border-bottom: solid 2px var(--main-c);
	padding: 20px;
	box-sizing: border-box;
	gap: 60px;
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
}
#top .blog .content a:last-child{
	border: none;
}
#top .blog .content img{
	width: 33.333%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
#top .blog .content div{
	justify-content: center;
	gap: 20px;
	flex: 1;
}
#top .blog h3{
	color: var(--main-c);
	font-size: 1.8rem;
	font-weight: bold;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- footer page -▼▼▼▼-▼▼▼--▼▼---▼---- */

footer{
	position: relative;
	color: var(--sab-c);
	margin-left: 140px;
	border-top: solid 2px var(--main-c);
	border-right: solid 2px var(--main-c);
	box-sizing: border-box;
}
footer .contact{
	margin: 20px;
	padding: 100px 30px;
	background: var(--sab-c);
	background-image: url(https://www.transparenttextures.com/patterns/exclusive-paper.png), linear-gradient(135deg, var(--base-c) 10px, transparent 0),linear-gradient(-135deg, var(--base-c) 10px, transparent 0),linear-gradient(45deg, var(--base-c) 10px, transparent 0),linear-gradient(-45deg, var(--base-c) 10px, transparent 0);
	color: var(--main-c);
	text-align: center;
	align-items: center;
	gap: 40px;
}
footer .contact img{
	width: 120px;
	filter: drop-shadow(255,255,255,0.2);
}
footer .contact dl{
	gap: 20px;
}
footer .contact h2{
	font-size: 3.2rem;
}
footer .contact a{
	width: fit-content;
	border: solid 2px var(--main-c);
	color: var(--main-c);
	border-radius: 100px;
	margin: 0 auto;
	padding: 20px 100px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1;
	left: 0.3em;
	transition: all ease .4s;
}
footer .contact a:hover{
	background: var(--main-c);
	color: var(--base-c);
}
footer .info{
	border-top: solid 2px var(--base-c);
	background-color: var(--main-c);
	color: var(--base-c);
}
footer .info span{
	padding: 40px;
	box-sizing: border-box;
	width: 300px;
	border-right: solid 1px var(--base-c);
	background-image: linear-gradient(135deg, var(--base-c) 10px, transparent 0), linear-gradient(-45deg, var(--base-c) 10px, transparent 0);
}
footer .info .company{
	border-right: solid 1px var(--base-c);
}
footer .info h3{
	font-size: 2.4rem;
	padding: 30px;
	box-sizing: border-box;
	border-bottom: solid 1px var(--base-c);
	background-image: linear-gradient(135deg, var(--base-c) 10px, transparent 0), linear-gradient(-45deg, var(--base-c) 10px, transparent 0);
}
footer .info ol{
	flex: 1;
	justify-content: center;
	padding: 4px 30px;
	box-sizing: border-box;
	background-image: linear-gradient(135deg, var(--base-c) 10px, transparent 0), linear-gradient(-45deg, var(--base-c) 10px, transparent 0);
}
footer .info .link{
	align-items: flex-end;
	flex: 1;
	padding: 40px;
	box-sizing: border-box;
	justify-content: space-between;
	background-image: linear-gradient(135deg, var(--base-c) 10px, transparent 0), linear-gradient(-45deg, var(--base-c) 10px, transparent 0);
}
footer .btn-sns{
	gap: 14px;
	font-size: 2.1rem;
}
footer .btn-sns a{
	color: var(--base-c);
}
footer .btn-p{
	gap: 10px;
	align-items: flex-end;
}
footer .btn-p a{
	color: var(--base-c);
	font-size: 1.8rem;
}
footer small{
	display: block;
	font-size: 1.0rem;
	text-align: center;
}

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

	header nav{
		width: 120px;
	}
	header .copy,
	header .catch{
		margin-left: 120px;
		width: calc(100vw - 120px);
	}
	#top{
		margin-left: 120px;
	}
	#top .service li{
		margin-bottom: -6.6vw;
		padding-bottom: 3.1vw;
		gap: 1vw;
	}
	#top .service li:nth-child(6),
	#top .service li:last-child{
		gap: 0.6vw;
	}
	#top .service dl{
		width: 16vw;
		gap: 1vw;
	}
	#top .service li:nth-child(6) dl,
	#top .service li:last-child dl{
		gap: 0.5vw;
	}
	#top .service dt{
		font-size: 1.16vw;
	}
	#top .service dd{
		font-size: 0.76vw;
	}
	#top .blog{
		max-width: none;
		border: none;
	}
	footer{
		margin-left: 120px;
	}

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

	header nav{
		width: 100px;
		padding: 30px 12px;
	}
	header .thema{
		font-size: 2rem;
	}
	header .btn-sns a{
		font-size: 1.6rem;
	}
	header .copy,
	header .catch{
        margin-left: 100px;
        width: calc(100vw - 100px);
    }
	header .copy{
		font-size: 2.4vw;
		height: 70px;
	}
	header .catch {
		height: calc(100vh - 70px);
	}
	#top{
		margin-left: 100px;
	}
	#top .about{
		padding: 120px 0;
		gap: 80px;
	}
	#top .about-title{
		width: 280px;
	}
	#top .about h2{
		font-size: 20rem;
	}
	#top .about .content{
		gap: 60px;
	}
	#top .about .content>img{
		width: 520px;
	}
	#top .about .content p{
		font-size: 1.8rem;
	}
	#top .about .content li{
		width: 260px;
	}
	#top .about .content li:nth-child(2){
		width: 50px;
	}
	#top .about .content p span{
		font-size: 2.8rem;
	}
	#top .service{
		padding: 23vw 0 90px;
	}
	#top .service svg{
		width: 120%;
	}
	#top .service h2{
		font-size: 8rem;
	}
	#top .service h2::before{
		font-size: 1.1rem;
	}
	#top .service .title p{
		font-size: 1.6rem;
	}
	#top .service ul{
		padding: 60px;
	}
	#top .service li{
		width: calc(50% - 50px);
        margin-bottom: -10.8vw;
		padding-bottom: 3.6vw;
		gap: 3vw;
	}
	#top .service li:first-child,
	#top .service li:nth-child(4),
	#top .service li:last-child{
		margin-left: 27.2%;
	}
	#top .service li:nth-child(6){
		margin: 0;
        gap: 2vw;
	}
	#top .service li:last-child{
        gap: 2vw;
    }
	#top .service li:last-child{
		margin-top: -10.8vw;
	}
	#top .service dl{
		width: 24vw;
		gap: 1.8vw;
	}
	#top .service li:nth-child(6) dl,
	#top .service li:last-child dl{
        gap: 1.2vw;
    }
	#top .service dt{
        font-size: 1.76vw;
    }
	#top .service dd{
        font-size: 1.1vw;
    }
	#top .service>img{
		width: 37.2vw;
	}
	#top .service .deco1{
		top: 14vw;
	}
	#top .service .deco2{
    	bottom: 10vw;
	}
	footer{
        margin-left: 100px;
    }

}


@media screen and (max-width:1240px){
	header .title{
		bottom: 3vw;
		left: 3vw;
		width: 45vw;
	}
	header .title p {
		font-size: 2.4vw;
	}
	header .catch svg{
		width: 36vw;
	}
	.grid-area {
		top: -7vw;
		right: -7vw;
	}
	.grid {
		grid-template-columns: repeat(6, 8vw);
		grid-template-rows: repeat(5, 8vw);
	}
	header .deco1, header .deco2{
		width: 14vw;
		height: 14vw;
	}
	header .deco1 li,
	header .deco2 li{
		width: 7vw;
		height: 7vw;
	}
	header .deco2 li:last-child{
		width: 12vw;
		left: -3vw;
	}
	#top .service svg {
        width: 140%;
    }
	#top .service li{
		padding-bottom: 3.4vw;
		gap: 2vw;
	}
	#top .service li:first-child,
	#top .service li:nth-child(4),
	#top .service li:last-child{
        margin-left: 28%;
    }
	#top .service li:nth-child(6),
	#top .service li:last-child{
        gap: 1.4vw;
    }
	#top .service dl{
		width: 22vw;
		gap: 1.6vw;
	}
	#top .service li:nth-child(6) dl,
	#top .service li:last-child dl{
        gap: 0.46vw;
    }
	#top .service .catch{
		font-size: 1.8rem;
	}
	#top .service .catch p span {
		font-size: 2.8rem;
	}
	#top .short-v .content{
		gap: 60px;
		height: 560px;
	}
	#top .short-v h3{
		font-size: 2.4rem;
	}
	#top .short-v li{
		font-size: 1.8rem;
	}
	#top .short-v .content div{
		font-size: 1.4rem;
	}
	#top .short-v .deco1{
		width: 100px;
	}
	#top .short-v .deco2{
		width: 200px;
	}
	#top .archives{
		flex-wrap: wrap;
	}
	#top .archives .title{
		width: 100%;
		aspect-ratio: initial;
		flex-direction: row;
		border: none;
		border-bottom: solid 2px var(--main-c);
	}
	#top .archives h2{
		writing-mode: initial;
		font-size: 16.5vw;
		line-height: 1.2;
		padding: 1.6vw 2.6vw;
	}
	#top .archives .copy{
		aspect-ratio: 2 / 3;
	}
	#top .archives .copy p{
		font-size: 9vw;
	}
	#top .archives .copy img{
		width: 6vw;
	}
	#top .archives .title a{
		height: 100%;
		border: none;
		border-left: solid 2px var(--main-c);
		flex-direction: column;
		font-size: 1.6vw;
	}
	#top .archives .title a p{
		writing-mode: vertical-rl;
	}
	#top .archives h3{
		font-size: 1.4vw;
	}
	#top .archives ul{
		font-size: 0.9vw;
	}
	#top .archives .list a{
		padding: 1.4vw;
	}
	#top .archives .list span{
		margin-bottom: 1.4vw;
	}
	#top .blog .title dl{
		padding: 4vw;
	}
	#top .blog .title dt{
		font-size: 3vw;
	}
	#top .blog .title dd {
		font-size: 8vw;
	}
	#top .blog .title dl::before,
	#top .blog .title dl::after{
		width: 14vw;
	}
	#top .blog .title dl::before{
		top: 3vw;
		right: -3vw;
	}
	#top .blog .title dl::after{
		bottom: 3vw;
		left: -3vw;
	}
	#top .blog .title a{
		height: 6vw;
	}
	#top .blog .title a p{
		font-size: 1.6vw;
	}
	#top .blog .title a ion-icon{
		font-size: 3vw;
	}
	#top .blog .content a{
		gap: 2vw;
		padding: 1.4vw;
	}
	#top .blog .content div{
		gap: 0.6vw;
	}
	#top .blog h3{
		font-size: 1.6vw;
	}
	#top .blog .content span{
		font-size: 1vw;
	}
	#top .blog .content p{
		font-size: 1.2vw;
	}

	footer .contact{
		padding: 10vw 20px;
		gap: 30px;
	}
	footer .contact img{
		width: 100px;
	}
	footer .contact h2{
		font-size: 2.8rem;
	}
	footer .contact dl{
		gap: 14px;
	}
	footer .contact a{
		padding: 16px 80px;
		font-size: 2.1rem;
	}
	footer .info span{
		width: 240px;
		padding: 30px;
	}
	footer .info h3{
		font-size: 1.8rem;
		padding: 20px;
	}
	footer .info ol{
		padding: 2px 20px;
		font-size: 1.2rem;
	}
	footer .info .link{
		padding: 30px;
	}
	footer .btn-sns{
		font-size: 1.6rem;
	}
	footer .btn-p a{
		font-size: 1.4rem;
	}
	footer small {
		font-size: 0.9rem;
	}	
}

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

	header nav{
		width: 90px;
		padding: 30px 10px;
		background-image: url(https://www.transparenttextures.com/patterns/exclusive-paper.png), linear-gradient(135deg, var(--main-c) 0.9vw, transparent 0), linear-gradient(-45deg, var(--main-c) 0.9vw, transparent 0);
	}
	header .copy, header .catch{
        margin-left: 90px;
        width: calc(100vw - 90px);
    }
	header .copy{
		padding: 10px;
		background-image: linear-gradient(135deg, var(--main-c) 0.9vw, transparent 0), linear-gradient(-45deg, var(--main-c) 0.9vw, transparent 0);
		font-size: 2.8vw;
	}
	header .copy img{
		width: 30px;
	}
	header .catch svg{
        width: 40vw;
    }
	.grid-area{
        top: -10vw;
        right: -10vw;
    }
	.grid{
        grid-template-columns: repeat(6, 11vw);
        grid-template-rows: repeat(5, 11vw);
    }
	.cell{
		padding: 1.8vw;
	}
	.anime-object5{
		width: 7vw;
		left: -3vw;
		bottom: -3vw;
	}
	header .deco1,
	header .deco2{
        width: 18vw;
        height: 18vw;
    }
	header .deco2{
		bottom: 13vw;
		right: 1vw;
	}
	header .deco1 li,
	header .deco2 li {
        width: 9vw;
        height: 9vw;
    }
	header .title{
        bottom: 2vw;
        left: 2vw;
        width: 60vw;
    }
	header .title p {
        font-size: 3.6vw;
    }
	footer{
        margin-left: 90px;
    }
	footer .info span,
	footer .info h3,
	footer .info ol,
	footer .info .link{
		background-image: linear-gradient(135deg, var(--base-c) 0.9vw, transparent 0), linear-gradient(-45deg, var(--base-c) 0.9vw, transparent 0);
	}
	footer .info{
		flex-direction: column;
	}
	footer .info span{
		width: 100%;
		border: none;
		border-bottom: solid 1px var(--base-c);
	}
	footer .info span img{
		display: block;
		width: 120px;
		margin: 0 auto;
	}
	footer .info .company{
		flex-direction: row;
		border-bottom: solid 1px var(--base-c);
	}
	footer .info h3{
        font-size: 2.1rem;
		border: none;
		border-right: 1px solid var(--base-c);
    }
	footer .info ol{
		padding: 30px;
	}

	#top{
		margin-left: 90px;
	}
	#top .about h2{
        font-size: 13rem;
		background-image: linear-gradient(135deg, var(--base-c) 0.9vw, transparent 0), linear-gradient(-45deg, var(--base-c) 0.9vw, transparent 0);
    }
	#top .about .content>img{
        width: 420px;
    }
	#top .about .content p {
        font-size: 1.6rem;
	}
	#top .about .content ul{
		gap: 30px;
	}
	#top .about .content li{
        width: 240px;
    }
	#top .service{
		background-image: linear-gradient(-45deg, var(--main-c) 0.9vw, transparent 0);
	}
	#top .service svg{
        width: 160%;
    }
	#top .service h2{
        font-size: 7rem;
	}
	#top .service h2::before {
		font-size: 1.2rem;
		letter-spacing: 1.9em;
		text-indent: 1.9em;
		height: 100%;
	}
	#top .service ul{
        padding: 30px;
    }
	#top .service .catch img{
		width: 90px;
	}
	#top .service .catch p{
		font-size: 1.6rem;
	}
	#top .service .catch p span{
        font-size: 2.4rem;
    }
	#top .short-v h2{
		background-image: linear-gradient(135deg, var(--main-c) 0.9vw, transparent 0), linear-gradient(-45deg, var(--main-c) 0.9vw, transparent 0);
		line-height: 1.6;
	}
	#top .short-v h3{
		width: fit-content;
	}
	#top .short-v h3::before,
	#top .short-v h3::after{
		top: 50%;
		left: auto;
    	transform: translateY(-50%) rotate(-90deg);
		height: 20px;
	}
	#top .short-v h3::before{
		left: -40px;
	}
	#top .short-v h3::after{
		right: -40px;
	}
	#top .short-v h3{
        font-size: 2.8rem;
    }
	#top .short-v .content{
		writing-mode: initial;
		height: auto;
		padding: 60px 40px;
		gap: 40px;
	}
	#top .short-v ul{
		gap: 10px;
	}
	#top .short-v li{
		width: fit-content;
	}
	#top .short-v .content div{
		flex-direction: row;
		gap: 40px;
		font-size: 1.2rem;
	}
	#top .short-v .content p{
		flex: 1;
	}
	#top .archives h2{
        font-size: 15vw;
        line-height: 1.4;
    }
	#top .archives .copy,
	#top .archives .list a,
	#top .blog .title dl,
	#top .blog .title a,
	#top .blog .content a{
		background-image: linear-gradient(135deg, var(--main-c) 0.9vw, transparent 0), linear-gradient(-45deg, var(--main-c) 0.9vw, transparent 0);
	}
	#top .archives .title h2{
		line-height: 1;
		width: 100%;
		text-align: center;
	}
	#top .archives .title a{
		display: none;
	}
	#top .archives .title .copy{
		display: none;
	}
	#top .archives .list{
		flex-wrap: wrap;
	}
	#top .archives .list>div{
		display: block;
		width: 50%;
		border-bottom: solid 1px var(--main-c);
		border-right: solid 1px var(--main-c);
		box-sizing: border-box;
	}
	#top .archives .list .item:first-of-type{
		border: none;
		border-bottom: solid 1px var(--main-c);
    }
	#top .archives .copy p{
		font-size: 21vw;
	}
	#top .archives .copy img{
		width: 18vw;
		left: 0;
	}
	#top .archives .list .item{
		width: 50%;
		flex: auto;
        padding: 2vw;
    }
	#top .archives .list .copy{
		display: block;
		aspect-ratio: auto;
		height: calc(100% - 70px);
		border-bottom: solid 1px var(--main-c);
	}
	#top .archives .list>div>a{
		height: 70px;
		justify-content: space-between;
		font-size: 2.1rem;
		color: var(--main-c);
	}
	#top .archives .list>div>a::before{
		display: none;
	}
	#top .archives .list>div>a p{
		font-weight: bold;
	}
	#top .archives h3{
        font-size: 2.1vw;
    }
	#top .archives ul{
        font-size: 1.2vw;
    }
	#top .blog .title dd{
		line-height: 1;
	}
	#top .blog .content span{
        font-size: 1.2vw;
    }
	#top .blog .content img{
		width: 40%;
	}
	#top .blog h3{
        font-size: 2vw;
    }
	#top .blog .content p {
        font-size: 1.6vw;
    }
	

}

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

	header{
		display: flex;
		flex-direction: column-reverse;
	}
	header nav{
		width: 100%;
		height: 90px;
		flex-direction: row!important;
		border: none;
		border-bottom: solid 1px var(--main-c);
		padding: 10px;
	}
	header .logo{
		width: 90px;
	}
	header .thema{
		writing-mode: initial;
	}
	header .btn-sns{
		flex-direction: row;
	}
	header .copy{
		width: 100%;
		margin: 0;
		height: 90px;
	}
	header .catch{
		width: 100%;
		height: calc(100dvh - 180px);
		margin-top: 90px;
		margin-left: 0;
	}
	footer{
		margin-left: 0;
	}
	#top{
		margin: 0;
	}
	#top .about .content ul{
		flex-direction: column;
	}
	#top .service li{
		width: calc(70% - 50px);
		margin-bottom: -16.6vw;
		padding-bottom: 6vw;
		gap: 3.6vw;
	}
	#top .service li:first-child,
	#top .service li:last-child{
		margin-left: 0;
	}
	#top .service li:nth-child(even){
		margin-left: calc(30% + 50px);
	}
	#top .service li:last-child{
		margin-top: -16.6vw;
	}
	#top .service li:nth-child(6),
	#top .service li:last-child{
        gap: 3vw;
    }
	#top .service dl{
        width: 34vw;
        gap: 2.6vw;
    }
	#top .service li:nth-child(6) dl,
	#top .service li:last-child dl{
        gap: 1.5vw;
    }
	#top .service dt{
        font-size: 2.8vw;
    }
	#top .service dd{
        font-size: 1.6vw;
    }
	#top .service .deco1{
        top: 32vw;
    }
	#top .service>img{
        width: 47vw;
    }
	#top .short-v h2{
		font-size: 12vw;
	}
	#top .archives h3{
        font-size: 2.4vw;
    }
	#top .archives ul {
        font-size: 1.4vw;
    }

}
@media screen and (max-width:599px){
	header{
		border-right: none;
	}
	header nav{
		height: 70px;
	}
	header .logo{
        width: 60px;
    }
	header .thema{
        display: none;
    }
	header .catch{
		margin-top: 70px;
		height: calc(100vh - 140px);
	}
	header .copy{
		height: 70px;
		font-size: 3.2vw;
	}
	header .copy img{
        width: 20px;
    }
	header .title{
        bottom: 4vw;
        left: 4vw;
        width: 90vw;
    }
	
	.grid-area {
        top: -13vw;
        right: -13vw;
    }
	.grid{
        grid-template-columns: repeat(6, 14vw);
        grid-template-rows: repeat(5, 14vw);
    }
	header .catch svg{
        width: 50vw;
    }
	header .deco1,
	header .deco2{
        width: 24vw;
        height: 24vw;
	}
	header .deco1 {
		top: 3vw;
		left: 3vw;
	}
	header .deco2{
        bottom: 30vw;
        right: 1vw;
    }
	header .deco1 li,
	header .deco2 li{
        width: 12vw;
        height: 11vw;
    }
	footer{
		border-right: none;
	}
	footer .contact {
        padding: 80px 20px;
        gap: 30px;
    }
	footer .contact img {
        width: 70px;
	}
	footer .contact dl {
        gap: 14px;
        font-size: 1.2rem;
    }
	footer .info span,
	footer .info h3,
	footer .info ol,
	footer .info .link {
        background-image: none;
		border: none;
    }
	footer .info .company{
		flex-direction: column;
		border: none;
	}
	footer .info .link,
	footer .btn-p{
		align-items: flex-start;
	}
	#top{
		border-right: none;
	}
	#top .about{
        padding: 100px 0;
        gap: 60px;
    }
	#top .about-title{
        width: 180px;
    }
	#top .about h2{
		padding: 0 10px;
		font-size: 20vw;
	}
	#top .about .content{
		padding: 0 16px;
	}
	#top .about .content p{
        font-size: 1.4rem;
    }
	#top .about .content p span {
        font-size: 2.4rem;
	}
	#top .service {
        padding: 40vw 0 90px;
    }
	#top .service svg {
        width: 240%;
    }
	#top .service h2 {
        font-size: 5.4rem;
    }
	#top .service ul{
		padding: 50px 0 120px;
		width: calc(100% + 80px);
		margin: 0 -40px;
	}
	#top .service li{
		width: 65%;
		margin-bottom: -21vw;
		padding-bottom: 9vw;
	}
	#top .service li:nth-child(even) {
        margin-left: 35%;
    }
	#top .service li:last-child {
        margin-top: -21vw;
    }
	#top .service dl{
        width: 50vw;
        gap: 2.6vw;
    }
	#top .service dt{
        font-size: 4.2vw;
    }
	#top .service dd{
        font-size: 2.425vw;
    }
	#top .short-v h3 {
        font-size: 2.1rem;
		margin: 0 auto;
    }
	#top .short-v h3::before,
	#top .short-v h3::after{
		width: 36px;
	}
	#top .short-v h3::before{
        left: -32px;
    }
	#top .short-v h3::after{
        right: -32px;
    }
	#top .short-v .deco1 {
        width: 70px;
    }
	#top .short-v .deco2 {
        width: 140px;
    }
	#top .short-v .content{
		padding: 80px 20px;
	}
	#top .short-v .content div{
		flex-direction: column;
	}
	
	#top .archives .title{
		display: block;
	}
	#top .archives .title .copy{
		display: block;
		aspect-ratio: 1/1;
	}
	#top .archives .title h2{
        writing-mode: vertical-lr;
        width: auto;
		font-size: 6.4rem;
	}
	#top .archives .title a{
		display: flex;
		flex-direction: row;
		height: 60px;
		font-size: 1.6rem;
		padding: 10px 20px;
		background: none;
		border: none;
		border-top: 2px solid var(--main-c);
	}
	#top .archives .title a p {
        writing-mode: initial;
    }
	#top .archives .title ion-icon {
		font-size: 2.4rem;
	}
	#top .archives .list .copy{
		aspect-ratio: 1/1;
	}
	#top .archives .copy p {
        font-size: 34.6vw;
    }
	#top .archives .copy img{
        width: 30vw;
    }
	#top .archives .list>div{
		display: none;
	}
	#top .archives .list a{
		border: none;
		border-bottom: solid 2px var(--main-c);
	}
	#top .archives .list .item{
		width: 100%;
		padding: 20px;
	}
	#top .archives .list span{
		margin-bottom: 14px;
	}
	#top .archives .list a::before {
		content: '';
		position: absolute;
		bottom: 20px;
		right: 20px;
		width: 9vw;
		height: 9vw;
	}
	#top .archives h3{
        font-size: 1.6rem;
		margin-bottom: 6px;
    }
	#top .archives ul{
		font-size: 1rem;
	}
	#top .blog{
		flex-direction: column;
	}
	#top .blog .title{
		width: 100%;
		border: none;
		border-bottom: solid 2px var(--main-c);
		overflow: hidden;
	}
	#top .blog .title dl{
		writing-mode: initial;
		flex-direction: column-reverse;
		padding: 40px 20px;
	}
	#top .blog .title dt {
        font-size: 2.1rem;
		margin-left: 6px;
    }
	#top .blog .title dd {
        font-size: 5rem;
    }
	#top .blog .title dl::before{
		width: 50vw;
		top: 50%;
		transform: translateY(-50%);
	}
	#top .blog .title dl::after{
		display: none;
	}
	#top .blog .title a{
        height: 60px;
        padding: 10px 20px;
        background: none;
        border: none;
        border-top: 2px solid var(--main-c);
    }
	#top .blog .title a p {
        font-size: 1.6rem;
    }
	#top .blog .title a ion-icon{
        font-size: 2.4rem;
	}
	#top .blog .content a{
		padding: 20px;
		gap: 14px;
	}
	#top .blog .content img{
        width: 100px;
		aspect-ratio: 1/1;
    }
	#top .blog .content div{
		gap: 10px;
	}
	#top .blog .content span{
        font-size: 10px;
    }
	#top .blog h3{
        font-size: 1.2rem;
    }
	#top .blog .content p{
        font-size: 1.0rem;
    }

}