@charset "utf-8";
@import "_variables";
@import 'mixin';


/*-----------------------------------
テーマ用CSS設定 自由入力
-----------------------------------*/
/* 英文フォント */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* 'Source Serif 4' */

/* 和文フォント */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap'); /* 'Noto Serif JP' */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap'); /* 'Noto Sans JP' */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap'); /* 'Zen Maru Gothic' */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap'); /* 'Zen Kaku Gothic New' */
@import url('https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@400;500;700&display=swap'); /* 'Kaisei HarunoUmi' */
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap'); /* 'New Tegomin' */
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap'); /* 'Yuji Syuku' */


html{
	font-size: 62.5%;
}
body{
	font-family: "Source Serif 4", "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	/* 	font-family: "Helvetica Neue", "Helvetica", "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; */
	/* 	font-family: "Helvetica Neue", "Helvetica", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; */
	/* 	font-family: "Helvetica Neue", "Helvetica", "KleeOne-SemiBold", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; */
	/* 	font-family: Yu Gothic, "游ゴシック", YuGothic, "游ゴシック体", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN", Hiragino Sans, Meiryo,sans-serif; */
	font-size: 14px;
	font-weight: normal;
	font-feature-settings: "palt" 1;
	letter-spacing: 1px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	/* 	overflow-y: scroll; */
	font-variant-numeric: tabular-nums;
}
.f_FO {
	font-family: "FugazOne-Regular", "Helvetica Neue", "Helvetica";
}
.f_OsM {
	font-family: "Oswald-Medium", "Helvetica Neue", "Helvetica";
}
.f_Ant {
	font-family: "Anton-Regular", "Helvetica Neue", "Helvetica";
}

.fw-3 {font-weight: 300;}
.fw-5 {font-weight: 500;}
.fw-7 {font-weight: 700;}
.fw-b {font-weight: bold;}



.pc-only {display: none;}
.tab-under {display: none;}
.tab-over {display: none;}
.sp-only {display: none;}
@media screen and (min-width: 960px) {
	.pc-only {display: block;}
}
@media screen and (max-width: 959px) {
	.tab-under {display: block;}
}
@media screen and (min-width: 600px) {
	.tab-over {display: block;}
}
@media screen and (max-width: 599px) {
	.sp-only {display: block;}
}



a:hover{
	opacity :0.7;
	filter :alpha(opacity=70);
	-ms-filter :"alpha(opacity=70)";
}
.inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 20px;
}
.cs_cont {
	opacity: 0.5;
}



/* -webkit-transform: translate(-50%, 20%);
transform: translate(-50%, 0%); */

/* @media screen and (max-width: 960px) {
} */
/* @media screen and (max-width: 599px) {
} */
/* @media screen and (max-width: 420px) {
} */



/* Page etc ============================================================================

ヘッダー

====================================================================================== */
main {
	padding-top: 100px; /* 回り込み防止 */
	/* 	padding-bottom: calc(40px + 40px); */
	opacity: 0;
	-webkit-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}
.loaded main {
	opacity: 1;
}

.header-pc {
	height: 100px;
	display: flex;
	justify-content: center;
	position: absolute;
	z-index: 1;
	width: 100%;
	background: rgba(255, 255, 255, 0.8);
}
/* .header-pc.active {
position: fixed;
transition: all 0.3s;
} */

/* ttl_logo */
.header-pc .h_title {
	/* display: none; */
	position: absolute;
	top: 0;
	left: 75px;
	width: auto;
	height: 100px;
	padding: 10px;
}
.header-pc:not(.h-change) .h_title {
	display: flex;
    align-items: center;
}
header.header-pc .h_title a {
	line-height: 100px;
}
.header-pc .h_title a {
	display: inline-block;
	height: 50px;
}
.header-pc .h_title.scroll {
	display: block;
}
.header-pc .h_title img {
	width: 250px;
	height: -webkit-fill-available;
	object-fit: contain;
}

/* nav 1階層 */
.header-pc .h_nav {
	line-height: calc(100px - 20px);
}
.header-pc .h_nav ul {
	display: flex;
}
.header-pc .h_nav .nav_item a {
	display: inline-block;
	width: 80px;
	padding: 10px;
	text-align: center;
}
.header-pc .h_nav .nav_item p {
	display: inline;
	padding-bottom: 5px;
}
.header-pc .h_nav .nav_item a:hover p {
	border-bottom: 1px solid #555555;
	transition: all 0.3s;
}

.header-pc .h_nav .nav_item.menuBr {
	display: flex;
	align-items: center;
	position: relative;
}
.header-pc .h_nav .nav_item.menuBr a {
	line-height: calc(100px - 20px);
	height: 100%;
}
/* nav 2階層 */
.header-pc .h_nav .nav_item.menuBr ul {
	visibility: hidden;
	opacity: 0;
	height: 0px;
	flex-direction: column;
	position: absolute;
	top: 100px;
	left: 50%;
	-webkit-transform: translate(-50%, -20px);
	transform: translate(-50%, -20px);
	line-height: normal;
	transition: all 0.3s;
}
.header-pc .h_nav .nav_item.menuBr:hover ul {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
}
.header-pc .h_nav .nav_item.menuBr ul a {
    line-height: 20px;
    width: -webkit-fill-available;
    text-align: center;
    white-space: nowrap;
    background: #555555dd;
    color: #fff;
    margin-top: 2px;
    border-radius: 2px;
    outline: 1px solid #fff;
    outline-offset: -3px;
    transition: all 0.3s;
}
.header-pc .h_nav .nav_item.menuBr ul a:hover {
    background: rgba(255, 255, 255, 0.8);
    outline: 1px solid #555;
    color: #555555;
    font-weight: 500;
    opacity: 1;
    transition: all 0.3s;
}
.header-pc .h_nav .nav_item.active ul {
	display: flex;
}

/* h_right */
.header-pc .h_right {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	margin: 5px;
}
.header-pc .h_right a {
	display: inline-block;
	padding: 10px 20px;
	color: #fff;
	border-radius: 2px;
}
.header-pc .h_right a:not(:first-child) {
	margin-left: 5px;
}
.header-pc .h_right a.login {
	background: #e6232a;
}
.header-pc .h_right a.contact {
	background: #333;
}

@media screen and (min-width: 960px) {
	header .header-sp {
		display: none;
	}
}
@media screen and (max-width: 959px) {
	header .header-pc,
	.header-pc.h-change {
		display: none;
	}
}

/* section article etc ================================
スクロールヘッダー
==================================================== */
.header-pc.h-change {
	height: 75px;
	position: fixed;
	top: -75px;
	background: rgba(0, 0, 0, 0.2);
	background: url(../../image/parts/bg_gra.png) no-repeat 0 0 / 100% 100%;
	-webkit-transition: ease-in-out 0.3s;
	transition: ease-in-out 0.3s;
}
.header-pc.h-change.scrolled {
	top: 0;
}
.header-pc.h-change.scrolled.end { /* 画面最下部で再度非表示 */
	top: -75px;
}
.header-pc.h-change {
	.h_title {
		height: 75px;
		a {
			img {
				filter: drop-shadow(1px 1px 0px #fff);
			}
		}
	}
}
.header-pc.h-change .h_nav,
.header-pc.h-change .h_nav .nav_item.menuBr a {
	line-height: calc(75px - 20px);
}

.header-pc.h-change .h_nav a {
	color: #fff;
	-webkit-transition: all 0.1s;
	transition: all 0.1s;
}
.header-pc.h-change .h_nav a:hover {
	color: #555;
	font-weight: 700;
	-webkit-transition: all 0.1s;
	transition: all 0.1s;
}
.header-pc.h-change .h_right a.login {
	background: #e6232a;
	font-weight: 700;
}

/* スクロールnav 2階層 */
.header-pc.h-change .h_nav .nav_item.menuBr ul {
	/* display: none; */
}
.header-pc.h-change .h_nav .nav_item.menuBr ul {
	top: 75px;
}
.header-pc.h-change .h_nav .nav_item.menuBr ul a {
	line-height: 20px;
	background: rgba(0, 0, 0, 0.5);
}
.header-pc.h-change .h_nav .nav_item.menuBr ul a:hover {
	background: rgba(255, 255, 255, 1);
	color: #555;
}

/* section article etc ================================
SPヘッダー
==================================================== */
/* @media screen and (max-width: 599px) {
.header-sp { display: block;}
} */
@media screen and (max-width: 959px) {
	main {
		display: block;
		padding-top: 45px; /* fixed回り込み防止 */
	}
}
.header-sp {
	position: fixed;
	background: #fff;
	z-index: 999;
	width: 100%;
}

.header-sp .sp_top {
	position: relative;
	height: 45px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.header-sp .sp_top .h_title img {
	height: 45px;
}
.header-sp .sp_top .h_title a {
	display: inline-block;
	margin-left: 10px;
}
.header-sp .sp_right {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
}
.sp_right > * {
	width: 35px;
	height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-sp .sp_top .sp_nav {
	width: 45px;
	height: 45px;
	cursor: pointer;
	position: relative;
}
.header-sp .sp_top .sp_nav span {
	position: absolute;
	display: inline-block;
	height: 2px;
	left: 15px;
	background: #000;
	border-radius: 1px;
	transition: all 0.4s;
}
.sp_nav span:nth-of-type(1) {
	top: 14px;
	width: 45%;
}
.sp_nav span:nth-of-type(2) {
	top: 22px;
	width: 35%;
}
.sp_nav span:nth-of-type(3) {
	top: 30px;
	width: 20%;
}
/* activeクラス付与（js）=================== */
.sp_nav.active span:nth-of-type(1) {
	top: 15px;
	left: 17px;
	transform: translateY(6px) rotate(-135deg);
	width: 30%;
}
.sp_nav.active span:nth-of-type(2) {
	opacity: 0;
}
.sp_nav.active span:nth-of-type(3) {
	top: 26.5px;
	left: 17px;
	transform: translateY(-6px) rotate(135deg);
	width: 30%;
}

.header-sp .sp_top .sp_nav.active {
	z-index: 999;
	background: #555;
}
.header-sp .sp_top .sp_nav.active span {
	background: #fff;
}

.sp_navList {
	position: absolute;
	z-index: 99;
	height: 100vh;
	width: 100%;
	/* overflow: hidden; */
	padding-top: 30px;
	padding-top: calc(100vh / 2 - 45px - 185px);
}
.sp_navList.nav_active {
	animation: SlideIn 0s ease 0s alternate forwards;
}
.sp_navList.nav_hide {
	animation: fadeOut 0.5s ease 0s alternate forwards,
		SlideOut 0s ease 0.5s alternate forwards;
}
@keyframes SlideIn {
	0% {
		opacity: 0;
		transform: translateY(calc(-100vh - 45px));
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes SlideOut {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(calc(-100vh - 45px));
	}
}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* activeクラス付与で bodyスクロール固定 */
.overflow-hidden {
	overflow: hidden;
}

/* 背景アニメーション */
/* .sp_navList span {
position: absolute;
display: inline-block;
transition: all 0.4s;
background: rgba(255, 255, 255, 0.7);
width: 130%;
height: 25%;
z-index: -1;
transform-origin: left bottom;
}
.sp_navList span:nth-of-type(1) {
top: calc(-25% + -3px);
transform: rotate(350deg) translateX(100%);
}
.sp_navList span:nth-of-type(2) {
top: 0%;
transform: rotate(350deg) translateX(-100%);
}
.sp_navList span:nth-of-type(3) {
top: calc(25% + 2px);
transform: rotate(350deg) translateX(100%);
}
.sp_navList span:nth-of-type(4) {
top: calc(50% + 5px);
transform: rotate(350deg) translateX(-100%);
}
.sp_navList span:nth-of-type(5) {
top: calc(75% + 7px);
transform: rotate(350deg) translateX(100%);
}
.sp_navList span:nth-of-type(6) {
top: calc(100% + 10px);
transform: rotate(350deg) translateX(-100%);
} */


.sp_navList span {
	position: absolute;
	display: inline-block;
	transition: all 0.4s;
	background: rgba(255, 255, 255, 0.7);
	width: 130%;
	height: 150px;
	left: 0;
	z-index: -1;
	transform-origin: left bottom;
}
.sp_navList span:nth-of-type(1) {
	top: calc(0px - 45px);
	transform: rotate(350deg) translateX(100%);
}
.sp_navList span:nth-of-type(2) {
	top: calc(0px - 45px + 150px + 1px);
	transform: rotate(350deg) translateX(-100%);
}
.sp_navList span:nth-of-type(3) {
	top: calc(0px - 45px + 300px + 2px);
	transform: rotate(350deg) translateX(100%);
}
.sp_navList span:nth-of-type(4) {
	top: calc(0px - 45px + 450px + 3px);
	transform: rotate(350deg) translateX(-100%);
}
.sp_navList span:nth-of-type(5) {
	top: calc(0px - 45px + 600px + 4px);
	transform: rotate(350deg) translateX(100%);
}
.sp_navList span:nth-of-type(6) {
	top: calc(0px - 45px + 750px + 5px);
	transform: rotate(350deg) translateX(-100%);
}
.sp_navList span:nth-of-type(7) {
	top: calc(0px - 45px + 900px + 6px);
	transform: rotate(350deg) translateX(100%);
}
.sp_navList span:nth-of-type(8) {
	top: calc(0px - 45px + 1050px + 7px);
	transform: rotate(350deg) translateX(-100%);
}





/* activeクラス付与（js）=================== */
.sp_navList.nav_active span {
	transform: rotate(350deg) translateX(0px);
}

/* sp_nav中身 */
.sp_navList .sp_nav_box {
	width: fit-content;
	padding: 20px 40px;
	background: rgba(208, 208, 208, 0.8);
	outline: 1px solid #000;
	outline-offset: -5px;
	/* background: #fff; */
	border-radius: 2px;
	margin: 0 auto;
	mix-blend-mode: normal;
	font-weight: 700;
}
.sp_navList h2 {
	text-align: center;
	margin-bottom: 30px;
	position: relative;
}
.sp_navList h2::after {
	position: absolute;
	content: "";
	bottom: -10px;
	left: 50%;
	-webkit-transform: translate(-50%, 20%);
	transform: translate(-50%, 0%);
	width: 20%;
	height: 2px;
	border-radius: 10px;
	background: #555;
}
.sp_navList li a {
	display: inline-block;
	padding: 5px 0px;
	width: -webkit-fill-available;
}

/* Page etc ============================================================================

Indexページ

====================================================================================== */
main#index {
	position: relative;
}


main#index:before {
	position: absolute;
	content: "";
	height: calc(100% - 100px);
	width: 100%;
	background: url(../../image/bg_element/pattern_light/crossword.png) repeat center top / auto auto;
	/* filter: opacity(0.6); */
	z-index: -1;
}
/* section article etc ================================
main_visual
==================================================== */
.main_visual {
	position: relative;
}
/* mv_left */
.mv_box.left {
	position: absolute;
	top: 50%;
	left: calc(75px / 2);
	z-index: 1;
}
.mv_box.left .scrollDown_s {
	position: absolute;
	bottom: auto;
	left: auto;
}
.mv_box.left .scrollDown_s:before {
	left: -5px;
	background: #555;
	width: 7px;
	height: 7px;
}
.mv_box.left .scrollDown_s:after {
	left: -2px;
	background: #333;
	width: 1px;
}
.mv_box.left .scrollDown_s span {
	left: 5.5px;
	color: #555;
}



.main_visual {
	.mv_box {
		&.mv {
			height: calc(100vh - 175px);
			width: calc(100vw - 150px);
			margin: 0 auto;
			/* padding: 0 75px; */
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			.video-wrap {
				video {
					max-width: 100%;
				}
			}
		}
	}
}
.main_visual .mv_box img {
	object-fit: cover;
	width: -webkit-fill-available;
	height: calc(100vh - 175px);
	border-radius: 3px;
	position: relative;
}
.main_visual .mv_box img::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../image/parts/bg_dotsA_b.png) repeat;
	content: "";
}

.main_visual .mv_cc_wrap {
	position: absolute;
	top: calc(50% - 35px);
	transform: translate(0, -50%);
	overflow: hidden;
	width: fit-content;
}
.main_visual .mv_cc {
	font-family: 'Yuji Syuku';
	font-size: clamp(24px, 2.5vw, 36px);
	// font-weight: ;
	color: #fff;
	/* text-shadow: 1px 0 0 #777777, 0 1px 0 #777777, 2px 1px 0 #777777, 1px 2px 0 #777777, 3px 2px 0 #777777, 2px 3px 0 #777777, 4px 3px 0 #777777, 3px 4px 0 #777777; */
	text-shadow: 3px 3px 0px rgba(0,0,0,.8);
	transform: translate(0px, 100%);
	transition: all 1s;
}
.main_visual .mv_cc.active {
	transform: translate(0px, 0%);
}
/* mv_right */
.main_visual .mv_box.right {
	position: absolute;
	top: 50%;
	right: 30px;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
.main_visual .mv_box.right .mv_copyright {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	color: #555;
	font-size: 1.2rem;
}
/* mv_bottom */
.mv_box.bottom {
	position: absolute;
	left: calc(75px - 1px);
	bottom: -1px;
	padding: 10px 20px;
	background: #fff;
	background: url(../../image/bg_element/pattern_light/crossword.png) repeat center top / auto auto;
	width: 400px;
	width: calc(50% - 75px);
	height: 35px;
	border-radius: 0 2px 0 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
@media screen and (max-width: 959px) {
	.main_visual .mv_box.mv {
		padding: 0;
		height: calc(100vh - 45px);
	}
	.main_visual .mv_box img {
		height: 100%;
		border-radius: 0px;
	}
	.mv_box.right,
	.mv_box.bottom {
		display: none;
	}
	.mv_box.left {
		top: auto;
		bottom: 10px;
		left: 50%;
	}
	.mv_box.left .scrollDown_s:before {
		background: #ddd;
	}
	.mv_box.left .scrollDown_s span {
		color: #fff;
	}
	.mv_box.left .scrollDown_s:after {
		background: #ddd;
	}
}

@media screen and (max-width: 599px) {
	.main_visual .mv_box.mv {
		width: calc(100vw);
	}
	.main_visual .mv_cc_wrap {
		transform: translate(-50%, -50%);
		left: 50%;
		top: 40%;
	}
}

/* section article etc ================================
statement
==================================================== */
main#index section.statement {
	padding: 0 75px;
	min-height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* margin-top: 75px; */
}
main#index section.statement h2 {
	position: absolute;
	top: 50%;
	left: 75px;
	-webkit-transform: translate(0, -50%) rotate(180deg);
	transform: translate(0, -50%) rotate(180deg);
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	font-size: clamp(14px, 2vw, 30px);
	opacity: 0.5;
	letter-spacing: 5px;
	text-shadow: 3px 3px 0 rgba(0,0,0,.2);
}

main#index .statement_msg {
	text-align: center;
	font-family: 'Yuji Syuku';
	font-weight: 300;
	color: #333;
	width: fit-content;
	margin: 0 auto;
	padding: 10px;
	background: rgba(255,255,255,.7);
	border-radius: 2px;
	position: relative;
}
main#index .statement_msg h3 {
	font-size: clamp(20px, 3vw, 50px);
	margin-bottom: 40px;
}
main#index .statement_msg p {
	font-size: clamp(14px, 3vw, 18px);
	line-height: 2.75rem;
	font-weight: 500;
	margin-bottom: 20px;
}
main#index section.statement a {
	display: block;
	padding: 10px 20px;
	width: fit-content;
	margin-left: auto;
	font-family: "Source Serif 4";
	font-weight: 500;
	position: relative;
	transition: all .4s;
}
main#index section.statement a::before {
	position: absolute;
	content: "";
	width: 25px;
	height: 1px;
	background: #333333;
	left: 0;
	top: calc(50% + 1px);
	transform: translate(-50%, 0%);
	transition: all .4s;
}
main#index section.statement a:hover{
	color: #d83131;
}

main#index .statement  img {
	/* display: none; */
	filter: drop-shadow(2px 4px 6px black);
	position: absolute;
	width: 250px;
	border-radius: 2px;
	z-index: -1;
}
main#index .statement_img.staImg01 {
	top: 0;
	left: 0;
	transform: translate(-10vw, 10%);
}
main#index .statement_img.staImg02 {
	top: 50%;
	right: 0;
	transform: translate(10vw, -50%);
}
main#index .statement_img.staImg03 {
	bottom: 0;
	left: 0;
	transform: translate(-5vw, 10%);
}



@media screen and (max-width: 959px) {
	main#index section.statement {
		padding: 0 20px;
		margin-top: 40px;
	}
	main#index section.statement h2 {
		position: sticky;
		z-index: 1;
		margin-left: auto;
		margin-right: -5px;
		text-shadow: none;
	}




	.statement_msg {
		flex-direction: column;
	}
	.statement  img {
		display: none;
	}
	.statement_msg > div {
		order: 2;
		width: inherit;
		transform: translate(20px, -50px);
		background: #eee;
		border: 1px solid;
		flex-direction: column;
		position: relative;
		padding: 5px;
	}
	.statement_msg > div p {
		writing-mode: lr-tb;
		text-align: justify;
		font-size: inherit;
		line-height: 2rem;
	}
	.statement_msg p {
		font-size: clamp(12px, 3vw, 18px);
		line-height: 2.75rem;
		font-weight: 500;
		text-align: justify;
	}
	.statement_msg > div span:nth-of-type(1),
	.statement_msg > div span:nth-of-type(2) {
		position: absolute;
		height: 1px;
		/* width: calc(100% - 10px); */
		width: calc(100%);
		background: #000;
		left: 0px;
	}
	.statement_msg > div span:nth-of-type(1) {
		top: 5px;
	}
	.statement_msg > div span:nth-of-type(2) {
		bottom: 5px;
	}

	.statement_msg > div span:nth-of-type(3),
	.statement_msg > div span:nth-of-type(4) {
		position: absolute;
		width: 1px;
		/* height: calc(100% - 10px); */
		height: calc(100%);
		background: #000;
		top: 0px;
	}
	.statement_msg > div span:nth-of-type(3) {
		left: 5px;
	}
	.statement_msg > div span:nth-of-type(4) {
		right: 5px;
	}

	section.statement a {
		right: 0px;
		bottom: 0px;
	}

}

/* section article etc ================================

index_WORKS

==================================================== */
section.works {
	padding: 0 75px;
	position: relative;
	margin-top: 75px;
	text-align: center;
	h2.sec_ttl {
		font-size: 2.5rem;
		font-weight: 700;
		letter-spacing: 2px;
		// width: fit-content;
		margin: 0 auto;
		padding: 5px;
		position: relative;
	}
	> span {
		position: absolute;
		top: 50%;
		right: 75px;
		-webkit-transform: translate(0, -50%) rotate(180deg);
		transform: translate(0, -50%) rotate(180deg);
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		text-orientation: sideways;
		font-size: 2vw;
		opacity: 0.5;
		letter-spacing: 5px;
		text-shadow: 3px 3px 0 rgba(0,0,0,.2);
	}
	.works_wrap {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 40px;
		a {
			display: inline-block;
			width: calc(100% / 2);
			.works_list {
				max-width: 500px;
				min-width: 400px;
				padding: 30px 5px;
				margin-bottom: 20px;
				text-align: right;
				.w_ttl {
					text-align: center;
					// width: fit-content;
					margin: 0 auto;
					margin-bottom: 75px;
					position: relative;
					&:after {
						position: absolute;
						content: "";
						bottom: -75px;
						left: 50%;
						-webkit-transform: translate(-50%, -50%);
						transform: translate(-50%, -50%);
						height: 30px;
						width: 1px;
						background: #000;
					}
					h3 {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						padding: 10px 20px;
						backdrop-filter: blur(2.5px);
						border-radius: 2px;
						font-family: "Zen Kaku Gothic New";
						color: #fff;
						// font-size: clamp(24px, 3vw, 26px);
						font-weight: 500;
						text-shadow: 0px 0px 3px #222;
					}
					.number {
						position: absolute;
						top: -5px;
						left: -17.5px;
						font-size: 1.1rem;
						color: #e6232a;
					}
					img {
						max-width: calc(100% - 5px);
						border-radius: 2px;
						box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
					}
					.video-wrap {
						display: flex;
						justify-content: left;
						height: 242.5px;
						width: calc(500px - 15px);
						max-width: 100%;
						background: #000;
						border-radius: 2px;
						overflow: hidden;
						box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
					}
					.icon {
						position: absolute;
						font-size: 8rem;
						color: #ddd;
						top: 0;
						left: 50%;
						-webkit-transform: translate(-50%, -50%);
						transform: translate(-50%, -50%);
						z-index: -1;
					}
				}
				.w_txt {
					width: 100%;
					padding: 10px 15px;
					line-height: 2.5rem;
					text-align: justify;
				}
				.w_digest {
					ul {
						margin-bottom: 10px;
						li {
							max-width: 500px;
							padding: 10px 0;
							padding-left: 15px;
							position: relative;
							border-bottom: 1px solid #ddd;
							text-align: left;
							&::after {
								position: absolute;
								content: "";
								width: 5px;
								height: 5px;
								border-radius: 50%;
								background: #e6232a;
								left: 5px;
								top: 50%;
								-webkit-transform: translate(-50%, -50%);
								transform: translate(-50%, -45%);
							}
						}
					}
				}
			}
		}
	}
}


@media screen and (max-width: 959px) {
	section.works {
		padding: 0 20px;
		margin-top: 40px;
	}
	section.works > span {
		position: sticky;
		float: right;
		right: 0;
		font-size: 1.4rem;
		line-height: 0;
		text-shadow: none;
	}
	section.works .works_wrap {
		flex-direction: column;
		align-content: center;
	}
	section.works .works_wrap .works_list {
		width: calc(100% - 10px);
		min-height: 50vh;
		min-width: auto;
	}
	section.works .works_img img {
		width: 75%;
		min-width: 280px;
	}
}

@media screen and (max-width: 599px) {
	section.works .works_wrap .works_list > * {
		padding-left: 0;
		padding-right: 0;
	}
}

/* section article etc ================================
CONTENTs blog
==================================================== */
section.contacts {
	padding: 0 75px;
	padding-bottom: 40px;
	margin-top: 75px;
	text-align: center;
	position: relative;
}
section.contacts h2.sec_ttl {
	/* 共通 */
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 2px;
	width: fit-content;
	margin: 0 auto;
	padding: 5px;
	position: relative;
}
section.contacts > span {
	position: absolute;
	top: 50%;
	left: 75px;
	-webkit-transform: translate(0, -50%) rotate(180deg);
	transform: translate(0, -50%) rotate(180deg);
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	font-size: 2vw;
	opacity: 0.5;
	letter-spacing: 5px;
	text-shadow: 3px 3px 0 rgba(0,0,0,.2);
}

.blog_wrap {
	max-width: 1024px;
	margin: 0 auto;
	position: relative;
}
.blog_list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 20px;
}
.blog_list li {
	width: 22vw;
	max-width: 240px;
	height: 22vw;
	max-height: 240px;

	background: rgba(255, 255, 255, 1);
	outline: 1px solid #777;
	outline-offset: -5px;
	border-radius: 3px;
	margin: 5px;
	margin-bottom: 15px;
	padding: 5px;
	box-shadow: rgb(0 0 0 / 25%) 0px 2px 6px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.blog_list li:hover {
	box-shadow: rgb(100 100 111 / 20%) 0px 6px 25px 0px;
}

section.contacts a.link {
	display: block;
	width: fit-content;
	margin-left: auto;
	padding: 10px 20px;
	border-radius: 2px;
	background: rgba(0, 102, 192, 0.8);
	outline: 1px solid #fff;
	outline-offset: -3px;
	color: #fff;
	-webkit-transition: all 0.1s;
	transition: all 0.1s;
	box-shadow: 0px 8px 16px -2px rgba(10, 10, 10, 0.1),
		0px 0px 0px 1px rgba(10, 10, 10, 0.02);
}
section.contacts a.link:hover {
	background: rgba(0, 102, 192, 1);
}
section.contacts a.link i {
	font-size: 1rem;
	padding-left: 10px;
}

@media screen and (max-width: 959px) {
	section.contacts {
		padding: 0 20px;
		padding-bottom: 40px;
		margin-top: 80px;
	}
	section.contacts > span {
		position: sticky;
		float: right;
		right: 0;
		font-size: 1.4rem;
		line-height: 0;
		text-shadow: none;
	}
	section.contacts .works_wrap .works_list > * {
		padding-left: 0;
		padding-right: 0;
	}
	section.contacts a.link {
		/* right: 40px; */
	}
}

@media screen and (max-width: 599px) {
	main#index section.statement {
		margin-top: 0px;
		justify-content: flex-start;
	}

	.blog_list {
		padding-bottom: 20px;
	}
	.blog_list li {
		margin-bottom: 5px;
		width: 40vw;
		height: 40vw;
	}
	.blog_list li:nth-child(n + 5) {
		display: none;
	}
}

.fadein-list li {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.8s ease-in-out;
}
.fadein-list li.scrollin {
	transform: translateY(0px);
	opacity: 1;
}
.fadein-list li.scrollin:nth-child(2) {
	transition-delay: 0.1s;
}
/* @media screen and (min-width: 768px) { */
.fadein-list li.scrollin:nth-child(2n) {
	transition-delay:0.1s;
}

.fadein-list li.scrollin:nth-child(3n) {
	transition-delay: 0.2s;
}

.fadein-list li.scrollin:nth-child(4) {
	transition-delay: 0.3s;
}
.fadein-list li.scrollin:nth-child(5) {
	transition-delay: 0.4s;
}

.fadein-list li.scrollin:nth-child(6) {
	transition-delay: 0.5s;
}
/* } */



/* section article etc ================================
NEWS
==================================================== */
section.news {
	padding: 0 75px;
	position: relative;
	margin-top: 75px;
	text-align: center;
}
section.news h2.sec_ttl {
	/* 共通 */
	font-size: 2.5rem;
	letter-spacing: 2px;
	width: fit-content;
	margin: 0 auto;
	padding: 5px;
	position: relative;
}
section.news > span {
	display: none;  /* 一旦非表示 */
	position: absolute;
	top: 50%;
	right: 40px;
	-webkit-transform: translate(0, -50%) rotate(180deg);
	transform: translate(0, -50%) rotate(180deg);
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	font-size: 2vw;
	opacity: 0.5;
	letter-spacing: 5px;
}

.news_wrap {
	max-width: 1024px;
	margin: 0 auto;
	position: relative;
	margin-top: 20px;
	padding-bottom: 10px;
}
.news_wrap ul.news_list {
	margin: 0 auto;
	max-width: fit-content;
}
.news_wrap li {
}
.news_wrap li a {
	display: inline-block;
	width: -webkit-fill-available;
	padding: 10px 10px;
	border: 1px solid transparent;
	border-radius: 2px;
	transition: all .25s;
}
.news_wrap li a:hover {
	border: 1px solid #555;
	transition: all .25s;
}
.news_wrap .news_item {
	display: flex;
}
.news_wrap .news_item .date {
	margin-right: 10px;
	font-weight: normal;
}
.news_wrap .news_item h3 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	font-weight: 700;
	font-size: 1.6rem;
}

section.news a.link {
	display: block;
	width: fit-content;
	margin-left: auto;
	padding: 10px 20px;
	border-radius: 2px;
	background: rgba(0, 102, 192, 0.8);
	outline: 1px solid #fff;
	outline-offset: -3px;
	color: #fff;
	-webkit-transition: all 0.1s;
	transition: all 0.1s;
	box-shadow: 0px 8px 16px -2px rgba(10, 10, 10, 0.1),
		0px 0px 0px 1px rgba(10, 10, 10, 0.02);
}
section.news a.link:hover {
	background: rgba(0, 102, 192, 1);
}
section.news a.link i {
	font-size: 1rem;
	padding-left: 10px;
}

@media screen and (max-width: 959px) {
	section.news > span {
		position: sticky;
		float: right;
		right: 0;
		font-size: 1.4rem;
		line-height: 0;
	}
	section.news {
		padding: 0 20px;
		padding-bottom: 40px;
		margin-top: 40px;
	}
	.news_wrap {
		/* 		padding: 0 20px;
		padding-bottom: 10px; */
	}
}

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

/* Page etc ============================================================================

FOOTER

====================================================================================== */
.grecaptcha-badge {
	visibility: hidden;
}

#re-top {
	position: fixed;
	bottom: 2%;
	right: 2%;
	z-index: 99;
	background-color: transparent;
}
.re-topB {
	position: relative;
	display: block;
	background-color: rgba(0, 0, 0, 0.6);
	color: rgba(255, 255, 255);
	text-decoration: none;
	letter-spacing: 2px;
	font-size: 10px;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 15px;
	border-radius: 5px;
	padding-top: 30px;
	box-sizing: border-box;
	box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.6);
}
.re-topB:before {
	content: "\25B2";
	position: absolute;
	top: 10px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 10px;
}
#re-top a:hover,
#re-top a:focus,
#re-top a:active {
	color: #fff;
}

/* section article etc ================================
FOOTER_コンテンツ top
==================================================== */
footer > * {
	padding: 0 75px;
	position: relative;
	font-weight: normal;
}
footer .footer_under,
footer .copyright {
	background: url(../../image/bg_element/pattern_dark/debut_dark.png);
}

.footer_top {
	max-width: 1024px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.footer_top > div {
	width: 50%;
	min-width: 370px;
	padding: 10px 0;
	min-height: 180px;
}
.footer_top > div h2 {
	text-align: center;
	font-size: 1.6rem;
}
.sns .sns_wrap {
	width: 80%;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #777;
	text-align: center;
	border-radius: 2px;
	height: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url(../image/parts/bg_patternA.png);
}
.sns p {
	line-height: 2rem;
}

.contact h2 {
	font-weight: 700;
}
.contact .contact_wrap {
	width: 80%;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 10px;
	text-align: center;
	position: relative;
	line-height: 2rem;
}
.contact .contact_wrap a {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 20px;
	bottom: -60px;
	left: 50%;
	transform: translate(-50%, 0);
	border-radius: 2px;
	background: rgba(0, 102, 192, 0.8);
	outline: 1px solid #fff;
	outline-offset: -3px;
	color: #fff;
	-webkit-transition: all 0.1s;
	transition: all 0.1s;
	box-shadow: 0px 8px 16px -2px rgba(10, 10, 10, 0.1),0px 0px 0px 1px rgba(10, 10, 10, 0.02);
}
.contact .contact_wrap a:hover {
	background: rgba(0, 102, 192, 1);
}
.contact .contact_wrap a i {
	font-size: 1rem;
	padding-left: 10px;
}



/* section article etc ================================
FOOTER_コンテンツ under
==================================================== */
#footer {
    // background: #082752;
    background: #2255A1;
	.footer_under {
		display: flex;
		align-items: center;
		height: calc(75px + 20px);
		.logo_wrap {
			// height: 55px;
			position: absolute;
			a {
				display: inline-block;
				height: inherit;
				img {
					max-width: 300px;
				}
			}
		}
		.sitemap {
			margin: 0 auto;
			a {
				display: inline-block;
				color: #fff;
				/* 	width: 80px; */
				padding: 5px;
				text-align: center;
				/* height: 100%; */
			}
		}
	}
	.copyright {
		position: absolute;
		left: 50%;
		transform: translate(-50%, -20px);
		color: #ddd;
		width: fit-content;
		p {
		line-height: 20px;
		}
	}
}


@media screen and (max-width: 959px) {
	footer > * {
		padding: 0 20px;
	}
	.logo_wrap {
		height: 45px;
	}

}
@media screen and (max-width: 799px) {
	.footer_under {
		flex-direction: column;
		height: calc(105px + 20px);
	}
	.sitemap {
		padding: 15px 0;
	}
	.sitemap a {
		width: 78px;
		padding: 5px 0;
	}
	.logo_wrap {
		position: initial;
		order: 2;
	}
}
@media screen and (max-width: 599px) {
}



/* Page etc ============================================================================

企業情報ページ　about（ID:about）

====================================================================================== */
main#about {
	position: relative;
}
main#about:before {
	position: absolute;
	content: "";
	height: calc(100% - 100px);
	width: 100%;
	background: url(../../image/bg_element/pattern_light/crossword.png) repeat center top / auto auto;
	/* filter: opacity(0.6); */
	z-index: -1;
}

main#about .content_wrap {
	max-width: 959px;
	margin: 0 auto;
}

main#about section.kv {
	margin-bottom: 40px;
}
main#about section.kv img {

}
main#about .kv-container.kv-bg {
	/* background: url(http://koikekikou.co.jp/wp-content/themes/wp_theme_koike-kikou/image/dummyImg_02.jpg;); */
	background: url(../../image/bg_element/pattern_dark/debut_dark.png);
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	/*     height: 200px; */
	height: 12.5vw;
	min-height: 110px;
	/* background-position: bottom 10px right 0; */
	/* background-size: cover; */
	/* background-attachment: fixed; */
	display: flex;
	justify-content: center;
	align-items: center;
}
main#about .kv-container.kv-bg h2 {
	color: #ddd;
	font-size: clamp(22px, 2vw, 24px);
	letter-spacing: 2px;
	font-family: 'Yuji Syuku';
	text-shadow: 3px 3px 0 rgba(255,255,255,0.2);
}


main#about section.statement {
	margin-bottom: 40px;
	min-height: 25vh;
	display: flex;
	align-items: center;
}
main#about .statement-container {
	max-width: 599px;
	margin: 0 auto;
	font-size: clamp(14px, 2vw, 18px);
	text-align: center;
}
main#about .statement-container h3 {
	font-size: clamp(18px, 2vw, 24px);
	font-family: 'Yuji Syuku';
	padding: 10px 0px;
	margin-bottom: clamp(30px, 8vw, 50px);
	position: relative;
}
main#about .statement-container h3:after {
	position: absolute;
	content: "";
	width: 1px;
	height: clamp(30px, 8vw, 50px);
	background: #00000080;
	left: calc(50% - 1px);
	top: 100%;
}
main#about .statement-container p {
	padding: 10px;
}

main#about section.president-msg {
	line-height: 2.2rem;
	font-size: clamp(14px, 2vw, 18px);
	text-align: justify;
	padding: 5px 1vw;
	margin-bottom: 40px;
}
main#about section.president-msg > div:not(:last-child) {
	display: flex;
	margin-bottom: 20px;
}
main#about section.president-msg img {
	border-radius: 2px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
	filter: saturate(0.6);
}

/* profile */
main#about .profile-container > div {
	width: 50%;
}
main#about .president-img-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}
main#about .president-img-wrap img {
	max-width: 55%;
}
main#about .profile-wrap {
	font-size: clamp(14px, 2vw, 16px);
}
main#about .profile-wrap span {
	font-size: clamp(10px, 2vw, 14px);
}
main#about .profile-wrap dl {
	display: flex;
	margin-bottom: 10px;
}
main#about .profile-wrap dt {
	font-weight: 500;
	min-width: 75px;
	margin-right: 10px;
	text-align-last: justify;
}
main#about .profile-wrap dd {
}

/* president-msg */
main#about .president-msg p {
	line-height: 2;
}

main#about section.president-msg > div.pm-03 {
	flex-direction: row-reverse;
}
main#about section.president-msg > div.pm-03 img {
	width: 35%;
}
main#about section.president-msg > div.pm-03 p {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 10px;
}

main#about section.president-msg > div.pm-06 img {
	width: 40%;
}
main#about section.president-msg > div.pm-06 p {
	display: flex;
	align-items: center;
	padding: 10px;
}
main#about section.president-msg > div.president-signe {
	width: fit-content;
	margin-left: auto;
	font-family: 'Yuji Syuku';
}

/* com-summary */
main#about section.com-summary-wrap {
	background: url(../../image/bg_element/pattern_dark/debut_dark.png);
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding-top: 10%;
	padding-bottom: 10%;
	margin-bottom: -1px !important; /* 余白マイナスマージン */
	-webkit-clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0% 100%);
}
main#about .com-summary-wrap > div {
	max-width: 959px;
	margin: 0 auto;
	color: #ddd;
	padding: 10px 1vw;
}
main#about .com-summary-wrap > div:not(:last-child) {
	margin-bottom: 20px;
}
main#about .com-summary-wrap h3 {
	font-size: 1.6rem;
	margin-bottom: 10px;
}

main#about .com-summary {
	font-size: clamp(12px, 2vw, 14px);
	font-size: 14px;
	display: flex;
	flex-wrap: wrap;
}
main#about .com-summary h3 {
	width: 100%;
	text-align: center;
	position: relative;
	font-size: clamp(18px, 2vw, 24px);
	font-family: 'Yuji Syuku';
	padding: 10px;
	margin-bottom: clamp(30px, 8vw, 50px);
}
main#about .com-summary h3:after {
	position: absolute;
	content: "";
	width: 1px;
	height: clamp(30px, 8vw, 50px);
	background: #dddddd;
	left: calc(50% - 1px);
	top: 100%;
}


main#about .com-summary > table {
	width: calc(50% - 4px);
	margin: 2px;
	margin-top: 10px;
}
main#about .com-summary th {
	font-weight: 500;
	padding: 5px;
	min-width: 80px;
}
main#about .com-summary td {
	padding: 5px;
	min-width: 235px;
}

main#about table,
main#about table th,
main#about table td {
	border-collapse: collapse;
	border: 1px solid #eee;
}
main#about table th,
main#about table td {
	vertical-align: middle;
}


main#about .com-works p {
	line-height: 1.5;
	text-indent: 6px;
}


main#about .com-history > div {
	display: flex;
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	width: fit-content;
}
main#about .com-history h4 {
	margin-right: 10px;
}


@media screen and (max-width: 599px) {
	main#about section.statement {
		margin-bottom: 0px;
	}
	main#about section.president-msg > div:not(:last-child) {
		flex-direction: column-reverse;
	}
	main#about .profile-container > div {
		width: 100%;
		margin-top: 10px;
	}
	main#about section.president-msg > div.pm-03 img {
		width: calc(100vw - 2vw);
		height: 200px;
		object-fit: cover;
		-webkit-clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
		margin-bottom: 30px;
	}
	main#about section.president-msg > div.pm-06 img {
		width: calc(100vw - 2vw);
		height: 200px;
		object-fit: cover;
		-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 90%);
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 90%);
	}

	main#about .com-summary {
		flex-direction: column;
		align-items: center;
	}
	main#about .com-history > div {
		display: inline-block;
	}
	main#about .com-history h4 {
		margin-right: 0px;
		margin-bottom: 5px;
	}
}



/* Page etc ============================================================================

事業内容ページ　works（ID:works）

====================================================================================== */
main#works .page-header {
	background: url(../image/dummyImg_01.jpg);
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 20px;
	/* height: 200px; */
	height: 12.5vw;
	min-height: 110px;
	background-position: bottom 10px right 0;
	background-size: cover;
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
}
main#works .head-container h2 {
	color: #ddd;
	font-size: clamp(22px, 2vw, 24px);
	letter-spacing: 2px;
	font-family: 'Yuji Syuku';
	text-shadow: 3px 3px 0 rgba(255,255,255,0.2);
	position: relative;
}
main#works .head-container h2:after {
	position: absolute;
	content: "";
}


main#works .content_wrap {
	max-width: 959px;
	margin: 0 auto;
}

main#works section.works-list-wrap {
	margin-bottom: 60px;
}
main#works .list-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
main#works .list-container .list-item {
	padding: 1vw;
	margin: min(1vw, 10px);
	max-width: calc(50% - 20px);
	min-width: 360px;
	position: relative;
}
main#works .list-container .list-item:before {
	position: absolute;
	content: attr(data-category);
	background: #e6232a;
	color: #fff;
	font-weight: 500;
	padding: 5px 20px 5px 10px;
	top: calc(1vw - 5px);
	left: calc(1vw - 5px);
	-webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}
main#works .list-container .list-item:after {
	position: absolute;
	content: attr(data-category);
	background: #e6232a;
	color: #fff;
	font-weight: 500;
	padding: 5px 20px 5px 10px;
	top: calc(1vw - 5px);
	left: calc(1vw - 5px);
	-webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}
/* main#works .list-container .list-item h3 {
    position: absolute;
	content: "";
    background: #e6232a;
    color: #fff;
    font-weight: 500;
    padding: 0px 20px 0px 10px;
    height: 30px;
    line-height: 30px;
    top: calc(1vw - 5px);
    left: calc(1vw - 5px);
    -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}
main#works .list-container .list-item span {
    position: relative;
}
main#works .list-container .list-item span:after {
    position: absolute;
	content: "";
} */

main#works .list-container .list-item img {
	height: 280px;
	width: 100%;
	object-fit: cover;
	border-radius: 2px;
}
main#works .list-container .work-txt {
	padding: 1%;
	margin-bottom: 5px;
	text-align: justify;
	line-height: 2.5rem;
}
main#works .list-container a {
	display: block;
	width: fit-content;
	margin-left: auto;
}


@media screen and (max-width: 599px) {
	main#works .list-container {
		flex-direction: column;
		align-content: center;
	}
	main#works .list-container .list-item {
		padding: 1vw;
		margin: min(1vw, 10px);
		max-width: calc(95% - 20px);
	}
}



/* Page etc ============================================================================

事業詳細ページ　works/w_detail_xx（ID:w_detail）

====================================================================================== */
/* section article etc ================================
共通
==================================================== */
main#w_detail {
	.content_wrap {
		max-width: 959px;
		margin: 0 auto;
		min-height: calc(100vh - 100px);
		.page-header {
			.head-container {
				h2 {
					// color: #ddd;
					font-size: clamp(22px, 2vw, 24px);
					letter-spacing: 2px;
					font-family: 'Yuji Syuku';
					text-shadow: 3px 3px 0 rgba(255,255,255,0.2);
					position: relative;
					&:after {
						position: absolute;
						content: "";
					}
				}
			}
		}
		.content-prologue {
			margin-bottom: 30px;
			padding: 0px 2vw;
			h3 {
				font-size: clamp(18px, 2vw, 24px);
				font-family: 'Yuji Syuku';
				padding: 10px 0px;
				margin-top: clamp(20px, 5vw, 30px);
				margin-bottom: clamp(20px, 5vw, 30px);
				text-align: center;
			}
			.point {
				max-width: 75%;
				margin: 0 auto;
				border: 1px solid #555;
				padding: 20px 10px;
				border-radius: 2px;
				position: relative;
				h4 {
					position: absolute;
					left: 50%;
					top: 0;
					transform: translate(-50%, -50%);
					/*     font-size: 1.8rem; */
					font-size: clamp(16px, 2vw, 20px);
					white-space: nowrap;
					padding: 5px 2vw;
					background: #fff;
				}
				p {
					line-height: 3rem;
				}
				@media screen and (max-width: 599px) {
					max-width: 100%;
				}
			}
			ul {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				margin: 2rem auto;
				li {
					padding: 5px 15px;
				}
			}
		}
		.w-detail {
			margin-bottom: 30px;
			padding: 0px 2vw;
			> div:not(:last-child) {
				margin-bottom: 20px;
			}
			p {
				font-size: 1.6rem;
				line-height: 3rem;
				text-align: justify;
			}
		}
		.works-contact {
			padding: 0px 2vw;
			text-align: center;
			width: fit-content;
			margin: 0 auto;
			font-size: 1.6rem;
			margin-bottom: 30px;
			a {
				display: inline-block;
				width: 100%;
				padding: 5px;
				margin-top: 10px;
				font-size: 1.4rem;
				background: #555555;
				color: #fff;
				border-radius: 2px;
			}
		}
	}
}

/* section article etc ================================
w-detail-01 機械工具商/卸売業
==================================================== */
main#w_detail.w-detail-01 .page-header {
	background: url(../image/dummyImg_02.jpg);
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 20px;
	/* height: 200px; */
	height: 12.5vw;
	min-height: 110px;
	background-position: bottom 10px right 0;
	background-size: cover;
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* section article etc ================================
w-detail-02 Connect FOLK/映像制作
==================================================== */
main#w_detail.w-detail-02 .page-header {
	background: url(../image/dummyImg_03.jpg);
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 20px;
	/* height: 200px; */
	height: 12.5vw;
	min-height: 110px;
	background-position: bottom 10px right 0;
	background-size: cover;
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* section article etc ================================
w-detail-01 機械工具商/卸売業
==================================================== */
main#w_detail.w-detail-03 .page-header {
	background: url(../image/dummyImg_04.jpg);
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 20px;
	/* height: 200px; */
	height: 12.5vw;
	min-height: 110px;
	background-position: bottom 10px right 0;
	background-size: cover;
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* section article etc ================================
w-detail-01 機械工具商/卸売業
==================================================== */
main#w_detail.w-detail-01 {

}


/* Page etc ============================================================================

お問い合わせページ

====================================================================================== */
main {
	#page_contact {
		.page-header {
			height: 100px;
			border: 1px solid #ddd;
			border-width: 1px 0px;
			.inner {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			h2 {
				font-weight: 700;
				font-size: clamp(16px, 2vw, 18px);
				color: #333;
			}
			}
		}
		.contents-wrap {
			.contact-wrap {
				margin-top: 50px;
				> div {
					margin-top: 2rem;
					padding-bottom: 1rem;
					line-height: 2.5rem;
					text-align: justify;
				}
				h3 {
					font-weight: bold;
					padding-bottom: 1rem;
					margin-bottom: 1rem;
					color: #333;
					text-indent: 10px;
					position: relative;
					&::after {
					position: absolute;
					content: "";
					bottom: 0;
					left: 0;
					height: 2px;
					width: 100%;
					background-image: $gradation;
					}
				}
				ul li {
					list-style: disc;
					margin-left: 20px;
				}
				.contact-form-wrap {
					.contact-form {
						background: #eeeeee;
						padding: 10px 15px;
						margin: 0 auto;
						margin-top: 2rem;
						max-width: 550px;
						border-radius: 2px;
						input,
						textarea {
							background: #fff;
							margin: 4px 0px 8px;
							line-height: 25px;
							padding: 2.5px;
							padding-left: 7.5px;
							&::placeholder {
							font-size: 12px;
							}
						}
						textarea {
							width: 100%;
						}
						.submit {
							display: block;
							text-align: center;
							padding: 0px 20px;
							margin: 10px auto;
							letter-spacing: 0.5rem;
							text-indent: 0.5rem;
							font-weight: 700;
							background: transparent;
							color: #3987C7;
						}
						.wpcf7-spinner {
							display: none;
						}
					}
				}
			}
		}
	}
}