/*
Theme Name: Twenty Twenty child
Template: twentytwenty
*/

@charset "utf-8";


/*------ カスタマイズ用CSS （触らない） ------*/

body,input,textarea,button,.button,.faux-button,.wp-block-button__link,.wp-block-file__button,.has-drop-cap:not(:focus)::first-letter,.has-drop-cap:not(:focus)::first-letter,.entry-content .wp-block-archives,.entry-content .wp-block-categories,.entry-content .wp-block-cover-image,.entry-content .wp-block-latest-comments,.entry-content .wp-block-latest-posts,.entry-content .wp-block-pullquote,.entry-content .wp-block-quote.is-large,.entry-content .wp-block-quote.is-style-large,.entry-content .wp-block-archives *,.entry-content .wp-block-categories *,.entry-content .wp-block-latest-posts *,.entry-content .wp-block-latest-comments *,.entry-content p,.entry-content ol,.entry-content ul,.entry-content dl,.entry-content dt,.entry-content cite,.entry-content figcaption,.entry-content .wp-caption-text,.comment-content p,.comment-content ol,.comment-content ul,.comment-content dl,.comment-content dt,.comment-content cite,.comment-content figcaption,.comment-content .wp-caption-text,.widget_text p,.widget_text ol,.widget_text ul,.widget_text dl,.widget_text dt,.widget-content .rssSummary,.widget-content cite,.widget-content figcaption,.widget-content .wp-caption-text,th,td {
	font-size:medium;
}
:not(.alignwide):not(.alignfull).wp-block-archives, :not(.alignwide):not(.alignfull).wp-block-categories, .wp-block-code, :not(.alignwide):not(.alignfull).wp-block-columns, :not(.alignwide):not(.aligncenter):not(.alignright):not(.alignleft):not(.alignfull).wp-block-cover, :not(.alignwide):not(.aligncenter):not(.alignright):not(.alignleft):not(.alignfull).wp-block-embed, :not(.alignwide):not(.aligncenter):not(.alignright):not(.alignleft):not(.alignfull).wp-block-gallery, :not(.has-background):not(.alignfull):not(.alignwide).wp-block-group, :not(.alignwide):not(.aligncenter):not(.alignright):not(.alignleft):not(.alignfull).wp-block-image, :not(.aligncenter):not(.alignright):not(.alignleft).wp-block-latest-comments, :not(.aligncenter):not(.alignright):not(.alignleft).wp-block-latest-posts, :not(.alignwide):not(.alignfull).wp-block-media-text, .wp-block-preformatted, :not(.alignwide):not(.alignright):not(.alignleft):not(.alignfull).wp-block-pullquote, .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, :not(.alignwide):not(.alignfull).wp-block-video{
	margin-top:0;
}

html,body{
	height:100%
}
body{
  margin:0;
}
p {
	line-height:1.7;
}

/* デフォルトでキャレット非表示（選択は可） */
html, body, * {
  caret-color: transparent;
}

/* 入力欄や本物の編集領域だけはキャレット表示 */
input, textarea, [contenteditable="true"] {
  caret-color: auto; /* ここだけ縦線を表示 */
}
h4, .heading-size-4, h5, .heading-size-5, h6, .heading-size-6 {
 margin:2rem auto 2.5rem	
}

ul,ol,li {
	list-style:none;
	margin:0;
	padding:0;
}
a {
	color:#EF4444;
	text-decoration: none;	
} 
a:hover {
	text-decoration:underline;
}

html {
   -webkit-text-size-adjust: 100%; /* iOS Safari の自動拡大を防ぐ */
}
section {
	padding:8rem 0 6rem 0;
}
section > .inner,
#top_main .inner,
#under_title .inner,
.pankuzu > .inner{
	width:calc(100% - 60px);
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}


.m0 {	margin:0;}
.mt5 {	margin-top:5px;}
.mt10 {	margin-top:10px;}
.mt20 {	margin-top:20px;}
.mt30 {	margin-top:30px;}
.mr5 {	margin-right:5px;}
.mr10 {	margin-right:10px;}
.mr20 {	margin-right:20px;}
.mr30 {	margin-right:30px;}
.mb5 {	margin-bottom:5px;}
.mb10 {	margin-bottom:10px;}
.mb20 {	margin-bottom:20px;}
.mb30 {	margin-bottom:30px;}
.ml5 {	margin-left:5px;}
.ml10 {	margin-left:10px;}
.ml20 {	margin-left:20px;}
.ml30 {	margin-left:30px;}

.font-gray {
	color:#D4D4D8;
}
.font-darkgray {
	color:#A1A1AA
}


/* ボタン・ナビ */
#contact_btn,
#menu_btn {
	margin-bottom:0 !important;
}
#contact_btn a {
  height: 56px;
	position:fixed;
	top:30px;
	right:100px;
	z-index:10001;
	cursor:pointer;
	color:white;
	line-height:56px;
	border:1px solid white;
	border-radius:28px 28px 28px 28px;
	padding:0 15px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	transition:all 0.3s;

}
#contact_btn a i.pc {
	display:inline-block;
	background:#DC2626;
	padding:10px 12px;
	border-radius:50%;
	margin-left:10px;
}
#contact_btn a svg .st0{
	fill:#FFFFFF;
}
#contact_btn a svg.pc {
	display:inline-block;
	padding:5px;
	border-radius:50%;
	margin-left:10px;
	height:70%;
	background:#DC2626;
	transition:all 0.3s;
}
_:lang(x)+_:-webkit-full-screen-document, #contact_btn a svg.pc {
	padding:0 !important;
}
#contact_btn a:hover {
	text-decoration:none;
	background:#DC2626;
}
#contact_btn a:hover svg.pc {
	background:white;

}
#contact_btn a:hover svg .st0{
	fill:#DC2626;
}


#contact_btn a i.sp {
	display:none;
}
@media screen and (max-width:999px) {
#contact_btn a svg.pc,
#contact_btn a i.pc{
	display:none;
}
}
@media screen and (max-width:599px) {
#contact_btn a i.sp {
	display:inline-block;
}
}

#menu_btn a {
  width: 56px;
  height: 56px;
	position:fixed;
	top:12px;
	right:30px;
	z-index:10001;
	cursor:pointer;
	border-radius:28px;
	background:white;
}
#menu_btn a span{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 3px;
  margin: -2px 0 0 -10px;
  transition: .2s;
	background-color:#111827;
}
#menu_btn a span:before,
#menu_btn a span:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 3px;
  transition: .3s;
	background-color:#111827;
}
#menu_btn a span:before{
  margin-top: -10px;
}
#menu_btn a span:after{
  margin-top: 7px;
}
#menu_btn a.close span {
  background: transparent;
}
#menu_btn a.close span:before,
#menu_btn a.close span:after{
  margin-top: 0;
}
#menu_btn a.close span:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#menu_btn a.close span:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
@media screen and (max-width:999px) {
#contact_btn a {
  height: 50px;
	top:15px;
	right:77px;
	line-height:50px;
	padding:0 20px;
}
#menu_btn a {
  width: 50px;
  height: 50px;
	top:15px;
	right:15px;
}
}
@media screen and (max-width:599px) {
#contact_btn a {
	width:44px;
  height: 44px;
	padding:0;
	font-size:160%;
	display:flex;
	align-items:center;
	justify-content:center;
	right:70px;
}
#menu_btn a {
  width: 44px;
  height: 44px;
	top:8px;
	right:15px;
}
#contact_btn a i {
	display:inherit;
}
#contact_btn a span {
	display:none;
}
}

#menu_modal {
	background:rgba(0,0,0,0.45);
	backdrop-filter: blur(12px);
	width:100%;
	position:fixed;
	top:0;
	right:0;
	z-index:10000;
	overflow-y:auto;
	display:none;
	height:100vh;
	padding:55px 10px 20px 20px;
}
#menu_modal > div {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	max-width:1000px;
	background:#18181B;
	display:flex;
	padding:80px;
	width:75%;
}
#menu_modal > div img {
	width:356px;
	max-width:356px;
}
.menu-main_menu-container{
	width:100%;
}
#menu_modal ul {
	width:100% !important;
	border-top:1px solid #333333;
}
#menu_modal ul li{
	border-bottom:1px solid #333333;
	white-space:nowrap;
}
#menu_modal ul li a {
	display:block;
	color:white;
	text-decoration:none;
	padding:15px 0 10px 0;
	font-size:150%;
}
#menu_modal ul li a h2 {
	margin:0 0 15px 0;
	font-size:250%;
}
#menu_modal ul li a span {
	color:#DC2626;
}
@media screen and (max-width:1280px) {
#menu_modal > div {
	padding:70px;
	width:calc(100% - 100px);
}
}
@media screen and (max-width:999px) {
#menu_modal > div {
	padding:50px;
	width:calc(100% - 80px);
}
}
@media screen and (max-width:900px) {
#menu_modal > div img {
	width:100%;
}
}
@media screen and (max-width:599px) {
#menu_modal > div {
	padding:30px;
	flex-wrap:wrap;
	width:calc(100% - 60px);
}
#menu_modal > div > div {
		width:100%;
	}
#menu_modal ul li a {
	font-size:4vw;
}
}
.label-above .nf-field-element,
.label-below .nf-field-element {
	text-align:center;
}



.pankuzu {
	padding-top:20px;
	font-size:80%;
	color:gray;
}
.pankuzu a {
	color:inherit;
}


#page-top {
	position: fixed;
	bottom: 3px;
	right: 31px;
	display: block;
	z-index: 100;
}
#page-top a {
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
}
#page-top a:before,
#page-top a:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}

#page-top a:before{
width: 38px;
height: 38px;
}
#page-top a:after{
left: 9px;
top:-12px;
box-sizing: border-box;
width: 10px;
height: 15px;
border: 10px solid transparent;
border-bottom: 8px solid #fff;
}



/* メニューモーダル */
html,
body {
	height:100vh !important;
}
.menu-modal.active {
	left:auto;
	width:80%;
	max-width:400px;
}
.menu-modal{
	background:none;
	transition:opacity 0 ease-out;
}
.modal-menu{
	width:100%;
	left:0;
}
.menu-modal ul{
	width:100%;
}
.menu-modal-inner{
	background:rgba(255,255,255,0.8)
}

/* フェード */
.fadein {
    opacity : 0;
    transform : translate(0, 30px);
    transition : all 500ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

@media screen and (max-width:599px) {
.fadein {
    transform : translate(0, 20px);
}	
}

/* Flex */
ul.flex2,
ul.flex3,
ul.flex3-2,
ul.flex4,
.cat_blog_flex,
.under_flex{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.under_flex{ 
	margin-bottom:30px;
	}
ul.flex2 img,
ul.flex3 img,
ul.flex3-2 img,
ul.flex4 img{
	height:auto;
}
ul.flex2 li {
	width:calc(50% - 10px);
	margin-bottom:30px;
}
ul.flex2::after{
	content:"";
	display: block;
	width:calc(50% - 10px);
}
ul.flex3 li,
ul.flex3-2 li{
	width:calc(33% - 20px);
	margin-bottom:30px;
}
ul.flex3::after,
ul.flex3-2::after{
	content:"";
	display: block;
	width:calc(33% - 20px);
}

ul.flex4 li {
	width:calc(25% - 15px);
	margin-bottom:30px;
}
ul.flex4::before{
	content:"";
	display: block;
	width:calc(25% - 15px);
	order:1;
}
ul.flex4::after{
	display: block;
	width:calc(25% - 15px);
}

.under_flex > div:first-child {
	width:calc(45% - 40px);
}
.under_flex > div:last-child {
	width:55%;
}

.pc {    display: inherit;}
.tab {    display: none;}
.sp{    display: none;}

@media screen and (min-width:999px) {

}	
	
@media screen and (max-width:999px) {
ul.flex4 li {
	width:calc(33% - 10px);
	margin-bottom:25px;
}
ul.flex4::before{
	width:calc(33% - 10px);
}
ul.flex4::after{
	width:calc(33% - 10px);
}
ul.flex3-2 li {
	width:calc(50% - 10px);
	margin-bottom:25px;
}
ul.flex3-2::after{
	width:calc(50% - 10px);
}
ul.single {
	width:100%;	
}
.pc {    display: none;}
.tab {    display: inherit;}
.sp{    display: none;}
}

@media screen and (max-width:599px) {
ul.flex3 li {
	width:calc(50% - 10px);
	margin-bottom:25px;
}
ul.flex3::after{
	width:calc(50% - 10px);
}
ul.flex4 li {
	width:calc(50% - 10px);
	margin-bottom:25px;
}
ul.flex2::after,
ul.flex3::after,
ul.flex3-2::after,
ul.flex4::after{
	content:none;
}
ul.flex2.single li,
ul.flex3.single li,
ul.flex3-2.single li,
ul.flex4.single li {
	width:100%;
	margin-bottom:25px;
}
.pc {    display: none;}
.tab {      display: none;}
.sp{  display: inherit;}
}

/* ----------------------------------------------------------------------
 共通 横並び構成
---------------------------------------------------------------------- */
.flex_50_50,
.flex_60_40,
.flex_40_60,
.flex_70_30,
.flex_30_70{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	flex-wrap:wrap;
}
.flex_50_50 > div {
	width:calc(50% - 20px);
}
.flex_60_40 > div:first-child {
	width:calc(60% - 40px);
}
.flex_60_40 > div:nth-child(2) {
	width:40%;
}
.flex_40_60 > div:first-child {
	width:40%;
}
.flex_40_60 > div:nth-child(2) {
	width:calc(60% - 40px);
}
.flex_70_30 > div:first-child {
	width:calc(70% - 40px);
}
.flex_70_30 > div:nth-child(2) {
	width:30%;
}
.flex_30_70 > div:first-child {
	width:30%;
}
.flex_30_70 > div:nth-child(2)  {
	width:calc(70% - 40px);
}
.aliencenter {
	align-items:center;
}

@media screen and (max-width: 599px) {
.flex_50_50 > div,
.flex_40_60 > div:first-child,
.flex_40_60 > div:nth-child(2),
.flex_60_40 > div:first-child,
.flex_60_40 > div:nth-child(2),
.flex_30_70 > div:first-child,
.flex_30_70 > div:nth-child(2),
.flex_70_30 > div:first-child,
.flex_70_30 > div:nth-child(2) {
	width:100%;
	margin-bottom:30px;
}
.pc { display: none;}
.tab { display: none;}
.sp{ display: inherit;}
}
	
/* 画像拡大 */
.imgWrap {
	overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
	width:auto;
	height:auto;
	display:flex;
	justify-content:center;
	align-items:center;
}
a .imgWrap img {
	display: block;
	transform: scale(1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
	height:auto;
	max-height:100%;
	width:100%;
}
ul a .imgWrap img {
	object-fit: cover;
}
a:hover .imgWrap img {
	transform: scale(1.02);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}

/* header */
header {
	position:fixed;
	width:100%;
	z-index:9999;
	top:0;
	background:rgba(255,255,255,1)
}
header > div {
	padding:0 30px ;
	height:80px;
	display:flex;
	align-items:center;
}
header h1 {
	margin:0;
	color:white;
	font-size:100%;
	font-weight:normal;
	display:flex;
	align-items:center;
}
header h1 a:hover {
	opacity:0.8;
}
header h1 img{
	width:250px;
}

@media screen and (max-width:999px) {
header > div {
	padding:0 30px ;
	height:80px;
}
}
@media screen and (max-width:800px) {
	header h1 span{
		display:none;
	}
}
@media screen and (max-width:599px) {
header h1 img {
	width:200px;
	padding-right:0;
}
header > div {
	padding:0 20px ;
	height:60px;
}
}

/* footer */

.footer-top-visible .footer-nav-widgets-wrapper,
.footer-top-hidden #site-footer {
	margin-top:0;

}
footer {
	border-top:1px solid lightgray;
}
footer .inner {
	width:calc(100% - 80px);
	max-width:1280px;
	padding-top:30px;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	align-items:flex-start;
	justify-content: space-between;
}
footer a {
	color:inherit;
}
footer .inner ul:not(:first-child) {
	margin-left: 50px; /* 2個目以降を右に寄せる */
}
footer .inner ul:first-child {
	margin-right:auto;
	max-width:300px;
}
footer .inner ul li {
	font-size:86%;
	font-weight:300;
	line-height:1;
	margin-bottom:13px;
}
footer .inner h1,
footer .inner ul li strong {
	font-size:115%;
	font-weight:450;
}
footer .inner h1 {
	margin:0 0 13px 0;
}
footer .inner p.footer_read {
	font-weight:300;
	line-height:1.8;
}
footer .copyright {
	display:flex;
	justify-content:space-between;
	font-size:80%;
	font-weight:300;
	padding:15px 0;
	width:calc(100% - 80px);
	max-width:1280px;
	padding-top:30px;
	margin-left:auto;
	margin-right:auto;
}
footer .copyright  ul {
	display:flex;
	margin-right:auto;
	margin-left:0;
}
footer .copyright  ul li {
	margin-right:20px;
}
footer .copyright > div {
	margin-left:auto;
}

@media screen and (max-width:999px) {
}
@media screen and (max-width:799px) {
footer .inner {
	flex-wrap:wrap;
	justify-content:space-around;
}
footer .inner ul {
		margin:0
}
footer .inner ul:first-child {
	width:100%;
	display:block;
	max-width:100%;
	margin-bottom:30px;
}
footer .inner ul:not(:first-child) {
	margin-left: 0px;
}	
}
@media screen and (max-width:599px) {
footer .inner ul:nth-child(n+2) {
	display:none;
}
footer .copyright {
	padding-top:0px;
}
footer .copyright ul{
	display:none !important;
}
footer .copyright > div {
	margin-right:auto;
}
}
	
	
	
#btn_policy {
	position:fixed;
	right:20px;
	bottom:20px;
	background:#3F3F46;
	padding:15px;
	display:flex;
	align-items:stretch;
	font-size:80%;
	max-width:600px;
	z-index:1000;
}
#btn_policy > p {
	margin-bottom:0;
}
#btn_policy > a {
	background:#DC2626;
	color:white;
	padding:0 20px;
	white-space:nowrap;
	margin:0 0 0 10px;
	display:flex;
	align-items:center;
}
@media screen and (max-width:999px) {
}
@media screen and (max-width:599px) {
#btn_policy {
	right:10px;
	bottom:10px;
	padding:10px;
	font-size:70%;
	width:calc(100vw - 20px);
}
#btn_policy > a {
	padding:0 10px;
}
}

/* background */

/*
body.page-template,
body.archive,
body.single{
	background-image:url("/wp-content/themes/twentytwenty-child/images/under_back.jpg");
	background-size:cover;
	background-attachment:fixed;
	background-position:center center;
}
body.home {
	background-image:url("/wp-content/themes/twentytwenty-child/images/top/top_back.jpg");
	background-size:cover;
	background-attachment:fixed;
	background-position:center center;
}
*/


body.page-template:before,
body.archive:before,
body.single:before{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url("/wp-content/themes/twentytwenty-child/images/under_back.jpg") center no-repeat;
    background-size: cover;
}
body.home:before{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url("/wp-content/themes/twentytwenty-child/images/top/top_back.jpg") center no-repeat;
    background-size: cover;
}
@media screen and (max-width:599px) {
body.page-template:before,
body.archive:before,
body.single:before{
    background: url("/wp-content/themes/twentytwenty-child/images/under_back_sp.jpg") center center no-repeat;
    background-size: cover;
}
body.home:before{
    background: url("/wp-content/themes/twentytwenty-child/images/top/top_back_sp.jpg") center center no-repeat;
    background-size: cover;
}	
}



/* button */

.btn_sword a{
    background-size: cover;
    transition: background-color 0.3s ease;
    position: relative; /* 子要素の配置に必要 */
	color:white !important;
	padding:30px 0;
	display:inline-block;

}
.btn_sword a:hover {
	text-decoration:none !important;	
}
.btn_sword a::before {
    content: '';
    position: absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background: url("/wp-content/themes/twentytwenty-child/images/sword.svg") center center no-repeat;	
	background-size: auto 100%;
    background-position: center;
    transition: transform 0.5s ease; /* スムーズな回転 */
    z-index: -1; /* テキストの背面に配置 */
}
.btn_sword a:hover::before {
    transform: rotate(90deg); /* 360度回転 */

}

.btn_linkgray a {
	width:100%;
	text-align:center;
	background:#27272A;
	padding:20px 0;
	display:block;
	color:white !important;
}
.btn_arrow a{
	color:white;
	display:inline-block;
	padding:20px;
	min-width:400px;
	border:1px solid white;
	text-align:center;
}


/* 矢印ボタン */
.st1{
	fill:#fff;
}
#btn_arrow,
#btn_arrow_b{
	width: 600px; 
	max-width:100%;
	height:100px; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	border:2px solid white;  
	transform: scale(0.6); 
	position:relative;
}
#btn_arrow_b {
	transform: scale(0.7); 	
}
#btn_arrow01,
#btn_arrow01_b{
	margin-left: 30px; 
	margin-right: 20px; 
	font-size:180%; 
	color:white;
}
#btn_arrow01_b{
	font-size:150%; 
}
#contact_link a,
#footer_contact_link a{
	text-decoration:none !important;
}


@media screen and (max-width:999px) {
#btn_arrow,
#btn_arrow_b{
	margin-left:auto;
	margin-right:auto;
}
.btn_arrow {
	width:100%;
}
.btn_arrow a {
	min-width:100%;
	display:block;
}	
}
@media screen and (max-width:599px) {
#btn_arrow,
#btn_arrow_b{
	transform: scale(0.9); 
	width: 100%;
	height:18vw;
	margin-top:40px;
	border:1.2px solid white;  
}
#btn_arrow01,
#btn_arrow01_b{
	font-size:4vw;
	margin-left: 20px; 
	margin-right: 10px; 
}
}



/* under - project */
#under_post {
	padding-top:0;
}

#under_main,
#under_post #under_title {
	height:40vh;
	max-height:400px;
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center; /* 垂直方向に中央寄せ */
	background-position:center center;
	background-size:cover;
	margin-top:80px;
}
#under_main h1,
#under_post #under_title h1 {
	font-size:250%;
	font-weight:500;
	letter-spacing:0.15em;
	display:inline-block;
	color:white;
	background:#48aa4f;
	padding:10px 20px;
	line-height:1.5;
	margin:0;
}

#under_post #under_title {
	background-image:url("/wp-content/themes/twentytwenty-child/images/pict/001.jpg")
}

@media screen and (max-width:999px) {
#under_main,
#under_post #under_title {
	margin-top:80px;
}
#under_main .inner,
#under_title .inner {
	margin-left:0;
}
#under_main h1,
#under_post #under_title h1 {

}
}
@media screen and (max-width:599px) {
#under_main,
#under_post #under_title {
	margin-top:60px;
}
#under_post #under_title {
	height:200px;
	min-height:auto;
}
#under_main h1,
#under_post #under_title h1 {
	font-size:5vw;

}
}

#under_post .flex_menu{
	justify-content:space-between;
	align-items:flex-start;
	padding-bottom:5em;
	margin-top:5em;
}
#under_post .flex_menu > div:first-child {
	margin-right:2em;
}
#under_post .flex_menu > div:first-child ul {
	display:flex;
	justify-content:center;
	gap:20px;
}
#under_post .flex_menu > div:first-child ul li {
	margin-bottom:0.5em;
}
#under_post .flex_menu > div:first-child ul li:last-child {
	margin-bottom:0;
}
#under_post .flex_menu > div:first-child ul li a {
	display:block;
	padding:0.5em 1em;
	line-height:1.3;
	color:var(--bgcolor03);
	border:var(--border02);
	border-radius:10px;
}
#under_post .flex_menu > div:first-child ul li a span:after {
	content:"\2192";
}
#under_post .flex_menu > div:first-child ul li a:hover {
	text-decoration:none;
	background:var(--bgcolor02);
	transition:all 0.3s;
}
#under_post .flex_menu > div:nth-child(2){
	margin:2em auto 0 auto;
}
#under_post .flex_menu > div:nth-child(2) ul{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:25px;
}
#under_post .flex_menu > div:nth-child(2) ul li{
	margin-bottom:20px;
	border:var(--border01);
}
#under_post .flex_menu > div:nth-child(2) ul li .box {
	padding:0 20px 20px 20px;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
}
#under_post .flex_menu > div:nth-child(2) ul li a {
	color:inherit;
	text-decoration:none;
}
#under_post .flex_menu > div:nth-child(2) ul li h3 {
	margin:0 0 10px 0;
	font-weight:500;
	font-size:150%;
	line-height:1.5;
}
#under_post .flex_menu > div:nth-child(2) ul li .date{
	margin-top:13px;
	margin-bottom:0;
	line-height:1.2;
}
#under_post .flex_menu > div:nth-child(2) ul li p.read {
	font-size:90%;
	font-feature-settings:"palt";
}
#under_post .flex_menu > div:nth-child(2) ul li a p.link {
	border:var(--border01);
	text-align:center;
	margin:auto auto 0 auto;
	width:100%;
}
#under_post .flex_menu > div:nth-child(2) ul li a:hover p.link {
	background: var(--bgcolor01);
	transition:all 0.3s;
}

@media screen and (max-width:999px) {
#under_post .flex_menu{
	flex-wrap:wrap;
}
#under_post .flex_menu > div:first-child {
	width:100%;
	margin-right:0;
	margin-bottom:20px;
}
#under_post .flex_menu > div:first-child ul {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:20px;
	padding:1em;
}
#under_post .flex_menu > div:first-child ul li:nth-child(3),
#under_post .flex_menu > div:first-child ul li:last-child {
	margin-bottom:0;
}
#under_post .flex_menu > div:first-child ul li {
	margin-bottom:0;
}
#under_post .flex_menu > div:first-child ul li a {
	padding:1em 0;
	text-align:center;
}
#under_post .flex_menu > div:nth-child(2) ul li{
	margin-bottom:30px;
}
}

@media screen and (max-width:599px) {
#under_post .flex_menu > div:nth-child(2) ul li{
	width:100%;
}
#under_post .flex_menu > div:first-child ul {
	grid-template-columns: repeat(2, 1fr);
}
#under_post .flex_menu > div:first-child ul li {
	margin-bottom:0;
	text-align:center;
}
#under_post .flex_menu > div:nth-child(2) ul li h2 {
	font-size:125%;
}	
}


/* single*/

body.single #under_post .flex_menu,
#under_content{
}
body.single #under_post .flex_menu h2,
#under_content h2{
	font-size:180%;
	font-weight:500;
	margin:0;
	line-height:1.6;
}
#under_content h2{
	font-size:400%;
}
body.single #under_post .flex_menu h3 {
	font-size:140%;
	font-weight:500;
	margin:15px 0 10px 0;
	text-decoration:underline;
}
body.single #under_post .flex_menu p {
	margin-bottom:0;
}
body.single #under_post .flex_menu img {
	margin-top:20px;
}
body.single .single_box,
#under_content .box{
	margin-top:13px;
	padding:20px;
	background: var(--bgcolor01);
	border: var(--border01);
}
body.single .single_box img {
	margin-bottom:20px;
}
body.single .date,
body.single .single_box p {
	margin-bottom:0;
}

body.single #single_about h4 {
	font-size:100%;
	margin:30px 0 15px 0;
}
body.single #single_about p{
	font-size:80%;
	margin:0;
}
#single_sns{
	display:flex;
	justify-content:center;
	align-items:center;
}
#single_sns div{
	display:inline-block;
	color:white;
	cursor:pointer;
	margin-left:20px;
	font-size:250%;
}
#single_sns p {
	margin:0 30px 0 0;
}



/* project */

#project_post {
	max-width:800px;
}
.project_content {
	margin-top:1.5em;
	padding-bottom:1.5em;
	border-bottom:var(--border01);
}
.project_content_last {
	margin-top:1.5em;
}




/* contact */

#contact_content {
		margin-top:7em;
}
#contact_content h1 {
	font-size:250%;
	font-weight:500;
	margin:0 0 1em 0;
}
#contact_content > div > div:nth-child(1) ul li{
	margin-top:20px;
}
#contact_content > div > div:nth-child(2) {
	background:#18181B;
	padding:3em;
	text-align:left;
}
#contact_content > div > div:nth-child(2) input[type="text"],
#contact_content > div > div:nth-child(2) input[type="email"] {
	width:100%;
	color:black;
	font-size:125%;
	margin:10px 0 20px 0;
}
#contact_content > div > div:nth-child(2) input[type="submit"]{
	width:100%;
	background:#DC2626;
}
#contact_content .required{
	background:#DC2626;
	padding:0 10px;
}



@media screen and (max-width:999px) {
#contact_content > div > div:nth-child(2) {
	padding:1.5em;
}
#contact_content > div > div:nth-child(2) input[type="text"],
#contact_content > div > div:nth-child(2) input[type="email"] {
	font-size:110%;
	padding:12px;
}
}
@media screen and (max-width:599px) {
#contact_content > div > div:nth-child(2) {
	padding:1em;
}
#contact_content > div > div:nth-child(2) input[type="text"],
#contact_content > div > div:nth-child(2) input[type="email"] {
	padding:10px;
}
}


.shadow {
	 text-shadow: -1px -1px 2px rgba(0,0,0,0.6), 3px 3px 1px rgba(0,0,0,0.6)
}

/* btn */
.btn01 {
	text-align:center;
	margin-top:2em;
	position:relative;
	z-index:999;
	width:100%;
}
.btn01 a {
	border:var(--border02);
	display:inline-block;
	color:inherit;
	padding:13px 20px;
	min-width:50%;
	font-size:120%;
	font-weight:500;
	line-height:1;
	align-items:center;
	justify-content:center;
}
.btn01 a:hover {
	background:var(--bgcolor01);
	transition:all 0.3s;
	text-decoration:none;
	opacity:0.9;
}

@media screen and (max-width:999px) {
.btn01 a {
	min-width:70%;
}
}
@media screen and (max-width:599px) {
.btn01 a {
	min-width:80%;
}
}






/* home(TOP) */

#top_main  {
	padding:0;
}
#top_main .outer {
	min-height:100vh;
	background-image:url("/wp-content/themes/twentytwenty-child/images/top/top_main.jpg");
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
	position:relative;
	display:flex;
	align-items:center;
}

#top_main .video.outer {
  min-height: 100.1vh;
  background-image: none;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden; /* はみ出した動画をカット */
}

/* 背景動画 */
#top_main .video.outer .bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 画面を確実に埋める */
  min-width: 100%;
  min-height: 100.1%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;   /* 実質 background-size: cover と同じ役割 */
  z-index: 0;
}


#top_main .inner {
	display:flex;
	flex-direction: column;		
}
#top_main h2 {
	z-index:11;
	font-size:250%;
	font-weight:500;
	line-height:1.4;
}
#top_main h2 > div {
	width:100%;
	text-align:center;
}
@media screen and (max-width:999px) {
#top_main h2 {
	font-size:4.5vw;
	margin:0;
}
#top_main .inner {
	margin-left:0;
}
}
@media screen and (max-width:599px) {
#top_main h2 {
	font-size:6vw;
}
}


/* TOPスライダー  */
#top_main3 {
	padding-top:0;
	padding-bottom:0;
	position: relative; 
}
.top3_catch {
	width:30%;
	position:absolute;
	right:0;
	transform: translateY(0);
	
	padding:3em;
	background:var(--green);
	z-index:101;
}
#top_main3 ul.top3_num {
	display:flex;
	gap:2em;
	margin:20px;
}
#top_main3 ul li {
	font-size:200%;
	font-weight:bold;
	text-align:center;
}
#top_main3 ul li span {
	font-size:50%;
	font-weight:normal;
	display:block;
}

.hero-wrapper {
  padding: 0;
  box-sizing: border-box;
}
.hero-slider {
	width: 85vw;
	height:50vw;
	overflow:hidden;
}
.hero-slider img,
.hero-slider video {
	width: 110%;
	height: 110%;
	max-height:50vw;
	object-fit: cover;
}
.slick-dotted.slick-slider {
	margin-bottom:0 !important;
}
.slick-slide {
  margin: 0;
}

/* スライダーの親がある場合（例 .hero-wrapper）で高さを決めておくと安定します */
.hero-wrapper {
  display: flex;
  align-items: stretch;      /* 高さを揃える */
}

/* スライダー本体を親の高さにフィット */
.hero-slider {
  position: relative;

  height: 100%;
}

.hero-slider .slick-list,
.hero-slider .slick-track,
.hero-slider .slick-slide {
  height: 100%;
}

/* 画像＆動画を「枠いっぱい＋トリミング」で表示 */
.hero-slider img,
.hero-slider video {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* これで上下左右に余白が出ない */
  display: block;
}

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



#top_catch,
#top_news {
	background: var(--bgcolor01);
	border-top: var(--border01);
	border-bottom: var(--border01);
}
#top_news h2 {
	margin:0 0 0.5em 0;
	font-size:130%;
	font-weight:500;
}
#top_news .inner {
	max-width:800px;
}
#top_news ul {
	border-top:1px solid gray;
}
#top_news ul li{
	border-bottom:1px solid gray;
}
#top_news ul li a {
	color:inherit;
	display:block;
	padding:13px 0;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
}
#top_news ul li a span:first-child {
	width:7em;
	display:inline-block;
}
#top_news ul li a:hover {
	text-decoration:none;
}
#top_news ul li a span:last-child {
	width:calc(100% - 9em) ;
	display:inline-block;
}
#top_news ul li a:hover span:last-child  {
	text-decoration:underline !important;
}

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



/* 位置決めだけ担当（高さは気にしない） */
.mv-catch {
  position: absolute;
  top: 17vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* 1文ぶんの箱。これが黒帯＆アニメーションの単位 */
.mv-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);	
  background: black;
  color: white;
  font-size: 210%;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  padding: 0.5em 1em;
  white-space:nowrap;
}

@media screen and (max-width:999px) {
.mv-catch {
  top: 20vh;
	}
.mv-inner {
	line-height:1.6;
	font-size: 3.5vw;
}
}
@media screen and (max-width:799px) {
.mv-catch {
  position: absolute;
  top: 50%;
  left: 12.5%;
  transform: translate(-50%, -50%);
}
.mv-inner {
  font-size: 4.3vw;
	writing-mode: vertical-rl;
	text-align:left;
}
}


/* service_navi */

#service_navi {
	padding-top:0;
}
#service_navi .inner {
	max-width:800px;
}
#top_main.top4 .outer {
	background:none;
}

#top_navi ul,
#service_navi ul,
.top4 ul{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
#top_navi ul li,
#service_navi li,
.top4 li{
	display:flex;
	align-items:center;
	justify-content:center;
	width:calc(50% - 15px);
	margin-bottom:30px;
}
#top_navi ul li .imgWrap img,
.top4 ul li .imgWrap img{
	background-size:101% auto;
}
#service_navi li .imgWrap,
#service_navi li .imgWrap img {
	height:35vw !important;
	min-height:300px;
}
.top4 ul li .imgWrap,
.top4 ul li .imgWrap img{
	height:100vh !important;
}

/* 文字の枠 */
.top4 ul li {
	position:relative;
}
.top4 ul li a .imgWrap > div {
  position: absolute;
	bottom:0%;
  left: 50%;
  transform: translate(-50%, -10%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 28vw;
  height: 28vw;
	background-color:rgba(0,0,0,0.3);
}
.top4 ul li a .imgWrap > div::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;
}
@media(min-width: 1280px){
  .top4 ul li a .imgWrap > div {
    width: 360px;
    height: 360px;
  }
}
@media(max-width: 799px){
.top4 ul li a .imgWrap > div {
	bottom:auto;
	top:50%;
	left:auto;
	right:0;
  transform: translate(-10%, -50%);
  width: 28vh;
  height: 28vh;
	max-width:40vw;
}
}
@media(max-width: 599px){
  .top4 ul li a .imgWrap > div {
  }
}

#top_navi ul li a,
#service_navi li a,
.top4 ul li a{
	display:block;
	width:100%;
}
#top_navi ul li a span,
#service_navi li a div > div,
.top4 ul li a div > div{	
	position:absolute;
	z-index:100;
	color:white;
	font-size:200%;
	font-weight:500;
	text-shadow: -1px -1px 3px rgba(0,0,0,0.4), 2px 2px 4px rgba(0,0,0,0.5)
}
#service_navi li a div > div,
.top4 ul li a div > div{
	text-align:center;
}
#service_navi li a div > div h3,
.top4 ul li a div > div h3{
	text-align:center;
	font-weight:500;
	margin:0 0 0.5em 0;
	position:relative;
	line-height:1;
}
#service_navi li a div > div > p,
.top4 ul li a div > div > span{
	font-size:65%;
	margin:0;
	line-height:1;
}
#top_navi ul li a span::after,
#service_navi li a div > div h3::after,
.top4 ul li a div > div h3::after{
  content:"";
	position:absolute;
	left:0; 
	right:0; 
	bottom:-0.25em;
	height:2px; 
	background:currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
#top_navi ul li a:hover span::after,
#service_navi li a:hover div > div h3::after,
.top4 ul li a:hover div > div h3::after{ 
	transform: scaleX(1); 
}
#top_navi ul li .imgWrap img,
#service_navi li .imgWrap img{
	overflow:hidden;
}
#service_navi p {
	margin:0;
}
#service_navi li,
.top4 li{
	width:calc( 100% / 3);
}

@media screen and (max-width:799px) {
.top4 li h3 {
		font-size:140%;
	}
.top4 ul{
		margin:60px 0  auto 0;
	}	
.top4 li{
	width:100%;
	margin-bottom:0;
}
.top4 ul li .imgWrap,
.top4 ul li .imgWrap img{
	height:calc(( 92vh - 60px ) / 3 ) !important;
}
}


@media screen and (max-width:599px) {
#top_navi ul li,
#top_navi ul li .imgWrap{
	width:100%;
}
.top4 ul li a .imgWrap > div{
	max-height:160px;		
}	
.top4 ul li a div > div h3{
	font-size:90%;
}
.top4 ul li a div > div > span{
	font-size:50%;
}
#service_navi li,
#service_navi li .imgWrap,
#service_navi li .imgWrap p{
	width:100%;
	margin:0;
}
#service_navi li .imgWrap,
#service_navi li .imgWrap img {
	height:50vw !important;
	min-height:auto;
	max-height:150px;
}
}


/* recruit */

.recruit_content .inner,
#recruit_link .inner,
#recruit_under01 .inner,
#recruit_under02 .inner{
	max-width:800px;
}

.recruit_content h2,
#recruit_link h2,
#recruit_under01 h3{
	font-weight:450;
	font-size:180%;
	margin:0 0 1em 0;	
	text-decoration:underline;
	line-height:1.6;
}
#recruit_under01 h2 {
	color: var(--green);
	font-size:3.2rem;
	margin:0 0 1em 0;	
}
.recruit_content:nth-child(even),
#recruit_link,
#recruit_under02{
	background:var(--bgcolor01);
}
#recruit_link ul {
	margin:0 auto;
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:20px;
}
#recruit_link ul li {
	text-align:center;
}
#recruit_link ul li a {
	color:inherit;
	font-size:120%;
	display:block;
	border: var(--border01);
	padding:20px;
	border-radius:10px;
	background:white;
}
#recruit_link ul li a:hover {
	text-decoration:none;
	background-color: var(--bgcolor02);
	transition:all 0.3s;
}
#recruit_under02 table {
  border-collapse: separate;
  border-spacing: 10px;
	border:0;
	 margin: -10px; 
}
#recruit_under02 th {
	white-space:nowrap;
	background:var(--bgcolor02);
	border:0;
	font-weight:500;
	text-align:center;
	padding:1em;
}
#recruit_under02 td {
	background:white;
	border:0;
	padding:1em;
}

#recruit_contact .inner {
	padding:20px 0 40px 0;
	
}

@media screen and (max-width:599px) {
#recruit_link ul {
	grid-template-columns: repeat(2, 1fr);
}
#recruit_under02 th,
#recruit_under02 td {
    display: block;
    width: 100%;
}
}


/* service-philosophy */
.service_content .inner,
.philosophy_content .inner {
	max-width:800px;
}
.service_content h2,
.philosophy_content h2{
	font-weight:450;
	font-size:180%;
	text-decoration:underline;
	margin:0 0 1em 0;
}
.philosophy_content h3{
	font-size:180%;
	font-weight:500;
	font-feature-settings: "palt";
}
.service_content:nth-of-type(odd),
#service02.service_content{
	background: var(--bgcolor01); 
	border-top: var(--border01);
	border-bottom: var(--border01);
}
#service01.service_content,
#service03.service_content {
	background:none;
	border:none;
}
.philosophy_content:nth-child(even){
	background: var(--bgcolor01);
	border-top: var(--border01);
	border-bottom: var(--border01);
}
#project_network_list.service_content:last-child .inner,
#project_electrical_list.service_content:last-child .inner,
#project_interior_list.service_content:last-child .inner {
	max-width:1000px;
}
.service_content:last-child ul{
	display:flex;
	justify-content:space-between;
}
.service_content:last-child ul li{
	width:calc(100% / 3 - 17px);
	margin-bottom:20px;
	background:white;
}
.service_content:last-child ul li a {
	color:inherit;
}
.service_content:last-child ul li a:hover {
	text-decoration:none;
}
.service_content:last-child ul li h3 {
	margin:0 0 10px 0;
	font-weight:500;
	font-size:150%;
	line-height:1.5;
}
.service_content:last-child ul li .box {
	padding:0 20px 20px 20px;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
}
.service_content:last-child ul li a p.date {
	margin-top:13px;
	margin-bottom:0;
	line-height:1.2;
}
.service_content:last-child ul li p.read {
	font-size:90%;
	font-feature-settings:"palt";
}
.service_content:last-child ul li a p.link {
	border:var(--border01);
	text-align:center;
	margin:auto auto 0 auto;
	width:100%;
}
.service_content:last-child ul li a:hover p.link {
	background: var(--bgcolor01);
	transition:all 0.3s;
}
.service_content:last-child .btn01 a {
	background:white;
	border:var(--border02);
}

#network01 .inner,
#electrical01 .inner,
#interior01 .inner {
	font-size:115%;
}
#network01 .inner ,
#electrical01 .inner ,
#interior01 .inner {
	width:calc(100% - 60px);
	max-width:800px;
	
}
#network01 .inner div:last-child,
#electrical01 .inner div:last-child,
#interior01 .inner div:last-child {
	width:100%;
	text-align:center;
}
#network01 .inner div:last-child img,
#electrical01 .inner div:last-child img,
#interior01 .inner div:last-child img {
	margin:30px auto 0 auto;

}

#network02 ul,
#electrical02 ul,
#interior02 ul {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
#network02 ul li,
#electrical02 ul li,
#interior02 ul li{
	background:white;
	border:var(--border01);
	padding:30px;
	margin-bottom:30px;
	border-radius:10px;
}
@media screen and (max-width:599px) {
#network01 .inner,
#electrical01 .inner,
#interior01 .inner,
#network02 ul,
#electrical02 ul,
#interior02 ul {
    flex-direction: column-reverse;
}
#network01 .inner div:first-child,
#electrical01 .inner div:first-child,
#interior01 .inner div:first-child{
	width:100%;
	margin-top:20px;
}
#network02 ul li,
#electrical02 ul li,
#interior02 ul li{
	width:100%;
}	
}


#step a {

}

#step ul {
	margin:20px auto 0 auto;
	display:flex;
	justify-content:space-between;
    gap: 1em;
}
#step li {
	width:calc(100% / 4);
	padding:25px;
	background:white;
	border:var(--border01);
	border-radius:10px;
	position: relative;
	background:white;
	z-index:2;
}
#step li h3 {
	font-weight:500;
	font-size:130%;
	text-decoration:underline;
	min-width:30%;
	line-height:1.5;
	margin:0 0 0.5em 0;
}
#step li p {
	margin:0;
}

#step ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1em;
  transform: translateY(-50%);
  /* ▼  */
  width: 0;
  height: 0;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: calc(1em - 1px) solid #999; /* 矢印の色 */
  animation: arrowBlink 1s infinite alternate; /* 点滅アニメーション */
}

/* スマホ：▼ 下向き（三角形） */

#step ul {
    flex-direction: column;
    gap: 1.5em;
  }
#step ul li {
    width: 100%;
	margin-bottom:0;
  }
#step ul li:not(:last-child)::after {
    top: auto;
    bottom: -1.5em;
    left: 50%;
    transform: translateX(-50%);
	/* ▼ の形に変える（border の方向変更） */
    border-top: calc(1.5em + 1) solid #ccc;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
    border-bottom: none;
  animation: arrowBlink02 1s infinite alternate; /* 点滅アニメーション */
	z-index:1;
  }

/* 点滅アニメーション */
@keyframes arrowBlink {
  0% {    border-left-color: #ccc;  }
  100% {    border-left-color: #555;  }
}
@keyframes arrowBlink02 {
  0% {    border-top-color: #ccc;  }
  100% {    border-top-color: #555;  }
}


/* philosophy2 */
#philosophy001 div > div {
	font-size:120%;
}

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

#step ul {
	width:100%;
}
}
@media screen and (max-width:599px) {
}




/* company */
#company table {
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
}

#company > div.flex_30_70 > div:nth-child(2) {
	width:calc(70% - 60px);
	margin:0 0 0 auto;
}
#company img.label {
	max-width:100px;
	margin:0 0 0 auto;
}

#company h2 {
	margin-top:0px;
}
#company table {
	border:none;
	border-top:1px solid #333333;
	width:100%;
}
#company table th,
#company table td {
	border:none;
	border-bottom:1px solid #333333;
	padding:20px 0;
	font-size:105%;
}
#company table tr {
	border-bottom:1px solid #333333;
}
#company table th {
	width:160px;
}
#company table td {
	width:calc(100% - 160px);
}
@media screen and (max-width:999px) {
#company table th {
	width:auto;
	padding-right:30px;
}
}
@media screen and (max-width:599px) {
#company > div.flex_30_70 > div:nth-child(2) {
	width:100%;
}	
#company img.label {
	margin:-100px 0 -50px auto;
}

#company table {
	margin-top:30px;
}
#company table th ,
#company table td {
	padding:13px 0;
}
#company table th {
	padding-right:30px;
	white-space:nowrap;
}
}

/* philosophy */

#philosophy002 ul,
#philosophy003 ul,
#philosophy004 ul {
}

#philosophy002 ul li,
#philosophy003 ul li,
#philosophy004 ul li{
	background:white;
	border:var(--border01);
	margin-bottom:30px;
	padding:30px;
	border-radius:10px;
}
#philosophy002 ul li p,
#philosophy003 ul li p,
#philosophy004 ul li p{
	margin-bottom:0;
}
#philosophy004 ul li{
	width:calc(100% / 2 - 15px);
}
#philosophy002 h3,
#philosophy003 h3,
#philosophy004 h3 {
	margin:0 0 15px 0;
	font-size:150%;
} 
#philosophy004 h4,
#philosophy005 h4 {
	color:var(--green);
} 
#philosophy005 .flex div:last-child {
	margin:20px 0 0 auto;
	width:35%;
}

@media screen and (max-width:799px) {
#philosophy002 ul,
#philosophy003 ul,
#philosophy004 ul
#philosophy005 .flex {
	flex-direction:column;
}
#philosophy002 ul li,
#philosophy003 ul li,
#philosophy004 ul li,
#philosophy005 .flex div:first-child {
	width:100%;
}
#philosophy005 .flex div:last-child{
	width:60%;
	margin:20px auto 0 auto;
}
}
@media screen and (max-width:599px) {
}



/* philosophy
#philosophy01,
#philosophy02,
#philosophy03,
#philosophy04,
#philosophy05{
	background:#f7f7f7;
}


#philosophy02,
#philosophy03,
#philosophy04,
#philosophy05{
	margin-top:-150px;
}

#philosophy h2 {
	line-height:1;
	font-size:160%;
	font-weight:500;
	margin:0 0 15px 0;
	display:inline-block;
	border-bottom:1px solid black;
	padding-bottom:5px;
}
#philosophy01 div div {
	font-size:100%;
}

#philosophy02 h3,
#philosophy03 h3,
#philosophy04 h3{
	font-size:120%;
	font-weight:500;
	margin:0.5em 0 0.5em 0;
}
#philosophy04 h4,
#philosophy05 h4{
	font-size:130%;
	font-weight:600;
	margin:0.5em 0 0.5em 0;
	line-height:1.6;
}
#philosophy04 li {
	display:flex;
	align-items:center;
	margin-bottom:13px;
}
#philosophy04 li h3{
	margin:0;
}
#philosophy04 li p{
	margin:0 0 0 20px;
}
#philosophy05 .president {
	font-size:90%;
}
#philosophy05 .president span {
	font-size:130%;
	font-weight:500;
	display:inline-block;
	margin-left:20px;
}
#philosophy05 .read {
	font-size:90%;
}
@media screen and (max-width:999px) {
}
@media screen and (max-width:799px) {
#philosophy02,
#philosophy03,
#philosophy04,
#philosophy05{
	padding-bottom:0 !important;
}
	#philosophy02 {
		margin-top:-260px !important;
	}
#philosophy04 li {
	display:block;
	flex-wrap:wrap;
}
#philosophy04 li p{
	margin:0;
}

#philosophy05 .parx-image{
	z-index:999;
	width:50vw !important;
	height:70vw !important;
	margin:50px 0 0 auto;
}
}
@media screen and (max-width:599px) {
}
 */


/* contact_form */
#contact_form .inner,
#privacy .inner {
	max-width:800px;
}
#privacy h3 {
	font-size:160%;
	font-weight:500;
	margin:2em 0 0.5em 0;
	padding-bottom:10px;
	text-decoration:underline;
	line-height:1;
}

#contact_form ul li {
	text-align:left;
}
@media screen and (max-width:999px) {
}
@media screen and (max-width:599px) {
}


/* 共通 */

h2.title {
	font-size:200%;
	line-height:1.1;
	margin:1.5em 0 15px 0;
	font-weight:500;
	padding:20px;
	background:black;
	color:white;
	display:inline-block;
}
h3.title  {
	font-size:100%;
	color:#D4D4D8;
	font-weight:normal;
}
h4.title  {
	font-size:125%;
	color:#D4D4D8;
	font-weight:normal;
}
@media screen and (max-width:999px) {
h2.title {
	font-size:200%;
	line-height:1.6;
}
h3.title  {
	font-size:100%;
}
h4.title  {
	font-size:120%;
}
}
@media screen and (max-width:599px) {
h2.title {
	font-size:200%;
	line-height:1.6;
}
h3.title  {
	font-size:100%;
}
h4.title  {
	font-size:120%;
}
}


/* next_prev */
#next_prev {
	margin-top:30px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#next_prev li {
	margin-bottom:10px;
}
#next_prev li:last-child {
	display:block;
	margin-left:auto;
	margin-right:0;
}
#next_prev li {
	font-size:86%;
}
#next_prev li a {
	text-decoration:none;
}
#next_prev li a:hover {
	text-decoration:underline;
}
@media screen and (max-width:999px) {
}
@media screen and (max-width:599px) {
}

.fancybox-bg {
    background-color: rgba(0, 0, 0, 1);
    opacity: 0.5 !important;
}


/* 企業ロゴスクロール */
.marquee-right {
	overflow: hidden;
}
.marquee-right ul {
	animation: marquee-right 20s linear infinite;
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-right ul li {
	list-style: none;
	padding: 0 5px;
	width: calc(100vw / 6 - 10px);
}
.marquee-right img {
	display: block;
	width: 100%;
}
@keyframes marquee-right {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}
@media screen and (max-width:999px) {
.marquee-right ul li {
	width: calc(100vw / 5 - 10px);
}
}
@media screen and (max-width:599px) {
.marquee-right ul li {
	width: calc(100vw / 3 - 10px);
}
}



/*---- Parallax セクション（共通） -----*/
.parx {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 120px 0;
}
.parx-container {
  width: min(1280px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
/* テキストボックス（デフォルト幅。data-box-widthがあればJSで上書き） */
.parx-box {
  width: 40vw;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  padding: 40px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.parx-box .title {
  text-transform: capitalize;
  letter-spacing: .1em;
  font-size: 180%;
  margin: 0 0 20px;
  text-align: center;
	font-weight:500;
}
.parx-content p {
  font-size: 95%;
  font-weight: 400;
  line-height: 2;
}
/* 画像（デフォルト幅。data-img-* でJSが上書き） */
.parx-image {
  position: absolute;
  top: 250px;
  right: 0;
  bottom: 0;
  left: auto;
  width: calc(100% - 40vw);
  min-width: 820px;
  background-size: cover;
  background-position: center center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  z-index: 1;
}
/* 右テキスト・左画像 */
.parx--reverse .parx-box {
  margin-left: auto;
  margin-right: 0;
}
.parx--reverse .parx-image {
  right: auto;
  left: 0;
}
/* スマホ縦積み */
@media (max-width:799px) {
  .parx {
    padding: 96px 0 0 0;
  }
  .parx-container {
    width: 100%;
  }
  .parx-box {
    width: 85vw !important;
	  min-width:auto;
    margin: 0 auto !important;
  }
  .parx-image {
    position: relative;
    top:-50px !important;
    width: 100% !important;
    min-width: 0;
    height: 30vh;
  }
}
@media (max-width:599px) {
  .parx-box {
    width: min(85%, 560px);
    padding: 28px;
  }
  .parx-image {
    height: 56vw;
  }
}
/* 動き抑制 */
@media (prefers-reduced-motion:reduce) {
  .parx-box, .parx-image {
    transform: none !important;
  }
}

/*---- TOPメインキャッチ -----*/
/* 親 */
.fx-rotator {
  position: relative;
  display: inline-block;
  line-height: 1.2;
}

/* 1フレーズの器 */
.fx-rotator .fx-be {
  position: relative;
  display: inline-block;
}

/* テキストを包むラッパ（黒背景はここ） */
.fx-rotator .fx-be__inner {
  position: relative;
  display: inline-block;
  padding: 20px;
  overflow: hidden;
}

/* 背景 初期：幅ゼロ（見えない） */
.fx-rotator .fx-be__inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;          /* 入場時は左基準 */
  right: auto;
  width: 0;
  background: #000;
  z-index: 0;
}

/* 背景：左→右 入場 */
.fx-rotator .bg-in .fx-be__inner::before {
  animation: bgInWidth 1000ms cubic-bezier(.2, .75, .25, 1) forwards;
}

/* 背景：右固定で左→右に“消える”退場 */
.fx-rotator .bg-out .fx-be__inner::before {
  animation: bgOutWidth 1000ms cubic-bezier(.2, .75, .25, 1) forwards;
}

/* 入場：左端から 0 → 100% */
@keyframes bgInWidth {
  from { left: 0; right: auto; width: 0; }
  to   { left: 0; right: auto; width: 100%; }
}

/* 退場：右端固定で 100% → 0（左側から消えていく） */
@keyframes bgOutWidth0 {
  from { left: auto; right: 0; width: 100%; }
  to   { left: auto; right: 0; width: 0; }
}
@keyframes bgOutWidth {
  from { left: 0; right: auto; width: 100%; }
  to   { left: 0; right: auto; width: 0; }
}

/* 文字（JSで分割される） */
.fx-rotator .char {
  position: relative;
  z-index: 1;
  color: #fff;
  opacity: 0;
}

/* 文字：1文字ずつ IN */
.fx-rotator .text-in .char {
  transition: opacity 520ms cubic-bezier(.2, .75, .25, 1);
  transition-delay: calc(var(--i, 0) * 60ms + 120ms);
  opacity: 1;
}

/* 文字：一斉 OUT（背景退場と同時） */
.fx-rotator .text-out .char {
  transition: opacity 220ms ease;
  opacity: 0;
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  .fx-rotator .fx-be__inner::before {
    animation: none;
    width: 100%;
  }
  .fx-rotator .char {
    transition: none;
    opacity: 1;
  }
}