@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.6
Requires PHP: 5.6
Version: 2024.12.014
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

@import url('./layout.css?1');

:root{
	--color-fullblack: #000000;
	--color-black: #2c2c2c;
	--color-white: #ffffff;
	--color-green: #4cb05e;
	--color-darkgray: #666666;
	--color-backgray: #fafafa;
	--color-lightgray: #cccccc;
	--color-linegray: #eaeaea;
	--color-verylightgray: #fafafa;
	--font-eng: "Oswald", sans-serif;
	--radius-input: .5rem;


	--font-size-menu: 2rem;

	--header-menu: 5.5rem;
	--header-menu-line: 2rem;
	--service-line: 5rem;

	--header-pc: 8rem;
	--header-sp: 5rem;

	--pagetop-size: 6.5rem;
	--pagetop-size-hover: 10rem;
}

html,body,input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], textarea{
		font-family: "BIZ UDPGothic", sans-serif;
		font-weight: 400;
		font-style: normal;
}

section{
	overflow-y: hidden;
}

.inner{
	margin: 0 auto;
	padding: 0 10px;
	max-width: 98rem;
	position: relative;
	overflow: hidden;
}

.eng{
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

}



/*** pagetop ******************************************************************************************/

#pagetop{
	position: fixed;
	bottom: -20rem;
	right: 0;
	z-index: 1;
	transition: 0.5s;
}
#pagetop.visible{ bottom: calc(var(--pagetop-size) - .8rem); transition: 0.5s; }
#pagetop:hover{ bottom: calc(var(--pagetop-size-hover) - .8rem); }

#pagetop .triangle{ position: relative; border-left: var(--pagetop-size) solid transparent; border-bottom: var(--pagetop-size) solid var(--color-fullblack); }
#pagetop:hover .triangle{ position: relative; border-left: var(--pagetop-size-hover) solid transparent; border-bottom: var(--pagetop-size-hover) solid #000000; }
#pagetop .triangle span{
	opacity: 0;
    font-size: 1.4rem;
    font-family: var(--font-eng);
    color: #fff;
    transform: rotate(90deg);
    position: absolute;
    line-height: 1;
    bottom: -7rem;
    right: -2.1rem;transition: 0.5s;
}
#pagetop:hover .triangle span{ opacity: 1; }





.bg{
	width: 100%;
    position: fixed;
    top: calc(50% - 5.35vw);
    left: 0;
    z-index: -11;
    font-size: 11.70vw;
    line-height: 1;
    text-align: center;
}

.bg span{
    font-size: 11.70vw;
    color: #f6f6f6;
	font-family: var(--font-eng);
	letter-spacing: 0;
}



@keyframes bound-animation{
	  0%{ transform: translateY(0); }
	100%{ transform: translateY(2.4rem); }
}
.bound span{
	display: inline-block; /*横並びにしつつアニメーションを適用*/
	animation: 1s bound-animation ease-in infinite alternate;
}

  /*** 各文字のスタート時間をずらす ***/
.bound span:nth-child(1) { animation-delay: 0; }
.bound span:nth-child(2) { animation-delay: 0.2s; }
.bound span:nth-child(3) { animation-delay: 0.4s; }
.bound span:nth-child(4) { animation-delay: 0.6s; }
.bound span:nth-child(5) { animation-delay: 0.8s; }
.bound span:nth-child(6) { animation-delay: 1.0s; }
.bound span:nth-child(7) { animation-delay: 1.2s; }
.bound span:nth-child(8) { animation-delay: 1.4s; }
.bound span:nth-child(9) { animation-delay: 1.6s; }
.bound span:nth-child(10){ animation-delay: 1.8s; }
.bound span:nth-child(11){ animation-delay: 2.0s; }
.bound span:nth-child(12){ animation-delay: 2.2s; }
.bound span:nth-child(13){ animation-delay: 2.4s; }
.bound span:nth-child(14){ animation-delay: 2.6s; }
.bound span:nth-child(15){ animation-delay: 2.8s; }
.bound span:nth-child(16){ animation-delay: 3.0s; }






.scroll_down{
	position:absolute;
	bottom: 1rem;
	right: 4rem;
  }
  
  .scroll_down a{
	position: absolute;
	left: 1rem;
	bottom: 0;
	color: var(--color-white);
	font-size: 12px;
	letter-spacing: .2em;
	writing-mode: vertical-lr;
	text-decoration: none;
	text-transform: uppercase;
  }
  
  .scroll_down:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -4px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background:var(--color-white);
	animation:
	  circlemove 1.6s ease-in-out infinite,
	  cirlemovehide 1.6s ease-out infinite;
  }
  
  @keyframes circlemove{
	0%{bottom:80px;}
	100%{bottom:0px;}
  }
  
  @keyframes cirlemovehide{
	0%{opacity:0}
	50%{opacity:1;}
	80%{opacity:0.9;}
	100%{opacity:0;}
  }
  
  .scroll_down:after{
	content:"";
	position: absolute;
	bottom:0;
	left:0;
	width:2px;
	height: 80px;
	background:var(--color-white);
  }
  









.contents-box .inline{
	display: flex;
}
.contents-box .inline .header{
	width: 25rem;
	background-color: var(--color-black);
	min-height: 50rem;
	color: var(--color-white);
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: flex;
	justify-content: center;
	align-items: center;
}
.contents-box .inline .header h3{
    text-align: center;
    font-size: 3rem;
    letter-spacing: 1rem;
}
.contents-box .inline .header h3 span{ display: block; transform: rotate(-180deg); }

.contents-box-reverse .inline{
	flex-direction: row-reverse;
}
.contents-box-reverse .inline .header h3 span{
	display: block;
	transform: rotate(0deg);
}

.contents-box .inline .inline-list{
	width: calc(100% - 25rem);
}




.contents-box .inline .works-inline-list{ width: calc(100% - 25rem); display: flex; flex-wrap: wrap; }
.contents-box .inline .works-inline-list a{ width: 50%; overflow: hidden; position: relative; }
.contents-box .inline .works-inline-list a img{ width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.contents-box .inline .works-inline-list a:hover img{ transform: scale(1.2, 1.2); }

.contents-box .inline .works-inline-list a span{
	position: absolute;
	bottom: 0;
	right: 0;
	color: var(--color-white);
	text-shadow: #000 1px 0 10px;
	line-height: 1;
	padding: 1rem 2.5rem;
	background-color: rgba(0, 0, 0, 0.35);
	font-size: 1.4rem;
	text-align: right;
}




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

	header

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

header{ position: fixed; width: 100%; height: var(--header-pc); z-index: 100; overflow: hidden; background-color: rgba(0, 0, 0, .3); }

header .header-inner{ display: flex; justify-content: space-between; height: var(--header-pc); padding-left: var(--header-pc); padding-right: calc(var(--header-pc) - 1rem); }

header .header-inner .menu li.mail a{ display: flex; width: 7.5rem; padding: 0; }
header .header-inner .menu li.mail i{ font-size: 3rem; }

header .header-inner .menu li.mail a:hover{ background-color: var(--color-black); }
header .header-inner .menu li.mail a:hover i{ color: var(--color-white); }
header .menu li a{ padding: 0 1rem; display: flex; height: 100%; align-items: center; justify-content: center; width: 7rem; }

header .menu ul{ display: flex; }
header .menu ul li a{ display: flex; align-items: center; justify-content: center; height: var(--header-pc); }

header .menu ul li a span{ font-size: var(--font-size-menu); color: var(--color-green); }

header .logo{ display: flex; height: var(--header-pc); }
header .logo a{ display: flex; align-items: center; color: var(--color-white); font-size: var(--font-size-menu);  }
header .logo a span{ color: var(--color-green) !important; font-size: var(--font-size-menu); }





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

	.bg{ font-size: 11vw; }

}





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

	.bg{ font-size: 8.3vw; }

	header .menu{ display: none; }

	.header-side{ display: none; }


	.contents-box-reverse .inline{ flex-direction: row; }

}


.frame-bottom{
	width: 100%; height: var(--header-pc); background-color: var(--color-black); z-index: 100; overflow: hidden; bottom: 0;
}



.rollButton {
    /*背景の基点とするためrelativeを指定*/
    position: relative;
    text-align: center;
    outline: none;
}


.rollButton span {
    display: flex;
	align-items: center;
	justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    /* 重なりを3Dで表示 */
    transform-style: preserve-3d;
    /* アニメーションの設定 数字が少なくなるほど早く回転 */
    transition: 0.5s;
}


/* 回転前 */
.rollButton span:nth-child(1) {
    color: var(--color-white);
    transform: rotateX(0deg);/*はじめは回転なし*/
    transform-origin: 0 50%  -25px;/* 回転する起点 */
	font-family: var(--font-eng);
}

/*hoverをした後の形状*/
.rollButton:hover span:nth-child(1) {
    transform: rotateX(90deg);/* X軸に90度回転 */
}

/* 回転後 */
.rollButton span:nth-child(2) {
    color: var(--color-white);
    transform: rotateX(-90deg);/*はじめはX軸に-90度回転*/
    transform-origin: 0 50%  -25px;/* 回転する起点 */
	font-size: 1.4rem;
}

/*hoverをした後の形状*/
.rollButton:hover span:nth-child(2) {
    transform: rotateX(0deg);/* X軸に0度回転 */
}




section.contents-service{
	padding: 10rem 0;
	position: relative;
}

section.contents-service .header{
	text-align: center;
}


section.contents-service .header h3{
	font-size: 4rem;
    letter-spacing: .5rem;
}
section.contents-service .header h3 span{
	display: block;
	font-size: 2.2rem;
	line-height: 1;
}



section.contents-service::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-left: 7rem solid var(--color-green);
	border-bottom: 7rem solid transparent;
}
section.contents-service::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-right: 7rem solid var(--color-green);
	border-bottom: 7rem solid transparent;
}


.service-box a h4{
	color: var(--color-white);
	position: absolute;
	z-index: 3;
	font-size: 4rem;
	font-family: var(--font-eng);
	line-height: 1;
}
  
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------

	footer

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

footer{ background-color: var(--color-black); width: calc(100% - calc(var(--header-pc) * 2)); padding: 0 var(--header-pc) 0; }
footer *{ color: var(--color-white); }
footer .footer-inner{ margin: 0 auto; padding: 5rem 2rem; width: 100%; display: flex; justify-content: space-between; align-items: center; }

footer .information .name{
	font-family: var(--font-eng);
    font-size: 2rem;
	margin-bottom: 2rem;
}

footer .information .name span{ color: var(--color-green) !important; font-size: 2rem; }

footer .information .hashes{ display: flex; margin-top: 3rem; flex-wrap: wrap; }
footer .information .hashes li{ font-size: 1.2rem; color: var(--color-darkgray); margin-right: .7rem; }
footer .information .hashes li::before{ content: "#"; padding-right: .3rem; }

footer .sns{ display: flex; }
footer .sns li:not(:last-child){ margin-right: 2.5rem; }
footer .sns a{ font-size: 2rem; }
footer .sns a i{ transition: .5s all; }
footer .sns a:hover i{ color: var(--color-green) !important; }

.copyright{
	display: flex;
	width: 100%;
	height: var(--header-pc);
	justify-content: flex-end;
	align-items: center;
	padding: 0 var(--header-pc);
}
.copyright small{
	font-size: 1rem;
	color: var(--color-white);
	line-height: 1;
}


.page-profile .page-title{ background: url('./assets/images/profile/header-bg.webp') no-repeat 50% 50% / 200rem auto; }


.List-Item {
	border-top: 1px solid #ddd;
	width: 100%;
  }
  @media screen and (max-width: 540px) {
	.List-Item {
	  border-top: 0;
	}
  }
  .List-Item:nth-of-type(1) {
	border-top: 0;
  }
  .List-Item-Content {
	margin-left: auto;
	margin-right: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	max-width: 1100px;
	display: flex;
	align-items: center;
  }
  @media screen and (max-width: 540px) {
	.List-Item-Content {
	  padding-top: 15px;
	  padding-bottom: 15px;
	  flex-wrap: wrap;
	}
  }
  .List-Item-Content.one {
	padding-top: 0;
  }
  .List-Item-Content-Number {
	position: relative;
	margin-right: 40px;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	background: #5bc8ac;
	color: #fff;
	font-size: 36px;
  }
  @media screen and (max-width: 540px) {
	.List-Item-Content-Number {
	  margin-right: 20px;
	  width: 40px;
	  height: 40px;
	  line-height: 40px;
	  font-size: 24px;
	}
  }
  .List-Item-Content-Number-Line {
	position: absolute;
	top: -36%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 4px;
	height: 66px;
	background: #5bc8ac;
  }
  @media screen and (max-width: 540px) {
	.List-Item-Content-Number-Line {
	  top: -80%;
	  width: 2px;
	  height: 72px;
	}
  }
  .List-Item-Content-Title {
	margin-right: 48px;
	flex-basis: 298px;
	color: #5bc8ac;
	font-size: 24px;
  }
  @media screen and (max-width: 540px) {
	.List-Item-Content-Title {
	  margin-right: 0;
	  max-width: 230px;
	  font-size: 18px;
	}
  }
  .List-Item-Content-Description {
	line-height: 1.5;
	font-size: 16px;
  }
  @media screen and (max-width: 540px) {
	.List-Item-Content-Description {
	  margin-left: 60px;
	  max-width: 260px;
	  font-weight: normal;
	  font-size: 13px;
	}
  }
  
  
  











section.main{ position: relative; height: calc(100vh); }


section.main video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

section.main .cover{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.4);
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 0;
	flex-direction: column;
}
section.main .cover h1 *{
	font-size: 5rem;
	color: var(--color-white);
	letter-spacing: .5rem;
	text-shadow: #000 1px 0 10px;
}

section.main .cover:hover{
	background-color: rgba(0,0,0,.25);
}

section.main .cover p{
	margin-top: 2rem;
	font-size: 1.4rem;
	color: var(--color-white);
	letter-spacing: .5rem;
	text-shadow: #000 1px 0 10px;

}



/* ***** toppage - contents ****************************************************************************************** */

section.contents .title::before{
	content: "CONTENTS";
    position: absolute;
    left: calc(50% - 285px);
    line-height: 1;
    top: 20px;
    font-size: 8rem;
    color: #eaeaea;
	letter-spacing: .8rem;
	padding-left: .8rem;
}

section.contents .contents-list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
section.contents .contents-list a{
	width: calc(33.33333333%);
	min-height: 25rem;
	position: relative;
	color: var(--color-white);
}

section.contents .contents-list a.plan{ background: url('./assets/images/service/ph-service-planning.webp') 50% 50% / cover; }
section.contents .contents-list a.design{ background: url('./assets/images/service/ph-service-design.webp') 50% 50% / cover; }
section.contents .contents-list a.coding{ background: url('./assets/images/service/ph-service-coding.webp') 50% 50% / cover; }
section.contents .contents-list a.system{ background: url('./assets/images/service/ph-service-system.webp') 50% 50% / cover; }
section.contents .contents-list a.cms{ background: url('./assets/images/service/ph-service-cms.webp') 50% 50% / cover; }
section.contents .contents-list a.server{ background: url('./assets/images/service/ph-service-server.webp') 50% 50% / cover; }

section.contents .contents-list a dl{
	transition: .5s all;
	-webkit-backdrop-filter: blur(.5rem);
	backdrop-filter: blur(.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	text-shadow: #000 1px 0 10px;
	padding: 2rem;
}
section.contents .contents-list a dl dt{
	text-align: center;
	margin-bottom: 2rem;
	font-size: 3rem;
	letter-spacing: .5rem;
	transition: .5s all;
}
section.contents .contents-list a:hover dl dt{
	letter-spacing: .8rem;
}
section.contents .contents-list a dl dd{
	transition: .5s all;
	opacity: 0;
	font-size: 1.4rem;
	text-align: center;
}
section.contents .contents-list a:hover dl dd{
	display: block;
	height: auto;
	opacity: 1;
}





.title{
	position: relative;
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	height: 12rem;
}
.title span{
	font-size: 4rem;
	letter-spacing: .5rem;
	padding-left: .5rem;
	position: relative;
	z-index: 0;
}



/* ***** toppage - news ********************************************************************************************** */

section.news{
	padding: 10rem 0;
	border-top: var(--color-linegray) 1px solid;
	border-bottom: var(--color-linegray) 1px solid;
}

section.news .inner{
	display: flex;
	justify-content: space-between;
}

section.news .header{
	width: 26rem;
}
section.news .header h3{
	font-size: 4rem;
	display: flex;
	align-items: baseline;
	letter-spacing: .5rem;
}
section.news .header h3 span{
	margin-left: 1.4rem;
	font-size: 2.2rem;
}
section.news .header .chara{
	margin-top: 1.5rem;
	text-align: right;
}
section.news .header .chara img{
	max-width: 20rem;
}
section.news .btnMore{
	margin-top: -.2rem;
	position: relative;
	transition: color 0.5s ease;
}
section.news .btnMore a{
	border: var(--color-fullblack) 2px solid;
	width: 100%;
	display: flex;
	height: 5rem;
	align-items: center;
	justify-content: center;
	background-color: var(--color-white);
}
section.news .btnMore a span{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

}
section.news .btnMore:hover a span{
	color: var(--color-white);
}

section.news .btnMore:hover::before {
	transform: scaleX(1);
	transform-origin: left;
  }

  section.news .btnMore::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: calc(100% + .2rem);
	height: 100%;
	background: #000000;
	transform: scaleX(0);
	transform-origin: right;
	transition: all 0.5s ease;
	transition-property: transform;
  }

  section.news .btnMore::after{
	position: absolute;
content:"\f054";
font-family: "Font Awesome 6 Free";
font-weight: 900;
top:calc(50% - 9px);
right:1rem;
font-size: 1rem;
}


section.news .inline-list{
	width: calc(100% - 35rem);
}






section.news .news-list-box{
	border-radius: .5rem;
	width: 100%;
	overflow: hidden;
}
section.news .news-list-box a{
	display: block;
	padding: 1.58rem 0 1.58rem 1rem;
	border-bottom: #eaeaea 1px solid;
}
section.news .news-list-box dl{display: flex; flex-direction: column; position: relative; }
section.news .news-list-box dl dt{ width: 12rem; }
section.news .news-list-box dl dd{ padding-right: 3rem; position: relative; }
section.news .news-list-box dl dd::after{
	position: absolute;
content:"\f054";
font-family: "Font Awesome 6 Free";
font-weight: 900;
top:calc(50% - 9px);
right:0;
font-size: 1rem;
}


section.news .news-list-box a::after{
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

section.news .news-list-box a:hover::after {
transform: scale(1, 1);
}




























.page-contact .page-title{ background: url('./assets/images/contact/contact-title.webp') no-repeat 50% 50% / cover; }


.page-title{ height: 27rem; width: 100%; position: relative; padding-top: var(--header-pc); }

.page-title::before{
	content: "";
	position: absolute;
	z-index: 1;
	background: url('./assets/images/common/main_cover.png') repeat 0 0;
    width: 100%;
    height: 100%;
	top: 0;
}

.page-title .title{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	flex-direction: column;
	font-size: 3rem;
	position: relative;
	z-index: 1;
}


.page-title .title,
.page-title .title *{
color: var(--color-white);
text-shadow: #000 1px 0 10px;
}
.page-title .title span{
	font-family: var(--font-eng);
	font-size: 2rem;
	line-height: 1;
}





.privacy-check{text-align: center; margin-top: 2rem; display: block; }




.page-contact .inner{ padding-top: 10rem; padding-bottom: 10rem; }


input[type="checkbox"] {
	position: relative;
	width: 16px;
	height: 16px;
	border: 1px solid #000;
	vertical-align: -5px;
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
  }
  
  input[type="checkbox"]:checked:before {
	position: absolute;
	top: 1px;
	left: 4px;
	transform: rotate(50deg);
	width: 4px;
	height: 8px;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	content: '';
  }




.progressbar { display: flex; flex-wrap: wrap; }
.progressbar .item {
	position: relative;
	width: 33%;
	text-align: center;
	position: relative;
	align-items: center;
	justify-content: center;
	padding: 13px 0;
	line-height: 1.5;
	background: #F5F5F5;
	color: #999999;
}
.progressbar .item span{ display: block; }
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: 100%;
	content: '';
	border: 37px solid transparent;
	border-left: 20px solid #F5F5F5;
	margin: auto;
}
.progressbar .item:not(:last-child)::before { margin-left: 1px; border-left-color: var(--color-white); }
/* active */
.progressbar .item.active { z-index: 1; background: var(--color-green); color: var(--color-white); }
.progressbar .item.active:not(:last-child)::after { border-left-color: var(--color-green); }
.progressbar .item.active:not(:last-child)::before { border-left: none; }


  /*************************************
  @media screen and (max-width: 767px) {
  .progressbar .item {
	  font-size: 11px;
	  line-height: 1.4;
	  padding: 10px 0;
  }
  .progressbar .item:not(:last-child)::before,
  .progressbar .item:not(:last-child)::after {
	  border-width: 25px;
	  border-left-width: 12px;
  }
  }
  ************************************/
  





  #ContactBoxFormPrivacy{
	width:100%;
	background: var(--color-white);
	overflow: auto;
	height: 300px;
	border: #aaaaaa 1px solid;
	margin: 55px 0 10px 0;
}


#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner{
	display: table;
	width:100%;
	height: 100%;
	padding: 2%;
	background-color: #fafafa;
}

#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner .tit{
	text-align: center;
	font-size: 1.8rem;
	margin-bottom: 2rem;
}
#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner .msg{
	margin-bottom: 10px;
	font-size: 1.4rem;
	line-height: 2;
}
#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner dl{
	margin-bottom: 12px;
}

#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner dl *{
	font-size: 14px;
	line-height: 2.4;

}

#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner dl dt{
	font-weight: bold;
	margin-bottom: 5px;
}



#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner a.btnClose{
	display: block;
	width: 120px;
	padding: 7px 10px;
	margin: 30px auto 0 auto;
	border: #999999 2px solid;
  border-radius: 25px;
	text-align: center;
	font-size: 14px;
}
#ContactBoxFormPrivacy #ContactBoxFormPrivacyInner a.btnClose span{
	background: url(../images/icon/ico_form_close.svg) no-repeat 0 50%;
	background-size: 12px auto;
	display: block;
}


#ContactBoxFormPrivacyTxts{
	width: 100%;
margin:0 auto;
padding:0;
}









.contact-form dl:first-of-type{ margin-top: 5rem !important; }
.contact-form dl{ margin-top: 3rem; }
.contact-form dl dt{ margin-bottom: .7rem; font-size: 2rem; display: flex; align-items: center; justify-content: space-between; }
.contact-form dl dt span{ font-size: 1.4rem; background-color: #c00; color: var(--color-white); line-height: 1; padding: .7rem 2rem; border-radius: 5rem; }
.contact-form dl dd input,
.contact-form dl dd textarea{ width: 100%; padding: 2.5rem 2rem; border-radius: .5rem; letter-spacing: .2rem; }
.contact-form dl dd textarea{ line-height: 2; }
.contact-form .button .b{ display: none; }



#ContactBoxFormPrivacy::-webkit-scrollbar { width: .8rem; background-color: var(--color-lightgray); }
#ContactBoxFormPrivacy::-webkit-scrollbar-thumb { background: var(--color-black); width: .6rem; }



.button{ margin-top: 5rem; overflow: hidden; height: 8rem; }
.button ul{ display: flex; justify-content: center; }
.button ul li{ position: relative; }
.button input,
.button a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 35rem;
	height: 8rem;
	border: none;
	border-radius: 5rem;
	position: relative;
	background-color: var(--color-green);
	color: var(--color-white);
	font-size: 1.8rem;
	letter-spacing: .5rem;
	cursor: pointer;
}
.button li.s::after{
	position: absolute;
	content:"\f054";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	top:calc(50% - 12.5px);
	right:3rem;
	color: var(--color-white);
	font-size: 1.4rem;
	transition: .5s all;
}
.button li.s:hover::after{ right:2rem; }

.button li.b input{ background-color: var(--color-black); }
.button li.b::after{
	position: absolute;
	content:"\f053";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	top:calc(50% - 12.5px);
	left:3rem;
	color: var(--color-white);
	font-size: 1.4rem;
	transition: .5s all;
}
.button li.b:hover::after{ left:2rem; }




/* 共通画面 */
.contact-message{ margin-top: 4.5rem; }
.contact-message .tit{ text-align: center; font-size: 2rem; margin-bottom: 3rem; }
.contact-message p{ text-align: center; line-height: 2; }



/* 確認画面 */
.contact-confirm dl dt span,
.contact-confirm #ContactBoxFormPrivacy,
.contact-confirm .privacy-check{ display: none; }

.contact-confirm dl:first-of-type{ margin-top: 5rem !important; }
.contact-confirm dl{ display: flex; align-items: center; padding: 2.5rem 0; border-top: var(--color-lightgray) 1px solid; margin-top: 0; position: relative; }
.contact-confirm dl::before{ content: ""; position: absolute; width: 18rem; height: .1rem; background-color: var(--color-black); top: -.1rem; }

.contact-confirm dl dt{ width: 22rem; font-size: 1.6rem; margin-bottom: 0; }
.contact-confirm dl dd{ width: calc(100% - 22rem); }
.contact-confirm dl:last-of-type{ border-bottom: var(--color-lightgray) 1px solid; }
.contact-confirm dl:last-of-type::after{ content: ""; position: absolute; width: 18rem; height: .1rem; background-color: var(--color-black); bottom: 0; }

.contact-confirm .button .b{ margin-right: 1.5rem; }









/* -----

	Profile

----- */

.page-profile .profile-wrapper{
	position: relative;
}
.page-profile .profile-wrapper::before{
	content: "";
	position: absolute;
	width: 35%;
	height: 100%;
	background-color: var(--color-lightgray);
}

.page-profile .inner{
	padding-top: 10rem;
	padding-bottom: 10rem;
	display: flex;
	justify-content: space-between;
}


.face-box{
	width: 30rem;
}
.face-inbox{
	background-color: var(--color-green);
	border: var(--color-lightgray) 1px solid;
	border-radius: .8rem;
	padding: 3rem;
}
.face-box .face{
	max-width: 20rem;
	width: 100%;
	background-color: var(--color-white);
		display: block;
		margin: 0 auto;
		border-radius: 50rem;
		border: #ccc 1px solid;
		overflow: hidden;
}
.face-box .face img{ max-width: 100%; transform: scale(1.2, 1.2); }

.face-box *{ color: var(--color-white); }

.face-box .name{ text-align: center; margin-top: 1rem; font-size: 3rem; position: relative; }
.face-box .name span{ display: block; line-height: 1; }
.face-box .name::after{ content: "―"; }

.face-box .position{ font-size: 1.2rem; text-align: center; }

.face-box .sns{ display: flex; justify-content: center; margin-top: 1.5rem; }
.face-box .sns li:not(:last-child){ margin-right: 2rem; }
.face-box .sns li i{ font-size: 3rem; }


.profile-box{ width: calc(100% - 35rem); margin-left: 5rem; }
.profile-box h3{ font-size: 3rem; margin-bottom: 2rem; }
.profile-box p{ font-size: 1.4rem; line-height: 2.2; }


.banner{ margin-top: -3rem; }
.banner-list .banners{ width: 32%; background-color: #000; margin: 0 .5%; display: flex; height: 14rem; }




/* ------

	News

----- */

.article-box{ padding: 10rem 0; }
.article-box .dates{ margin: 3rem 0; padding-top: 2rem; border-top: var(--color-lightgray) 1px solid; text-align: right; line-height: 1; }




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

.article-box .buttons a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30rem;
	height: 6rem;
	border: none;
	border-radius: 5rem;
	position: relative;
	background-color: var(--color-green);
	color: var(--color-white);
	font-size: 1.4rem;
	letter-spacing: .5rem;
	cursor: pointer;
	font-weight: 400;
}





/* :::::

	NEWS

::::: */
.page-news .page-title{ background: url('./assets/images/news/header-bg.webp') no-repeat 50% 50% / 200rem auto; }





/* :::::

	WORKS

::::: */

.page-works{ background-color: var(--color-backgray); }
.page-works .page-title{ background: url('./assets/images/works/header-bg.webp') no-repeat 50% 50% / 200rem auto; }

.page-works .works-list .inner{ display: flex; justify-content: flex-start; flex-wrap: wrap; padding-top: 7.5rem; padding-bottom: 7.5rem; }

.page-works .works-list a{ width: 32%; background-color: var(--color-white); margin-bottom: 2%;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); }
.page-works .works-list a:not(:nth-child(3n)){ margin-right: 2%; }
.page-works .works-list a:hover{ transform: translateY(-2%); }

.page-works .works-list a img{ max-width: 100%; width: 100%; }

.page-works .works-list dl dd{ padding: 1rem; font-size: 1.4rem; }
.page-works .works-list dl dd .date{ font-size: 1.4rem; display: block; font-family: var(--font-eng); }


.page-works .works-article .inner{ padding-top: 7.5rem; padding-bottom: 7.5rem; }
.page-works .works-article article{ background-color: #ffffff; padding: 5rem 3rem; border-radius: 1rem; }

.article-header{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; }
.article-header h1{ font-size: 3rem; }
.article-header .date{ font-size: 1.4rem; }


.page-works .works-article .description{ margin: 2rem 0 4rem; line-height: 2.4; }


.photos-box ul{ display: flex; flex-wrap: wrap; }
.photos-box ul li{ width: 49%; margin-bottom: 2%; }
.photos-box ul li:nth-child(odd){ margin-right: 2%; }
.photos-box ul li img{ max-width: 100%; height: 100%; object-fit: 4 / 3; }


.information-box dl{ display: flex; width: calc(100% - 4rem); padding: 2rem 2rem; border-top: var(--color-lightgray) 1px solid; }
.information-box dl:last-child{ border-bottom: var(--color-lightgray) 1px solid; }

.information-box dl dt{ width: 12rem; }
.information-box dl dd{ width: calc(100% - 12rem); }
.information-box dl dd a{ display: block; }





/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

	FLOW

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


.page-flow .page-title{ background: url('./assets/images/flow/header-bg.webp') no-repeat 50% 50% / 200rem auto; }

.flow-box{
	padding: 8rem 0 10rem;
}

.flow-inbox{
	position: relative;
	background-color: var(--color-verylightgray);
}
.flow-inbox:not(:last-child){
	margin-bottom: 8rem;
}


.flow-inbox:not(:last-child)::after{
	content: "";
    position: absolute;
    width: .1rem;
    height: 8rem;
    bottom: -8rem;
    background-color: var(--color-lightgray);
    left: calc(50% - .05rem);
}

.flow-inbox .no{
    top: 0;
    left: 0;
    border-bottom: 8rem solid transparent;
    border-left: 6rem solid var(--color-green); /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 1;
}
.flow-inbox .no span{
    position: absolute;
    left: -4.8rem;
    top: 1rem;
	font-family: var(--font-eng);
	color: var(--color-white);
}
.flow-inbox dl{
	display: flex;
	width: 100%;
	min-height: 20rem;
}
.flow-inbox dl dt{
	width: 25rem;
	padding: 3rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.flow-inbox dl dt img{
	width: 15rem;
}

.flow-inbox dl dd{
	width: calc(100% - 25rem);
	padding: 4rem;
}
.flow-inbox dl dd strong{
	display: block;
	font-size: 2.4rem;
	color: var(--color-green);
	margin-bottom: 1.5rem;
}





/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

	SERVICE

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.page-service .page-title{
	background: url('./assets/images/service/header-bg.webp') no-repeat 50% 50% / 200rem auto;
}

.page-service .service-message{
	margin: 8rem 0;
}
.page-service .service-message p{
	line-height: 2.4;
}
.page-service .service-boxes{ padding: 10rem 0; position: relative; }

.page-service .service-box-01{ background: url('./assets/images/service/ph-service-planning.webp') 50% 50% / cover; }
.page-service .service-box-02{ background: url('./assets/images/service/ph-service-design.webp') 50% 50% / cover; }
.page-service .service-box-03{ background: url('./assets/images/service/ph-service-coding.webp') 50% 50% / cover; }



.page-service .service-boxes h2{
	text-align: center;
	font-size: 3rem;
	letter-spacing: 1rem;
	position: relative;
	margin-bottom: 5rem;
}
.page-service .service-boxes h2 i{
	display: block;
	font-size: 15rem;
	color: var(--color-darkgray);
	margin-bottom: 2rem;
}
.page-service .service-boxes h2 span{
	font-family: var(--font-eng);
	display: block;
	font-size: 1.8rem;
	letter-spacing: .5rem;
}

.page-service .service-boxes h2::after{
	content: "";
	position: absolute;
	bottom: -2rem;
	left: calc(50% - calc(var(--service-line) / 2));
	width: var(--service-line);
	height: .2rem;
	background-color: var(--color-darkgray);

}

.page-service .service-boxes .texts{
	display: flex;
	justify-content: space-around;
}







.page-service .service-boxes::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(255, 255, 255, .9);
}
















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

	.service-box{
		display: flex;
		gap: 1rem;
		height: 40rem;
		margin-top: 5rem;
	}

	.service-box a{
		display: block;
		flex: 1 1 auto;
		overflow: hidden;
		position: relative;
		transition: flex-grow .4s ease-in-out;
	}

	.service-box img{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0 auto auto 0;
		z-index: -1;
		object-fit: cover;
	}

	.service-box a:hover{
		flex-grow: 8;
	}

	.service-box a::before{
		content: "";
		position: absolute;
		z-index: 2;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		transition: .5s all;
	}
	.service-box a:hover::before{
		background-color: transparent;
	}

	.service-box a h4{
		color: var(--color-white);
		writing-mode: vertical-rl;
		position: absolute;
		top: -3px;
		right: -6px;
		z-index: 3;
		font-size: 4rem;
		font-family: var(--font-eng);
		line-height: 1;
	}

	.service-box a .text{
		opacity: 0;
		padding: 4rem;
		width: calc(100%);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
	}
	.service-box a:hover .text{
		opacity: 1;
	}
	.service-box a .text .text-inbox{
		max-width: 50rem;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: rgba(255, 255, 255, .95);
		align-items: center;
		justify-content: center;
		padding: 4rem; 	top: 2rem;
		margin: 0 auto;
	}
	.service-box a .text .text-inbox h5{
		text-align: left;
		font-family: var(--font-eng);
		font-size: 3rem;
		margin-bottom: 1.5rem;
	}
}





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


	/*** toppage - main ***/
	section.main{ height: 75vh; }

	section.main .cover h1{ width: 100%; height: 100%; }
	section.main .cover h1 strong{ position: absolute; }
	section.main .cover h1 strong:nth-of-type(1){ right: 18rem; top: 5rem; }
	section.main .cover h1 strong:nth-of-type(2){ right: 11.8rem; top: 5rem; }
	section.main .cover h1 strong:nth-of-type(3){ right: 5.5rem; top: 5rem; }
	section.main .cover h1 strong:nth-of-type(4){ right: 0; top: 5rem; }
	section.main .cover h1 strong:nth-of-type(5){ display: none; }
	section.main .cover h1 strong:nth-of-type(6){ right: 0; top: 11rem; }
	section.main .cover h1 strong:nth-of-type(7){ right: 0; top: 17rem; }
	section.main .cover h1 strong:nth-of-type(8){ right: 0; top: 23rem; }
	section.main .cover h1 strong:nth-of-type(9){ right: 0; top: 29rem; }
	section.main .cover h1 strong:nth-of-type(10){ right: 0; top: 35rem; }

	
	section.main .cover p{
		width: 80%;
		margin-left: -4rem;
		font-size: 12px;
		margin-bottom: 4rem; }

	/*** toppage - news ***/
	section.news{ padding: 4rem 0; }
	section.news .inner{ display: block; }


	section.contents-service{ padding: 3.5rem 0 5rem 0; }
	section.contents-service .header{ margin-bottom: 4rem; }
	section.contents-service .header h3{ flex-direction: column; align-items: center; font-size: 2.4rem; }
	section.contents-service .header h3 span{ margin-left: 0; line-height: 1; }


	section.contents-service::before { border-left: 4rem solid var(--color-green); border-bottom: 4rem solid transparent; }
	section.contents-service::after { border-right: 4rem solid var(--color-green); border-bottom: 4rem solid transparent; }
	



	.service-box{ margin: 0 1rem; }

	.service-box a{ display: block; height: 17.5rem; }
	.service-box a:not(:last-child){ margin-bottom: .3rem; }

	.service-box a.s01{ background: url('./assets/images/service/ph-service-planning.webp') no-repeat 50% 50% / cover; }
	.service-box a.s02{ background: url('./assets/images/service/ph-service-design.webp') no-repeat 50% 50% / cover; }
	.service-box a.s03{ background: url('./assets/images/service/ph-service-coding.webp') no-repeat 50% 50% / cover; }
	.service-box a.s04{ background: url('./assets/images/service/ph-service-system.webp') no-repeat 50% 50% / cover; }
	.service-box a.s05{ background: url('./assets/images/service/ph-service-cms.webp') no-repeat 50% 50% / cover; }
	.service-box a.s06{ background: url('./assets/images/service/ph-service-server.webp') no-repeat 50% 50% / cover; }
	.service-box a h4{ position: absolute; left: -.6rem; top: -.6rem; font-size: 5.0rem; }

	.service-box a img{ display: none; }

	.service-box a .text{ display: flex; align-items: flex-end; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.55); }
	.service-box a .text .text-inbox{ padding: 1rem 1rem; font-size: 1.4rem; color: var(--color-white); }
	.service-box a .text .text-inbox h5{ display: none; }

	section.news .header{ width: 100%; }
	section.news .header h3{ flex-direction: column; align-items: center; font-size: 2.4rem; }
	section.news .header h3 span{ margin-left: 0; line-height: 1; }

	section.news .inline-list{ width: 100%; }
	section.news .btnMore{ margin-top: 5rem; }

}











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



	.flow-inbox dl dt{ display: none; }
	.flow-inbox dl dd{ width: 100%; }
	.flow-inbox dl dd span.img{ display: block; text-align: center; margin-bottom: 1.5rem; margin-top: 2.5rem; }
	.flow-inbox dl dd span.img img{ max-width: 15rem; width: 100%; }

	.contents-box .inline{ padding: 0; display: block; }
	.contents-box .inline .header{ width: 100%; writing-mode: initial; min-height: 10rem; }

	.contents-box .inline .header h3{ font-size: 2rem; }
	.contents-box .inline .header h3 span{ transform: rotate(0deg); font-size: 1.4rem; letter-spacing: .5rem; }


	footer{ width: 100%; padding: 0; }

	footer .footer-inner{
		display: block;
		padding: 3rem 2rem;
	}


	footer .sns{ justify-content: center; margin-top: 2rem; }
	footer .sns a{ font-size: 3rem; }

	footer .information .hashes{ margin-top: 1.5rem; }
	footer .information .hashes li{ font-size: 1rem; }

	footer .information .name{ text-align: center; }

	.frame-bottom{ position: relative; }
	.copyright{ justify-content: center; }

	.contents-box .inline .works-inline-list{ width: 100%; }

	.contents-box .inline .works-inline-list a span{ font-size: 1.0rem; }

	header,
	header .header-inner,
	header .logo{ height: var(--header-sp); }

	header .header-inner{ padding-left: 2rem; padding-right: 0; }



}





.humberger-menu{
	z-index: 10002 !important;
	padding: 0;
	height: var(--header-sp);
	width: var(--header-menu);
	height: var(--header-sp);
	position: fixed;
    top: 0;
    right: 0;
}
.humberger-menu .menu-trigger,
.humberger-menu .menu-trigger span{ display: inline-block; transition: all .4s; box-sizing: border-box; }
.humberger-menu .menu-trigger{ position: relative; width: var(--header-menu); height: var(--header-sp); }
.humberger-menu .menu-trigger span { position: absolute; left: calc(50% - calc(var(--header-menu-line) / 2)); width: var(--header-menu-line); height: .2rem; background: var(--color-white); }
.humberger-menu .menu-trigger span:nth-of-type(1) { top: 35%; }
.humberger-menu .menu-trigger span:nth-of-type(2) { top: 50%; }
.humberger-menu .menu-trigger span:nth-of-type(3) { top: 65%; }
.humberger-menu .menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(8px) rotate(-45deg);
	        transform: translateY(8px) rotate(-45deg);
	              top: 33%;
}
.humberger-menu .menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.humberger-menu .menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-9px) rotate(45deg);
	        transform: translateY(-6px) rotate(45deg);
	              top: 61%;
}
.humberger-menu .menu-trigger.active span:nth-of-type(1) { top: 34%; }
.humberger-menu .menu-trigger.active span:nth-of-type(2) { top: 60%; }








/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

	PRICE

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


.page-price .page-title{ background: url('./assets/images/price/header-bg.webp') no-repeat 50% 50% / 200rem auto; }

.page-price .message{ text-align: center; font-size: 1.4rem; line-height: 2.4; margin-bottom: 5rem; }

.price-wrapper{ padding: 8rem 0 10rem; }

.IndexLine {
	position: relative;
	display: inline-block;
	padding: 0 55px;
	  font-size: 20px;
  }
  
  .IndexLine:before, .IndexLine:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: black;
  }
  
  .IndexLine:before {
	left:0;
  }
  .IndexLine:after {
	right: 0;
  }
  
  #PriceList{
	margin-top: 25px;
}

#PriceList dl{
	display: table;
	width: 100%;
	table-layout: fixed;
}

#PriceList dl dt{
	display: table-cell;
	padding: 10px 0;
}

#PriceList dl dd{
	display: table-cell;
	padding: 10px 0;
	text-align: right;
	background: url(../images/price/line.gif) repeat-x 0 50%;
}

#PriceList dl dd span{
	display: inline-block;
	padding: 0 0 0 10px;
	background-color: #ffffff;
	font-family: var(--font-eng);
}