/* reset */
html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, label, table, tr, td, th, body, blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
    line-height:100%;
    list-style: none;
	}

table {
	border-collapse: colarrowlapse;
	border-spacing: 0;
	}

/*
 * Copyright (C) 2014 Adobe Systems Incorporated
 *      https://github.com/adobe-fonts/source-han-sans/tree/master
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

a{
	color:#333333;
	font-style:normal;
	text-decoration:none;
	outline:none;
    transition:opacity 0.1s linear;
    -webkit-transition:opacity 0.1s linear;
}

a:link {
	color:#333333;
	font-style:normal;
	text-decoration:none;
}

a:visited {
	color:#333333;
	text-decoration:none;
}

a:hover {
	color:#333333;
	font-style:normal;
	text-decoration:underline;
	opacity: 1;
}

a:active {
	text-decoration:underline;
}

.forpc {
	display: block;
}

.forsp {
	display: none;
}

/* common */
html {
	scroll-behavior: smooth;
}

body {
    font-family: "Noto Serif JP", serif;
    color:#333333;
	min-width: 1200px;
	-webkit-text-size-adjust:100%;
	letter-spacing: 0.125em;
	font-weight: 500;
	font-size: 15px;
}

.noto-serif-jp-regular {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-style: normal;
}

.wrapper {
    width:960px;
    margin:0 auto;
	box-sizing: border-box;
}

p {
	color:#333333;
	font-size: 15px;
	line-height: 30px;
}

/* menu */
/* thanks : https://lopan.jp/css-animation-drawer/ */
/* :::::: toggle button :::::: */
.drawer-box {
	position: relative;
	z-index: 999998;
}

#navTgl {
	display: none;
}
.drawer-box label {
	cursor: pointer;
	position: fixed;
	top: 0;
	right: 0;
}
.open {
	z-index: 2;
	width: 60px;
	height: 60px;
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
	background: #ffffff;
}
.open::before,
.open::after {
	content: "";
}
.open span,
.open::before,
.open::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 1px solid #333333;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before {
	transform: translateY(-8px);
}
.open::after {
	transform: translateY(8px);
}
.close {
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .6s;
	background: none;
}
#navTgl:checked + .open {
	transform: translateX(-300px);
	background: none;
}
#navTgl:checked + .open span {
	transform: scaleX(0);
}
#navTgl:checked + .open::before {
	transform: rotate(45deg);
}
#navTgl:checked + .open::after {
	transform: rotate(-45deg);
}
#navTgl:checked ~ .close {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}

/* :::::: drawer menu :::::: */
.drawer-menu {
	z-index: 1;
	position: fixed;
	overflow: auto;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	padding: 30px 15px;
	box-sizing: border-box;
	background: #ffffff;
	color: #333333;
	transform: translateX(100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.drawer-menu img {
	width: 100%;
	height: auto;
	display: block;
}

.drawer-menu li {
	color:#333333;
}

.drawer-menu li a {
    text-decoration:none;
    transition: 0.1s;
	box-sizing: border-box;
	display: block;
	color: #333333;
}

.drawer-menu li:first-child a img {
	width: 120px;
	height: auto;
	margin: 0 auto;
}

.drawer-menu li .drawer-menu-box ul {
	width: 100%;
}

.drawer-menu li .drawer-menu-box ul li {
	margin: 0;
	margin-bottom: 2.5px
}

.drawer-menu li .drawer-menu-box ul li:last-child {
	margin-bottom: 0px;
}

.drawer-menu li .drawer-menu-box ul li a {
	color: #ffffff;
	background: #333333;
	padding: 20px 0px;
	text-align: center;
	border-radius: 5px;
}

.drawer-menu-box ul li a {
    transition:0.1s linear;
    -webkit-transition:0.1s linear;
}

.drawer-menu-box ul li a:hover {
	transform: scale(1.05);
	opacity: 1;
}

.drawer-menu li::after {
	content: "";
	display: block;
	width: 50px;
	height: 30px;
	border-bottom: 1px solid #333333;
	margin: 0 auto;
	margin-bottom: 30px;
}

.drawer-menu-box ul li::after, .drawer-menu ul li ul li::after {
	display: none;
}

.drawer-menu li:last-child p {
	font-size: 8px;
	line-height: 14px;
	text-align: center;
	letter-spacing: 0.05em;
}

.drawer-menu li:last-child::after {
	content: "";
	display: none;
	width: 0px;
	height: 0px;
	border-bottom: none;
	margin-bottom: 0px;
}

.drawer-menu li .drawer-menu-box ul li a img, .drawer-menu-box-midashi img, .drawer-menu-box-midashi ul li a {
	width: auto;
	height: 25px;
	margin: 0 auto;
}

.logo-hover a:hover {
	opacity: 0.8;
}

.drawer-menu ul li ul li {
	margin-top: 15px;
}

.drawer-menu .contact-time p, .drawer-menu .service-name {
	text-align: center;
	font-size: 10px;
	letter-spacing: 0.05em;
}

.drawer-menu .contact-time p {
	margin-top: 5px;
	line-height: 16px;
	margin-bottom: -6px;
}

.drawer-menu .buttun a {
	padding: 20px 0px;
	border-radius: 5px;
}

.drawer-menu .buttun a img {
	width: auto;
	height: 12.5px;
}

.drawer-menu .phone a, .drawer-menu .window a {
	background-image: none;
}

#navTgl:checked ~ .drawer-menu {
	transform: none;
}

/* header */
.header {
	position:relative;
	z-index: 999;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 20px 0px;
}

.header ul {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

h1 img {
	width: auto;
	height: 35px;
	display: block;
}

.header ul li a, .footer ul li a {
	color: #333333;
	font-size: 12px;
	display: block;
	letter-spacing: 0.25em;
	padding: 0px 30px;
}

.header ul li a::after, .footer ul li a::after {
	content:"";
	width: 0%;
	height: 10px;
	display: block;
	box-sizing: border-box;
	margin: 0 auto;
	margin-bottom: -10px;
	border-bottom: 1px solid #333333;
    transition:0.1s linear;
    -webkit-transition:0.1s linear;
}

.header ul li a:hover::after, .footer ul li a:hover::after {
	content:"";
	width: 30px;
	border-bottom: 1px solid #333333;
}

.header ul li:first-child a::after, .header ul li:first-child a:hover::after {
	display: none;
	margin-bottom: 0px;
}

.header ul li a:hover, .footer ul li a:hover {
	text-decoration: none;
	opacity: 1;
}

.header ul li, .footer ul li {
	border-left: 1px solid #333333;
}

.header ul li:first-child {
	margin-right: auto;
	padding: 0;
	border: none;
}

.footer ul li:first-child {
	border: none;
}

.header ul li:first-child a {
	padding: 0px;
    transition:0.1s linear;
    -webkit-transition:0.1s linear;
	border: none;
}

.header ul li:nth-child(2) {
	border: none;
}

.header ul li:first-child a:hover {
	padding: 0px;
    opacity: 0.8;
}

.header ul li:last-child a {
	padding-right: 0px;
}

/* top */
.top {
	background: #cccccc;
}

.slider-box {
	height: 100vh;
	position: relative;
	z-index: 1;
	mix-blend-mode: multiply;
}

.slider-box video {
  width: 100%;  /* 明示的に幅を設定（必須） */
  height: 100%; /* 明示的に高さを設定（必須） */
  object-fit: cover; /* コンテンツボックスに収まるように拡大縮小 */
}

.top-box, .top-box1, .top-box2  {
	width: 100%;
	height: 100vh;
	position:relative;
	margin-top: -100vh;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-box2 {
	box-sizing: border-box;
	padding: 50px 0px;
	align-items: flex-end;
	justify-content:flex-end;
}

.top-box2 .sns-box {
	justify-content:flex-end;
}

h2 {
	color: #ffffff;
	font-size: 20px;
	line-height: 35px;
	letter-spacing: 0.5em;
} 

/* menu-box */
.logo-box {
	padding: 50px;
	box-sizing: border-box;
	background: #ffffff;
	margin-top: 50px;
	border-radius: 5px;
}

.logo-box img {
	width: 125px;
	height: auto;
	display: block;
	margin: 0 auto;
	margin-bottom: 15px;
}

.logo-box p, .staff-profile p {
	width: 100%;
	font-size: 14px;
	line-height: 28px;
}

.logo-box p span {
	font-weight: bold;
}

.menu-box ul {
	display: flex;
	justify-content: space-between;
}

.menu-box ul li {
	width: calc((100% - (25px * 3)) / 4);
}

.menu-box ul li a {
	display: block;
	color: #ffffff;
	background: #333333;
	padding: 25px 0px;
	text-align: center;
	border-radius: 5px;
    transition:0.1s linear;
    -webkit-transition:0.1s linear;
}

.menu-box ul li a:hover {
	transform: scale(1.05);
}

h3 {
	margin: 0 auto;
	padding-bottom: 50px;
	text-align: center;
}

h3 img {
	width: auto;
	height: 40px;
}

.menu-box ul li a img {
	width: auto;
	height: 30px;
}

.menu-box ul li a h3, .menu-box ul li a h3 img {
	height: 35px;
	padding: 0;
}

/* content */
.content {
	background: url(../images/back_paper.jpg) center;
}

.content .wrapper, .header-box .wrapper {
	padding: 150px 0px;
}

.back-printing {
	background: url("../images/back_printing.jpg") no-repeat center;
	background-size: cover;
}

.header-box h3 {
	padding-bottom: 0;
}

.content-ul::after {
	content: "";
	display: block;
	width: 100px;
	height: 00px;
	border-bottom: 1px solid #333333;
	margin: 0 auto;
}

.copy-box .wrapper, .about-box .wrapper,.service-box .wrapper, .contact-box .wrapper, .works-list-box .buttun, .privacy-box .wrapper {
	width: 480px;
	margin: 0 auto;
}

.about-box table, .service-box ul {
	margin-bottom: -1em;
}

.about-box table th, .about-box table td {
	vertical-align: top;
	padding-bottom: 1em;
	line-height: 2em;
}

.about-box table th {
	width: 7em;
}

.staff-box {
	display: flex;
	justify-content: center;
}

.staff-li {
	width: 50%;
}

.staff-name {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.staff-photo {
	width: 100px;
	height: 100px;
	display: block;
	margin: 0 auto;
	border-radius: 50px;
}

.staff-photo1 {
	background: url(../images/staff_yuki.jpg) no-repeat center;
	background-size: cover;
}

.staff-photo2 {
	background: url(../images/staff_daiki.jpg) no-repeat center;
	background-size: cover;
}

.staff-photo1:hover {
	animation: staff-photo1 1s linear 0s 1 alternate none running;
}

.staff-photo2:hover {
	animation: staff-photo2 1s linear 0s 1 alternate none running;
}

@keyframes staff-photo1 {
  0% {
    transform: rotateY(0deg);
  }
	
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes staff-photo2 {
  0% {
    transform: rotateY(0deg);
	background: url(../images/staff_daiki.jpg) no-repeat center;
	  background-size: cover;
  }
	
  24.5% {
	background: url(../images/staff_daiki.jpg) no-repeat center;
	  background-size: cover;
  }

  25% {
	background: url(../images/staff_daiki+.jpg) no-repeat center;
	  background-size: cover;
  }
	
  50% {
	background: url(../images/staff_daiki+.jpg) no-repeat center;
	  background-size: cover;
  }

  74.5% {
	background: url(../images/staff_daiki+.jpg) no-repeat center;
	  background-size: cover;
  }
	
  75% {
	background: url(../images/staff_daiki.jpg) no-repeat center;
	  background-size: cover;
  }
	
  100% {
    transform: rotateY(360deg);
    background: url(../images/staff_daiki.jpg) no-repeat center;
	background-size: cover;
  }
}

.staff-katagaki {
	font-size: 12px;
	font-weight: bold;
	padding: 30px 0px 10px 0px;
}

.staff-name-img {
	width: auto;
	height: 35px;
	margin: 0 auto;
}

.staff-profile {
	margin-top: 20px;
}

.staff-tantou {
	margin-top: 20px;
	font-size: 12px;
	font-weight: bold;
}

.staff-tantou::before {
	content:"担当";
	font-size: 10px;
	background: #666666;
	color: #ffffff;
	border-radius: 5px;
	width: 5em;
	margin: 0 auto;
	margin-bottom: 5px;
	box-sizing: border-box;
	display: block;
}

.sns-box {
	display: flex;
	justify-content: center;
	gap: 0px 15px;
}

.sns-box a img {
	width: auto;
	height: 15px;
	display: block;
}

.service-box ul li {
	padding-bottom: 50px;
}

.service-box ul li:last-child {
	padding: 0;
}

.service-name img {
	width: auto;
	height: 20px;
	display: block;
}

.service-about {
	line-height: 2em;
	padding-top: 5px;
}

.contact-box li {
	padding-bottom: 50px;
	text-align: center;
}

.contact-box li:last-child {
	padding-bottom: 0px;
}

.contact-box .service-name img {
	margin: 0 auto;
}

.contact-time p {
	margin-top: 15px;
	line-height: 26px;
}

.buttun a {
	display: block;
	color: #ffffff;
	background: #333333;
	padding: 25px 0px;
	text-align: center;
	border-radius: 5px;
	line-height: 150%;
    transition:0.1s linear;
    -webkit-transition:0.1s linear;
}

.buttun a img {
	width: auto;
	height: 20px;
	display: block;
	margin: 0 auto;
}

.buttun a:hover {
	text-decoration: none;
	transform:scale(1.05);
}

.phone a {
	background-image: url("../images/phone.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 30px) center;
	background-size: 20px auto;
}

.window a {
	background-image: url("../images/windows.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 30px) center;
	background-size: 20px auto;
}

/* footer */
.footer {
}

.footer .wrapper {
	padding: 100px 0px;
}

.footer-box {
	display: flex;
	flex-direction: column;
}

.footer h6, .footer h6 a img {
	display: block;
	width: 200px;
	height: auto;
	margin: 0 auto;
}

.footer ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 50px 0px;
}

.footer ul li {
	border-left: 1px solid #ffffff;
}

.footer ul li a {
	color: #ffffff;
}

.footer ul li a::after {
	border-bottom: 1px solid #ffffff;
}

.footer ul li a:hover::after {
	border-bottom: 1px solid #ffffff;
}

.footer p {
	color: #ffffff;
	text-align: center;
	font-size: 8px;
	line-height: 200%;
}


/* works */
.works-box .service-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 50px;
}

.service-name-works {
	padding-right: 30px;
	border-right: 1px solid #333333;
	margin-right: 30px;
}

.work-paginating-list-box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content:center;
	gap: 50px 50px;
	margin-bottom: 50px;
}

.work-paginating-list-box .works-li {
	width: calc((100% - 50px) / 2);
	background: #ffffff;
	box-sizing: border-box;
/*	font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: normal; */
	letter-spacing: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.design .work-paginating-list-box .works-li {
	width: calc((100% - 100px) / 3);
}

.works-visual, .works-visual a, .works-visual a img, .works-visual img {
	width: 100%;
	height: auto;
	display: block;
	box-sizing: border-box;
}

.works-visual a {
    transition:0.1s linear;
    -webkit-transition:0.1s linear;
}

.works-visual a:hover {
    transform: scale(1.05);
}

.works-spec {
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	text-align: center;
	border-top: 1px solid #efefef;
}

.works-title {
	font-size: 14px;
	line-height: 22px;
	font-weight: bold;
	text-align: left;
	letter-spacing: 1.5px;
}

.works-time, .works-data {
	font-size: 12px;
	line-height: 18px;
	padding-top: 10px;
	text-align: left;
}

.works-data {
	flex-grow: 1;
}

.works-data::before {
	content: "";
	display: inline-block;
	width: 33px;
	height: 12px;
	background: url("../images/icon_data.png") center no-repeat #666666;
	background-size: auto 6px;
	box-sizing: border-box;
	border-radius: 3px;
	margin-bottom: -1px;
	margin-right: 0.25em;
}

.works-link {
	width: 100%;
	margin-top: auto;
	box-sizing: border-box;
	padding: 0px 20px 20px 20px;
}

.works-link a {
	width: 85%;
	display: block;
	margin: 0 auto;
	font-size: 12px;
	color: #333333;
	background-color: #ffffff;
	background-image: url("../images/windows+.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 15px) center;
	background-size: 12.5px auto;
	padding: 15px 0px;border: 1px solid #333333;
	text-align: center;
	border-radius: 5px;
    transition:0.1s linear;
    -webkit-transition:0.1s linear;
}

.works-link a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #333333;
	background-image: url("../images/windows.png");
}

.works-list-box .buttun {
	margin: 0 auto;
}

.works-list-box-ul {
	margin-bottom: 150px;
}

.works-teach {
}

.works-teach ul li {
	font-size: 14px;
	line-height: 24px;
	padding: 30px;
	border-bottom: 1px solid #cccccc;
	box-sizing: border-box;
	letter-spacing: 0;
	background: #ffffff;
}

.works-teach ul li:last-child {
	border: none;
}

.works-teach ul li::before {
	content: "●";
}


/* youtube */
.youtube {
	position: relative;
	width: 100%;
    height:auto;
	padding-top: 56.25%;
    margin-bottom:0%;
}

.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* paginathing */
.pagination-container{
	width: 100%;
	margin-bottom: 0px;
}
.pagination-container ul{
    width: 100%;
    display: flex;
    justify-content: center;
	gap: 0px 15px;
}
.pagination-container li + li{ margin-left: -1px; }
.pagination-container a{
	font-family: "Noto Serif JP", serif;
	font-size: 12px;
    padding: 15px;
    display: block;
    color: #333333;
    text-decoration: none;
    background: #ffffff;
	text-align: center;
	border-radius: 5px;
}
.pagination-container .navi-active a{
    background: #cccccc;
	color: #333333;
    transition:0.1s linear;
    -webkit-transition:0.1s linear;
}
.pagination-container a:hover{
    color: #ffffff;
    background: #333333;
}

/* inview */
.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

#pagetop {
    height: 40px;
    width: 40px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition:0.1s linear;
    -webkit-transition:0.1s linear;
}

.pagetop-arrow {
    height: 8px;
    width: 8px;
    border-top: 2px solid #333333;
    border-right: 2px solid #333333;
    transform: translateY(20%) rotate(-45deg);
}

#pagetop:hover {
    transform: scale(1.25);
}


/* privacy */
.privacy-box ul {
	margin:0;
	padding: 0;
	display: inherit;
}

.privacy-box ul li {
	margin-bottom: 50px;
}

.privacy-box h3 {
	display: inline-block;
	font-weight: bold;
	text-align: left;
	padding-bottom: 0.5em;
	margin-bottom: 15px;
	border-bottom: 1px solid #333333;
}