/*
Theme Name: INUpress
Description: inu design
Author: inu design
Version: 1.1

サイト基本色:#777777
*/


/*------------------------------------------

	サイト内汎用

------------------------------------------*/
body {
	color: #2A2A2A;
	font-family: "noto-sans-cjk-jp", sans-serif;
	/*font-family: "noto-sans", sans-serif; eigo */
	font-weight: 500;
	/*font-weight: 500; midium	*/
	/*font-weight: 700; bold	*/
	font-style: normal;
}

a {
	color: #2A2A2A;
}

.hx-type1 {
	width: 424px;
	height: 78px;
	font-size: 2.9rem;
	letter-spacing: 5px;
	background-image: url(images/common/hx-bg.png);
	background-size: contain;
	display: inline-block;
}
.hx-cach {
	font-size: 1.7rem;
	font-weight: 900;
	letter-spacing: 5px;
}

.tate {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright; /* 縦方向に正しい形で表示 */
  text-combine-upright: none; /* 縦中横を無効化 */
}
.tate.yugoshi {
  font-family: "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  writing-mode: vertical-rl; /* 縦書き */
  text-orientation: upright; /* 正しい縦向き表示 */
}

.org-bg {
	background-image: url(images/common/bg.jpg);
	background-repeat: repeat-y;
}

.btn-type1 a,
.btn-sbmt input {
	width: 260px;
    display: inline-block;
    background-color: #2A2A2A;
    color: #fff;
    font-size: 1.5rem;
    padding: 10px 40px;
    clip-path: polygon(3% 0%, 97% 0%, 100% 15%, 100% 85%, 97% 100%, 3% 100%, 0% 85%, 0% 15%);
    transition: background-color 0.3s ease;
}
.btn-sbmt input:disabled {
    color: #666;
    background: #999;
	opacity: .6;
}

.btn-type2 a {
	width: 200px;
    display: inline-block;
	background: rgb(42,42,42);
	background: linear-gradient(105deg, rgba(42,42,42,1) 12.9428%, rgba(42,42,42,1) 100%);
    text-align: center;
    border-radius: 100px;
    color: #fff;
    font-size: 1.7rem;
    padding: 8px 10px;
    transition: background .3s, color .3s, opacity .3s;
}
.btn-type2 a:hover {
	background: rgb(255,153,0);
	background: linear-gradient(105deg, rgba(255,153,0,1) 12.9428%, rgba(244,195,26,1) 100%);
	opacity: 1;
}

.more a,
.more p {
	font-size: 1.2rem;
	font-weight: 900;
	text-decoration: underline;
}
.more-tit {
	font-size: 1.9rem;
}

.inr {
	width: 100%;
	max-width: 1130px;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.wrap-boc {
    padding-right: 90px;
    padding-left: 115px;
}

/*PC*/
@media screen and (min-width: 768px) {
	.anchor {
		padding-top: 68px;
		margin-top: -68px;
	}

	.pc-tate {
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
	}
}/*END*/

/*Smartphone*/
@media screen and (max-width: 767px) {
	.anchor {
		padding-top: 68px;
		margin-top: -68px;
	}

	.sm-tate {
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
	}

	.hx-type1 {
	    width: 200px;
	    height: 38px;
	    font-size: 1.8rem;
	}
	.hx-cach {
		font-size: 1.0rem;
	    transform: translateX(3px);
	}

	.btn-type1 a,
	.btn-sbmt input  {
		width: 200px;
	    font-size: 1.4rem;
	    padding: 10px 40px;
	}

	.btn-type2 a {
		width: 160px;
	    font-size: 1.3rem;
	    padding: 8px;
	}

	.more-tit {
		font-size: 1.7rem;
	}

	.wrap-boc {
	    padding-right: 0px;
	    padding-left: 37px;
	}
}/*END*/


/*------------------------------------------

	ヘッダー

------------------------------------------*/
header {
	height: 100vh;
	border-right: #fff 1px solid;
	position: fixed;
	top: 0;
	left: 0;
	padding: 30px;
	z-index: 10;
}

header .logo {
	opacity: 1;
	transition: .3s;
}

.header-gnav {
	font-size: 1.6rem;
	font-weight: 900;
	position: fixed;
	top: 50%;
	right: 40px;
	transform: translateY(-50%);
	z-index: 10;
}
.header-gnav .gnav {
	gap: 60px;
	text-align: center;
}
.header-gnav .gnav a {
	color: #fff;
	letter-spacing: 5px;
}

/* WORKS */
.work-list {
	width: fit-content;
	border-left: #2A2A2A 1px solid;
	margin-left: auto;
}
.work-list li {
	width: 95px;
	height: 235px;
	border-right: #2A2A2A 1px solid;
	position: relative;
}
.work-list .num,
.work-list .tit {
	line-height: 1.3;
	position: absolute;
}
.work-list .num,
.work-list .tit a {
	letter-spacing: 5px;
}
.work-list .tit.lspe a {
	letter-spacing: 0;
}
.work-list .num {
	font-size: 1.5rem;
	color: #fff;
	top: 5px;
	right: 5px;
}
.work-list .tit {
	font-size: 1.8rem;
	font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
	left: 15px;
	bottom: 0;
}

/*PC*/
@media screen and (min-width: 768px) {
	.fix header .logo {
		opacity: 0;
	}

	.work-list .tit span {
	    display: inline-block;
	    padding-top: 49px;
	}
}/*END*/

/*Smartphone*/
@media screen and (max-width: 767px) {
	header {
		padding: 10px;
	}

	header .logo {
		width: 15px;
	}

	.header-gnav .logo {
        width: 60%;
        padding: 15px;
	}

	.header-gnav .gnav {
        gap: 60px;
        border-top: #0F0F0F 1px solid;
        margin-top: 10px;
	}
	.header-gnav .gnav li {
		font-size: 1.5rem;
		border-bottom: #0F0F0F 1px solid;
	}
	.header-gnav .gnav a {
		color: #0F0F0F;
        display: block;
		letter-spacing: 3px;
        padding: 25px;
	}

	.header-gnav {
        width: 100%;
        height: 100vh;
        font-size: 1.6rem;
        background: rgba(255, 255, 255, .95);
        font-weight: 900;
        position: fixed;
        top: 50%;
        right: -100%;
        z-index: 999;
	    transition: .3s;
	}
	.open .header-gnav {
	    right: 0;
	}


	#menu-btn {
        width: 30px;
        height: 21px;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 99999;
	}
	#menu-btn span:nth-of-type(1),
	#menu-btn span:nth-of-type(2),
	#menu-btn span:nth-of-type(3) {
		width: 100%;
		height: 3px;
		background-color: #fff;
		position: absolute;
		left: 0;
		transition: .3s;
	}
	#menu-btn span:nth-of-type(1) {
		top: 0;
	}
	#menu-btn span:nth-of-type(2) {
		top: 50%;
		transform: translateY(-50%);
	}
	#menu-btn span:nth-of-type(3) {
		bottom: 0;
	}
	
	.open #menu-btn span:nth-of-type(1),
	.open #menu-btn span:nth-of-type(2),
	.open #menu-btn span:nth-of-type(3) {
		background-color: #0F0F0F;
	}
	.open #menu-btn span:nth-of-type(1) {
		transform: rotate(45deg) translate(7px,7px);
	}
	.open #menu-btn span:nth-of-type(2) {
		left: -15px;
		opacity: 0;
	}
	.open #menu-btn span:nth-of-type(3) {
		transform: rotate(-45deg) translate(6px,-6px);
	}

	.header-gnav .sns-list {
		gap: 20;
	}
	.header-gnav .sns-list li {
		width: 35px;
	}

	.work-list {
		width: 100%;
		border-top: #2A2A2A 1px solid;
		border-left: 0;
		margin-right: auto;
		margin-left: auto;
	}
	.work-list li {
        width: 100%!important;
        height: 80px;
        border-right: 0;
        border-bottom: #2A2A2A 1px solid;
	}
	.work-list .num {
		font-size: 1.4rem;
		top: 5px;
		right: 5px;
	}
	.work-list .tit {
		font-size: 1.6rem;
		left: 5px;
		bottom: 5px;
	}
}/*END*/


/*------------------------------------------

	フッター

------------------------------------------*/
footer {
	background-color: #2A2A2A;
	color: #fff;
	padding-top: 60px;
	padding-bottom: 80px;
	position: relative;
}
footer a {
	color: #fff;
}

.fix-contact {
	position: fixed;
	left: 30px;
	bottom: 50px;
	z-index: 15;
}
.fix-contact a {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 30px;
    letter-spacing: 5px;
    display: inline-block;
    color: #fff;
    border: #fff 1px solid;
    border-radius: 100px;
    padding: 30px 0;
}

footer #page-top {
    position: absolute;
    bottom: calc(100% + 20px);
    left: 30px;
    z-index: 99;
}

footer .cach {
	font-size: 1.7rem;
	font-weight: 900;
	letter-spacing: 5px;
}

footer .contact-list li {
	width: 47.4545454545%;
}

footer .gnav {
	gap: 30px;
}
footer .gnav a {
	letter-spacing: 5px;
}
footer .gnav:first-of-type a {
	text-decoration: underline;
}

footer address {
	font-size: 1.0rem;
	font-family: "libre-franklin", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-style: normal;
}

footer .add {
	font-size: 1.4rem;
	line-height: 1.8;
}

.sns-list {
	gap: 10px;
}

/*PC*/
@media screen and (min-width: 768px) {
	.fix .fix-contact {
		position: absolute;
		top: -260px;
		bottom: auto;
	}
	.fix .fix-contact {
		position: absolute;
		top: -260px;
		bottom: auto;
	}
}/*END*/

/*Smartphone*/
@media screen and (max-width: 767px) {
	footer {
		background-color: #2A2A2A;
		color: #fff;
		padding-top: 60px;
		padding-bottom: 80px;
		position: relative;
	}
	footer a {
		color: #fff;
	}

	footer .logo {
		width: 70%;
	}

	.fix-contact {
	    width: 15px;
	    left: 16px;
	}
	.fix-contact a {
	    font-size: 1.0rem;
	    line-height: 20px;
	    padding: 20px 0;
	}

	footer #page-top {
        width: 25px;
	    position: absolute;
	    bottom: calc(100% + 10px);
	    left: 5px;
	    z-index: 15;
	}

	footer .contact-list li {
		width: 100%;
		margin-bottom: 10px;
	}

	footer .gnav {
		gap: 15px;
	}
	footer .gnav:first-of-type {
		border-top: #fff 1px solid;
		padding-top: 10px;
	}
	footer .gnav li {
		border-bottom: #fff 1px solid;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	footer .gnav a {
		display: block;
		text-decoration: none!important;
	}

	footer .add {
		font-size: 1.2rem;
	}

	footer .cach {
		width: 100%;
		order: 1;
	}
	footer .contact-list {
		width: 100%;
		order: 4;
	}
	footer nav {
		width: 100%;
		order: 5;
	}
	footer .address {
		width: 100%;
		text-align: center;
		order: 6;
	}
	footer .cpy-box {
		width: 100%;
		order: 2;
	}
	footer .sns-list {
		width: 100%;
		order: 3;
	}
	footer .sns-list li {
		width: 26px;
	}
}/*END*/