/*
Theme Name: tt-theme
Author: Techtouch
*/

/* TABLE OF CONTENTS
------------------------------------------------------------
* CSS Reset
* Global
* BreakPoint
* Layout
* Header
* Menus
* Featured Area
* Content
* Navigations
* Comments
* Widgets
* Footer
* Plugins
* Print
* Article
------------------------------------------------------------ */



/*	CSS Reset
------------------------------------------------------------ */
html,
body {
	border: none;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}
button {
	background-color: transparent;
	cursor: pointer;
}
figure {
	margin: 0;
}

/* Global
------------------------------------------------------------ */

html {
	font-size: 62.5%; /* 1rem = 10px */
	scroll-behavior: smooth;
}

body {
	background: #ffffff;
	box-sizing: border-box;
	color: #252729;
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Gothic", sans-serif;
	font-size: 1.6rem;
    line-height: 2.0;
	text-align: left;
	animation: fadeIn .6s ease 0s 1 normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@keyframes fadeIn {
    0% {
		opacity: 0
    }

    100% {
		opacity: 1
    }
}

/* Heading */
h1, h2, h3, h4, h5, h6 {
	color: #0974E8;
	font-weight: 600;
	line-height: 1.5;
	font-feature-settings: "palt";
	letter-spacing: .1rem;
}
h1 {
	font-size: 3.2rem;
}
h2 {
	font-size: 2.4rem;
}
h3 {
	font-size: 1.8rem;
}
h4 {
	font-size: 1.8rem;
}
h5 {
	font-size: 1.6rem;

}
h6 {
	font-size: 1.2rem;
}

@media (min-width: 768px) {
	h1 {
		font-size: 4.8rem;
	}
	h2 {
		font-size: 4.0rem;
	}
	h3 {
		font-size: 3.2rem;
	}
	h4 {
		font-size: 2.4rem;
	}
	h5 {
		font-size: 1.8rem;
	
	}
	h6 {
		font-size: 1.6rem;
	}
}

/* Link */
a {
	color: #252729;
	transition: all .15s ease-in-out;
	text-decoration: none;
}

/* Text */
p {
    line-height: 2.0;
}
b, strong {
	font-weight: 600;
}
strong {
	line-height: 1.5;
}
dfn, em, i {
	font-style: italic;
}
q {
	quotes: "" "";
}
cite {
	border-bottom: dotted 1px #999;
	font-style: normal;
}
code, kbd, tt, var {
	background-color: #F7F7F8;
	font-family: Consolas, "Courier New", monospace;
	font-size: 90%;
}
mark, ins {
	background: #FFE5A0;
	text-decoration: none;
}

/* List */
ul, ol {
	padding: 0;
	list-style: none;
}
li > ul,
li > ol {
	margin-bottom: 0;
}
dl {
	margin: 0;
	font-size: 1.4rem;
}
dt {
	font-weight: 600;
	margin-bottom: 0.8rem;
}
dd {
	margin: 0 0 2.4rem 0;
	line-height: 2;
}
dd > ul {
	list-style-type: disc;
	margin-left: 2.4rem;
}
@media (min-width: 768px) {
	dl.flex {
		display: flex;
		flex-wrap: wrap;
	}
	dl.flex > dt {
		margin-right: 3.2rem;
		width: 10rem;
		text-align: end;
	}
	dl.flex > dd {
		float: left;
		width: 75%;
	}
	
}

/* Media */
img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}
video {
	width: 100%;
}

::selection {
    background: #0974e8;
    color: #fff;
}

/* Color */
.is-black {
	color: #252729;
}

/* Layout
------------------------------------------------------------ */
.content-inner{
    padding: 5rem 0 0;
}
@media (min-width: 768px) {
	.content-inner{
		padding: 9.6rem 0 0;
	}
	.content-inner.about{
		overflow-x: hidden;
	}
}

section {
	width: 100%;
	margin: 12.8rem auto;
	padding: 0 2.4rem;
	box-sizing: border-box;
}

section:last-child {
    margin-bottom: 20rem;
}

.section-bg {
    background-color: #F1F8FE;
    padding: 6.4rem 2.4rem;
}

.section-first {
	margin-top: 6.4rem;
}
section.tab-section {
	padding: 0;
}

.section-top {
	margin: 5.6rem auto 3.2rem;
	max-width: 136rem;
	padding: 0 2.4rem;
	display: flex;
}
.hero-right-contents {
	display: none;
}
.hero-video-contents {
	position: relative;
	margin: 2.4rem 0 28%;
}
.hero-video-contents > .building-img {
	max-width: 78.3rem;
	width: calc(100% + 4.8rem);
	position: absolute;
	bottom: 0;
    margin: 0 0 0 -2.4rem;
}
.hero-video-contents > .people-img {
	max-width: 78.3rem;
	width: calc(100% + 4.8rem);
    position: absolute;
    margin: 0 0 0 -2.4rem;
    bottom: -40%;
}
section.full {
	padding: 0;
	margin-bottom: 12.8rem;
}
@media (min-width: 768px) {
	section {
		margin: 20rem auto;
		padding: 0 8rem;
	}
	section.tab-section {
		padding: 0 8rem;
	}
	.section-bg {
		background-color: #F1F8FE;
		padding: 8rem 4rem;
		width: calc(100% - 8rem);
	}
	.section-first {
		margin-top: 8rem;
	}
	.section-top {
		padding: 0 8rem;
	}
	.hero-video-contents {
		margin: 2.4rem 0 18rem;
	}
	.hero-video-contents > .building-img {
		width: 100%;
		margin: 0;
	}
	.hero-video-contents > .people-img {
		width: 100%;
		bottom: -50%;
		margin: 0;
	}
	section.full {
		margin-bottom: 20rem;
	}	
}
@media (min-width: 1024px){
	.section-top {
		margin: 8rem auto;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}	
	.hero-video-contents{
		display: none;
	}
	.hero-right-contents {
		display: block;
		position: relative;
		flex-shrink: 0;
	}	
}
@media (min-width: 1440px){
	.section-top {
		padding: 0 4rem;
	}	
}


/* Content
------------------------------------------------------------ */

/* Button */
.button-container {
	width: 100%;
	cursor: pointer;
}
.button-container:last-child {
	margin-bottom: 1.6rem;
}
@media (min-width: 768px) {
	.button-container {
		width: 24rem;	
		margin-bottom: 0;
	}
	.button-container:last-child {
		margin-bottom: 0;
	}
}
.button-container-sm {
	width: 12.4rem;
	cursor: pointer;
}
.button-base {
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	border-radius: 0.3rem;
	padding: 1.4rem 0;
	transition: .3s;  
	border: 1px solid #0974E8;
}
.button-sm {
	padding: 0.8rem 0;
}
@media (max-width: 780px) {
	.button-sm {
		padding: 0.6rem 1.2rem;		
	}
	.button-base {
		font-size: 1.2rem;
	}
	.button-container-sm {
		width: initial;
	}
}
.button-container.center {
	margin: auto;
}
.primary {
	background-color: #0974E8;
	color: #ffffff;
}
.primary:hover {
	background-color: #075BB7;
}
.outlined {
	background-color: #ffffff;
	color: #0974E8;
}
.outlined:hover {
	border: 1px solid #075BB7;
	color: #075BB7;
}
.white {
	border: 1px solid #ffffff;
	color: #ffffff;
}
.white:hover {
	border: 1px solid #EAEBEC;
	color: #EAEBEC;
}
.button-ul {
	display: flex;
	flex-direction: column-reverse;
	/* gap: 1.6rem; */
}
.more_btn {
	padding: 2.4rem 2.4rem 0;
    box-sizing: border-box;
}
@media (min-width: 768px) {
	.button-ul {
		flex-direction: initial;
		gap: 2.4rem;
	}
	.more_btn {
		padding-top: 4.8rem;
		box-sizing: unset;
	}
}

/* text */
.text-margin-sm {
	margin-top: 1.6rem;
}
.text-margin-md {
	margin: 2.4rem 0 3.2rem;
}
.body1 {
	font-size: 1.6rem;
}
.body2 {
	font-size: 1.4rem;
}
.body3 {
	font-size: 1.2rem;
}
.label1 {
	font-size: 1.6rem;
	line-height: 1.5rem;
}
.label2 {
	font-size: 1.4rem;
	line-height: 1.5rem;
}
.label3 {
	font-size: 1.2rem;
	line-height: 1.5rem;
}
.label4 {
	font-size: 1rem;
	line-height: 1.5rem;
}
.gray-darken10 {
	color:#72777E; 
}
.gray {
	color:#8C9197; 
}
.description-message {
	font-size: 1.4rem
}
@media (min-width: 768px) {
	.description-message {
		font-size: 1.6rem
	}
}

/* bold number */
.point_num {
	font-family: 'Open Sans';
	font-size: 5.6rem;
	font-weight: bold;
	line-height: 1.3;
	display: block;
}
@media (min-width: 768px) {
	.point_num {
		font-size: 11rem;
	}
}

/* heading */
.heading-center {
	text-align: center;
	margin-bottom: 3.2rem;
}
@media (min-width: 768px) {
	.heading-center {
		text-align: center;
		margin-bottom: 8rem;
	}
}

/* content */
.outlined-content {
	width: 100%;
    border: 2.4rem solid #F1F8FE;;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.outlined-content {
		border: 4rem solid #F1F8FE;;
	}
}

/* tab */
.tab-panel {
	width: 100%;
	max-width: 128rem;
	display: flex;
	position: relative;
	margin: auto;
}
.tab-panel > div {
	width: 50%;
	cursor: pointer;
	text-align: center;
	padding-bottom: 0.8rem;
	color: #252729;
	align-self: center;
}
.tab-panel > div > h5 {
	color: #252729;
	font-size: 1.2rem;
}
.tab-contents {
	max-width: 128rem;
	margin: auto;
}
.none-display {
	display: none;
}
#lamp{
	width: 50%;
	height: 0.2rem;
	background: #0974E8;
	display: block;
	position: absolute;
	bottom: 0;
	transition: all .2s ease-in;
	padding: 0;
}
#lamp.toB{
	left: 50%;
	transition: all .2s ease-in;
}
#lamp.toE{
	left: 0;
	transition: all .2s ease-in;
}
.tab-tob-screen-pc {
	display: none;
}
/* タブが3つの場合 */
#lamp-for-three-tabs {
	width: 50%;
	height: 0.2rem;
	background: #0974E8;
	display: block;
	position: absolute;
	bottom: 0;
	transition: all .2s ease-in;
	padding: 0;
}
#lamp-for-three-tabs{
	width: 33.3%;
}
#lamp-for-three-tabs.toB{
	left: 33.3%;
	transition: all .2s ease-in;
}
#lamp-for-three-tabs.toE{
	left: 0;
	transition: all .2s ease-in;
}
#lamp-for-three-tabs.others{
	left: 66.6%;
	transition: all .2s ease-in;
}
@media (min-width: 768px) {
	.tab-tob-screen-pc {
		display: initial;
	}
	.tab-panel > div {
		padding-bottom: 1.6rem;
	}
	#lamp{
		height: 0.4rem;
	}
	#lamp-for-three-tabs{
		height: 0.4rem;
	}
	.tab-panel > div > h5 {
		font-size: 1.6rem;
	}
}
/* タブが4つの場合 */
#lamp-for-four-tabs {
	width: 50%;
	height: 0.2rem;
	background: #0974E8;
	display: block;
	position: absolute;
	bottom: 0;
	transition: all .2s ease-in;
	padding: 0;
}
#lamp-for-four-tabs{
	width: 25%;
}
#lamp-for-four-tabs.tab1{
	left: 0;
	transition: all .2s ease-in;
}
#lamp-for-four-tabs.tab2{
	left: 25%;
	transition: all .2s ease-in;
}
#lamp-for-four-tabs.tab3{
	left: 50%;
	transition: all .2s ease-in;
}
#lamp-for-four-tabs.tab4{
	left: 75%;
	transition: all .2s ease-in;
}
@media (min-width: 768px) {
	.tab-tob-screen-pc {
		display: initial;
	}
	.tab-panel > div {
		padding-bottom: 1.6rem;
	}
	#lamp{
		height: 0.4rem;
	}
	#lamp-for-four-tabs{
		height: 0.4rem;
	}
	.tab-panel > div > h5 {
		font-size: 1.6rem;
	}
}

/* Card */
.card-list-container {
	gap: 1.6rem;
	display: grid;
}
.tab-contents > .card-list-container {
	padding: 3.2rem 2.4rem 0;
	box-sizing: border-box;
}
.tab-contents.event > .card-list-container {
	padding: 0 2.4rem 0;
}
.card-container {
	width: 100%;
	background-color: #ffffff;
	border-radius: 6px;
}
.card-container > a {
	display: flex;
    flex-direction: column;
    height: 100%;
}
.card-image {
	width: 100%;
	border-radius: 6px 6px 0 0;
}
.card-description {
	padding: 2.4rem;
	word-break: break-all;
	height: 100%;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card-description.cases {
	gap: 1.6rem;
    justify-content: unset;
}
.card-description.cases .card-title {
	margin-bottom: 1.6rem;
}
.card-tags{
	display: flex;
	gap: 0.8rem;
	flex-wrap: wrap;
}
.card-tags.event{
	margin-top: 1.6rem;
}
.tag {
	font-size: 1.2rem;
	line-height: 1.5;
	color: #4E5156;
	padding: 0.4rem 0.6rem;
	border-radius: 3px;
	background-color: #EAEBEC;
}
.card-event {
	position: relative;
}
.event-finish-tag {
	padding: 0.1rem 0.2rem;
	background-color: #4E5156;
	border-radius: 3px;
	font-size: 1rem;
	color: #ffffff;
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	line-height: 1.5;
}
.card-event-date {
	margin-top: -0.8rem;
}
.horizontal-card-event-date {
	margin-top: 0.8rem;
}
.card-shadow {
	transition: box-shadow .2s ease-in;
	box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
}
.card-shadow:hover {
	box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
}
.card-title {
	font-size: 1.6rem;
}
.tab-contents.others{
	margin-top: -7.6rem;
}
@media (min-width: 768px) {
	.tab-contents.others{
		margin-top: -8rem;
	}
	.card-list-container {
		gap: 2.4rem;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.card-list-container.result-others {
		gap: 2.4rem;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.card-list-container.result-others.more_than_default {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.tab-contents > .card-list-container {
		padding: 8rem 4rem 0;
		box-sizing: border-box;
	}
	.tab-contents.event > .card-list-container {
		padding: 0 4rem 0;
		box-sizing: border-box;
	}
	.tab-contents > .card-list-container.result-others {
		padding: 0 4rem 0 !important;
	}
	.card-container {
		max-width: 38rem;
	}
	.card-description {
		padding: 3.2rem;
	}
	/* 導入事例用 */
	.card-list-container.cases {
		max-width: 118.8rem;
	}
	.center-position{
		display: flex !important; 
		justify-content: center;
	}
}

/* horizontal card */
.horizontal-card-container {
	background: #FFFFFF;
	border-radius: 0.6rem;
	display: flex;
	max-width: 62.8rem;
}
.horizontal-card-container > a {
	padding: 0.8rem 1.6rem 0.8rem 0.8rem;
	box-sizing: border-box;
	display: flex;
	align-items: center
}
.horizontal-card-container > a > img {
	border-radius: 0.6rem;
	max-width: 24rem;
}
.horizontal-card-description {
	padding-left: 1.6rem;
	display: flex;
    flex-direction: column;
    justify-content: center;
	word-break: break-all;
}
.horizontal-card-description > ul {
	margin-top: 1.6rem;
}
@media (min-width: 768px) {
	.horizontal-card-container {
		min-width: 55rem;
	}
}

/* Logo */
.logo-slider {
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
}
.logo-for-slider {
	width: 10rem;
	margin-right: 1.6rem;
}
.logo-slider-container > div {
	flex-shrink: 0;
}
.slick-initialized .slick-slide {
	width: auto;
	flex-shrink: 0;
}
.slick-slider .slick-track, .slick-slider .slick-list {
	display: flex;
	flex-shrink: 0;
}
.logo-list {
    width: 100%;
    margin: auto;
	display: grid;
	grid-template-columns:repeat(3, 1fr);
	margin-top: 3.2rem;
	gap: 4rem;
	justify-content: center;
}
.pick-logo-list {
	display: grid;
	margin: auto;
	gap: 2.4rem;
	grid-template-columns:repeat(3, 1fr);
	padding: 0 2.4rem;
	box-sizing: border-box;
}
.pick-logo-list.service {
	margin-top: 4rem;
}
.logo-list.all {	
	max-width: 128rem;
	padding: 0 2.4rem;
}
.logo-list.all-md {
	max-width: 104rem;
}
.logo-list.with-link {
	gap: 1.6rem;
}
.archive-customer-list {
	width: 100%;
    margin: auto;
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	margin-top: 3.2rem;
	gap: 1.6rem;
	justify-content: center;
	padding: 0 2.4rem;
	box-sizing: border-box;
}
.customer-logo-md {
	width: 100%;
    min-width: 8rem;
    margin: auto;
}
.archive-customer-logo {
	padding: 1.6rem;
	width: 15.6rem;
	box-sizing: border-box;
	padding: 0 2.4rem;
	margin: auto;
}
.archive-customer-logo.link{
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	transition: box-shadow .2s ease-in;
	padding: 0;
}
.archive-customer-logo.link:hover{
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
}
.archive-customer-logo > a {
	padding: 1.6rem;
	display: block;
	box-sizing: border-box;
}
.archive-customer-logo > a > p{
	color: #0974E8;
	text-align: center;
	line-height: 1.5;
	margin-top: 0.8rem;
	font-size: 1.2rem;
}

@media (min-width: 768px) {
	.logo-list {
		margin-top: 8rem;
		gap: 4rem;
		display: grid;
		grid-template-columns:repeat(6, 1fr);
	}
	.pick-logo-list {
		gap: 1.6rem;
		max-width: 110.4rem;
		grid-template-columns:repeat(6, 1fr);
		padding: 0 8rem;
	}
	.archive-customer-list {
		grid-template-columns:repeat(4, 1fr);
	}
	.customer-logo-md {
		max-width: 14rem;
		width: 100%;
	}
	.archive-customer-logo {
		padding: 2rem 2rem 3.6rem;
		max-width: 20rem;
		width: 100%;
		margin: 0;
	}
	.archive-customer-logo.link {
		padding: 0;
	}
	.archive-customer-logo > a {
		padding: 2rem 2rem 3.6rem;
	}
	.archive-customer-logo > a > p{
		font-size: 1.4rem;
	}
	.logo-for-slider {
		width: 16rem;
	}
}
@media (min-width: 1024px) {
	.archive-customer-list {
		grid-template-columns:repeat(6, 1fr);
	}
	.pick-logo-list {
		max-width: 144rem;
		grid-template-columns:repeat(9, 1fr);
		/* good design logo有りなら以下 */
		padding: 0 8rem 0;
	}
}

.customers-description {
	margin: 3.2rem 0;
	padding: 0 2.4rem;
	display: flex;
	justify-content: center;
}
.customers-annotation-description {
	margin-top:3.2rem;
	padding: 0 2.4rem;
	display: flex;
	justify-content: center;
}
@media (min-width: 768px) { 
	.customers-description {
		text-align: center;
		margin: -5.6rem 0 5.6rem;
	}
	.customers-annotation-description {
		margin-top:5.6rem;
		text-align: center;
	}
}

.list-item {
	width: 16rem;
	height: auto;
}

/* Loading */
.loading-circle-container {
	display: flex;
    transform: scale(1, 1);
    justify-content: center;
	margin-top: 4.8rem;
}
.loading-circle {
	width: 14px;
	height: 14px;
	background-color: #FFCA3A;
	border: none;
	border-radius: 14px;
	animation-fill-mode: both;
	animation: loader 1.8s infinite ease-in-out;
}
.loading-circle.center {
  margin-left: 0.825rem;
  animation-delay: 0.16s;
}
.loading-circle.right {
  margin-left: 0.825rem;
  animation-delay: 0.32s;
}
@keyframes loader{
	0%,
	80%,
	100% { transform: scale(0); }
	40% { transform: scale(1); }
}

/* pc / mobile */
.screen-pc {
	display: none;
}
@media (min-width: 768px) { 
	.screen-mobile {
		display: none !important;
	}
	.screen-pc {
		display: flex;
	}
}
.text-center {
	text-align: center;
}

/*	Header
------------------------------------------------------------ */
.site-header {
	position: absolute;
    left: 0;
    right: 0;
    z-index: 200;
    box-sizing: border-box;
    background-color: #ffffff;
    width: calc(100% - 3.2rem);
    max-width: 140.8rem;
    border-radius: 0.6rem;
    margin: auto;
	-webkit-transition: -webkit-filter .3s ease;
	transition: -webkit-filter .3s ease;
	transition: filter .3s ease;
	transition: filter .3s ease, -webkit-filter .3s ease;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.site-header.color-reversal {
	background-color: transparent;
	transition: all .2s ease-in;
}
.header-logo.before {
	display: block;
}
.header-logo.before.is-scrolled-logo {
	display: none;
}
.header-logo.after {
	display: none;
}
.header-logo.after.is-scrolled-logo {
	display: block;
}
.global-navigation {
	max-width: 144rem;
	margin: auto;
	padding: 2rem 0 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}
.is-scrolled {
	padding: 0;
	position: fixed;
	top: 0;
	width: 100%;
	padding: 1.2rem 1.6rem;
	margin-top: -1.2rem;
	background-color: transparent;
}
.global-navigation > ul {
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.5;
	gap: 2rem;
}
.header-logo-a {
	display: flex;
}
.global-navigation > ul > li > ul {
	display: flex;
	gap: 0.8rem;
	align-items: center;
}

.close-icon {
	margin: 0 0.4rem 0 -0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
}
.site-header.contact > .global-navigation {
	height: 6rem;
}
.header-logo {
	width: 12rem;
}
.global-navigation > ul:first-child > li:not(:first-child) {
	display: none;
}
@media (min-width: 768px) {
	.site-header {
		position: fixed;
	}
	.site-header.color-reversal {
		background-color: transparent;
	}
	.site-header.color-reversal.is-hovered {
		background-color: #ffffff;
	}
	.site-header.contact {
		position: absolute;
	}
	.site-header.contact > .global-navigation {
		height: 7.1rem;
	}
	.site-header.is-scrolled > .global-navigation {
		padding: 1.6rem 2.4rem;
	}
	.global-navigation {
		padding: 1.6rem 2.4rem;
	}
	.site-header {
		top: 1.4rem;
	}
	.is-scrolled {
		padding: 0;
		position: fixed;
		top: 1.4rem;
		left: 0;
		right: 0;
		width: calc(100% - 3.2rem);
		max-width: 140.8rem;
		margin: auto;
		border-radius: 0.6rem;
		background-color: #ffffff;
		filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.2));
	}
	.header-logo {
		width: 16rem;
		height: 100%;
	}
	.global-navigation > ul:first-child > li:not(:first-child) {
		display: block;
	}
	.global-navigation > ul {
		font-size: 1.2rem;
	}
}
@media (min-width: 900px) {
	.global-navigation > ul {
		font-size: 1.4rem;
	}
}
@media (min-width: 1024px) {
	.global-navigation > ul {
		gap: 3.2rem;
	}
}
.header-link {
	position: relative;
  	display: inline-block;
  	text-decoration: none;
}
.header-link.color-reversal{
	color: #ffffff;
}
.header-link::after {
	position: absolute;
	bottom: -0.4rem;
	left: 0;
	content: '';
	width: 100%;
	height: 0.2rem;
	border-radius: 0.6rem;
	background: #0974E8;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
}
.header-link:hover::after {
  	transform: scale(1, 1);
}
nav li a.current::after {
	transform: scale(1, 1);
}
.button-sm.color-reversal {
	background-color: transparent;
    color: #ffffff;
	border: 1px solid #ffffff;
}
.header-link.login{
	display: none;
}
@media (max-width: 1130px){
	.button-container-sm.request{
		display: none;
	}
}
@media (min-width: 1200px){
	.header-link.login{
		display: block;
	}
}
.mask {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #252729;;
	padding: 0px;
	top: 0px;
	left: 0px;
	opacity: 0.2;
	z-index: 100;
}
.global-nav-menu-item {
	padding: 3.2rem 0;
	display: none;
	border-radius: 0 0 0.6rem 0.6rem;
	height: 15.7rem;
}
.global-nav-menu-item > ul {
	display: none;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 15.6rem;
	margin: auto;
	height: 100%;
	transition: all 1s ease-in;
}
.global-nav-menu-item > ul.service {
	gap: 12rem;
}
.global-nav-menu-item > ul.about {
	gap: 4.8rem;
}
.global-nav-menu-item > ul.about > li > a {
	padding: 8rem 0;
}
.global-nav-menu-item > ul > li > a {
	display: flex;
	align-items: center;
	gap: 3.2rem;
	transition: transform .3s ease-out;
}
.global-nav-menu-item > ul > li > a:hover {
	transform: translateY(-10px);
}
.global-nav-menu-item > ul > li > a > img {
	width: 12rem;
}
@keyframes show{
    from{
        opacity: 0;
		transform: translateY(20px);
    }
    to{
        opacity: 1;
		transform: translateY(0px);
    }
}
.global-nav-menu-item > ul.is-show {
	display: flex;
	animation: show 0.5s forwards;
}
.menu-icon {
	border-radius: 50%;
	box-sizing: border-box;
	width: 4rem;
	height: 4rem;
	margin-left: 0.8rem;
	transition: all .2s ease-in;
	background-color: #fff;
	display: flex;
    align-items: center;
	justify-content: center;
}	
.menu-icon:hover {
	background-color: #0974E8;
}
.menu-icon-svg {
	fill: #8C9197;
	transition: all .2s ease-in;
}
.menu-icon.color-reversal {
	background-color: transparent;
}
.menu-icon.is-scrolled-menu-icon {
	background-color: #0974E8;
}
.menu-icon.color-reversal .menu-icon-svg {
	fill: #ffffff;
}
.menu-icon.is-scrolled-menu-icon .menu-icon-svg {
	fill: #ffffff;
}
.menu-icon:hover .menu-icon-svg {
	fill: #ffffff;
}

.global-nav-menu-item-mobile {
	position: fixed;
	top  : 0;
	left : 0;
	color: #fff;
	background: #0974E8;
	width: 100%;
	height: 100%;
	padding: 0 1.6rem 16rem;
	z-index: 999;
	box-sizing: border-box;
	overflow-y: scroll;
	display: none;
	min-width: 100vw;
    min-height: 100vh;
}
.global-nav-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2rem 0 0 0;
	height: 6rem;
	box-sizing: border-box;
}
.header-menu-left-items-mobile {
	display: flex;
	gap: 1.8rem;
}
.header-menu-left-items-mobile > li.screen-mobile {
	display: flex;
	align-items: center;
}
.menu-items-mobile {
	margin: 4.8rem 0 4rem;
}
.menu-items-mobile > ul {
	display: grid;
    gap: 3.2rem;
	line-height: 1.3;
}
.menu-items-mobile  > ul > li > ul {
	display: grid;
    gap: 1.6rem;
}
.menu-items-mobile a[href]{
	color: #ffffff;
}
.menu-item-last-mobile {
	margin-bottom: 3.2rem;
}

/*	Footer
------------------------------------------------------------ */
footer {
	padding: 0 2.4rem 9.6rem;
    overflow-x: hidden;
}

footer > nav {
	max-width: 128rem;
    margin: auto;
}
.footer-items {
	display: grid;
	margin: 4rem 0 0;
	gap: 3.2rem;
}
.parent {
	font-size: 1.4rem;
	font-weight: 600;
}
.footer-link:hover, .footer-link:hover.with-icon svg {
	color: #0974E8;
	transition: color fill .15s ease-in;
	fill: #0974E8;
}
.footer-link.with-icon {
	display: flex;
    align-items: center;
	margin-top: 1.6rem;
}
.footer-link.with-icon svg {
	margin-left: 0.4rem;
	width: 1.2rem;
	fill:#252729;
}
.parent-column {
	margin-bottom: 3.2rem;
}
.footer-divider {
	width: 100%;
	height: 0.1rem;
	background-color: #DCDEE0;
	margin: 4rem 0;
}
.footer-bottom-items {
	gap: 4rem;
	margin-bottom: 4rem;
}
@media (min-width: 768px) {
	footer {
		margin: 0 8rem 12rem;
		padding: 0;
		overflow-x: initial;
	}
	.footer-items {
		gap: 4rem;
		margin: 4rem 0;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.footer-divider {
		margin: 0 0 4rem;
	}
	.footer-bottom-items {
		display: flex;
	}
}
@media (min-width: 1024px) {
	.footer-items {
		display: flex;
		gap: 8rem;
		margin: 4rem 0;
		flex-wrap: wrap;
	}
}
.breadcrumbs {
	font-size: 1.2rem;
	line-height: 2;
	margin: 0 0 9.6rem 0;
	overflow: auto;
	white-space: pre;
    width: 100vw;
	color: #8C9197;
}
.breadcrumbs.margin-top {
	margin-top: 4rem;
}
.breadcrumbs > span:not(:first-child) {
	margin: 0 0.8rem;
}
.breadcrumbs > span:first-child {
	margin-right: 0.8rem;
}
.breadcrumbs > span > a {
	color: #8C9197;
}
.breadcrumbs-top-link {
	color: #8C9197;
	margin-right: 0.8rem;
}
@media (min-width: 768px) {
	.breadcrumbs {
		margin: 0 0 12rem 0;
		white-space: initial;
    	width: 100%;
	}
}

.breadcrumb {
	font-size: 1.2rem;
	line-height: 2;
	margin: 0 0 9.6rem 0;
	overflow: auto;
	white-space: pre;
	width: calc(100% + 2.4rem);
	color: #8C9197;
	padding-right: 2.4rem;
}
.breadcrumb > img {
	margin: 0.3rem 0.8rem 0.6rem;
}
.breadcrumb > a {
	color: #8C9197;
}
.breadcrumb-tax-margin {
    margin: 4rem 0 -12.8rem;
}
@media (min-width: 768px) {
	.breadcrumb {
		margin: 0 0 12rem 0;
		white-space: initial;
        width: 100%;
	}
	.breadcrumb > a:hover {
		text-decoration: underline !important;
	}
}


/*	Page Style
------------------------------------------------------------ */
/* home_アカウント数 */
.num-account-container {
	background-color: #F7F7F8;
	padding: 0.8rem 0;
	align-items: center;
	margin: 3.2rem 0;
	display: none;
	width: 100%;
	max-width: 50.4rem;
}
.num-account-container > h4 {
	margin-left: 1.6rem;
}
.hero-left-contents {
	width: 100%;
}
.hero-container {
	display: flex;
}
.hero-title {
	text-align: left;
	width: 100%;
}
video {
	filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.1));
	border-radius: 6px;
	display: block;
	margin: 0;
}
.hero-video.pc {
	display: none;
}
.hero-video.pc {
	display: none;
}
.sub-title{
	font-size: 1.4rem;
}
.sub-title-br {
	display: block;
}
.top-banner-container {
	display: flex;
	gap:1.6rem;
	justify-content: center;
	margin-top: 2.4rem;
}
.logo-with-annotation {
	display: grid;
	text-align: center;
	gap:0.4rem;
	font-size: 1rem;
	color: #72777E;
}
.top-banner {
	width: auto;
	max-height: 6rem;
}
.top-annotation-container {
	display: grid;
	gap:0.8rem;
	margin-top: 2.4rem;
}
.top-annotation-description {
	margin-left:2.3rem;
	text-indent:-2.3rem;
}
.top-annotation-description > span {
	margin-right: 0.8rem;
}
@media (min-width: 768px) {
	.hero-video {
		max-width: 54.5rem;
		max-height: min-content;
		margin: auto;
	}
	.hero-left-contents {
		width: auto;
		z-index: 10;
	}
	.top_contact-button {
		margin: 0 0 3.2rem;
	}
	.hero-video.tablet {
		display: block;
		margin-bottom: 3.2rem;
	}
	.hero-right-contents > .building-img {
		max-width: 78.3rem;
		position: absolute;
		bottom: -4rem;
		left: -6rem;
	}
	.hero-right-contents > .people-img {
		max-width: 78.3rem;
		position: absolute;
		left: -5.6rem;
    	bottom: -16.5rem;
	}
	.sub-title{
		font-size: 1.6rem;
	}
	.sub-title-br {
		display: none;
	}
	.top-annotation-description {
		width: 100%
	}
	.top-banner-container {
		gap: 2.4rem;
		margin-top: 3.2rem;
	}
	.top-banner {
		height: 8.4rem;
		max-height: unset;
	}
	.top-annotation-container {
		margin-top: 3.2rem;
	}
}
@media (min-width: 1024px) {
	.section-top {
		justify-content: space-between;
	}
	.hero-title {
		font-size: 4.2rem;
	}
	.hero-video.tablet {
		display: none;
	}
	.hero-video.pc {
		max-width: 54.5rem;
		margin: 0 0 0 6.4rem;
		height: unset;
		display: block;
	}
	.top_contact-button{
		display: block;
		margin-top: 3.2rem;
		width: 24rem;
	}
	.sub-title-br {
		display: block;
	}
	.top-annotation-description {
		width: 50.4rem;
		margin-top: 0;
	}
	.top-banner-container {
		justify-content: left;
	}
}
@media (min-width: 1350px) {
	.sub-title-br {
		display: none;
	}
	.hero-title {
		font-size: 4.8rem;
	}
}

/* 重要 */
.important-message-container {
	margin: 6.4rem 2.4rem;
}
.important-message-wrapper {
	padding: 1.6rem;
	display: flex;
	gap: 0.8rem;
	flex-direction: column;
	background-color: #FFF2F2;
	border: 2px solid #FF595E;
	box-sizing: border-box;
}
.important-message-wrapper h4 {
	font-size: 2rem;
	color: #FF595E;
	margin-bottom: 0;
}
.important-text {
	color: #FF595E;
	font-size: 1.4rem;
}
.important-text strong {
	font-weight: 400;
}
@media (min-width: 768px) {
	.important-message-container {
		display: flex;
		justify-content: center;
		margin: 6.4rem 4rem -1.6rem;
	}
	.important-message-wrapper h4 {
		font-size: 2.4rem;
	}
	.important-text {
		font-size: 1.6rem;
		text-align: center;
	}
	.important-text:hover {
		text-decoration: underline;
	}
}

/* home_テックタッチでできること */
section#introduction {
	margin-top: 6.4rem;
}
.feature-description{
	margin: 3.2rem auto 1.6rem;
	max-width: 64rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.feature-description h3{
	margin-bottom: 1.6rem;
}
.feature-description.tob{
	margin-top: 6.4rem;
}
.feature-container {
	display: grid;
	justify-content: center;
	gap: 1.6rem;
}
.feature-container > li {
	display: grid;
	justify-content: center;
	background-color: #ffffff;
	border-radius: 0.6rem;
	padding: 2.4rem;
	gap: 1.6rem;
}
.feature-container > li > img {
	width: 24rem;
	margin: auto;
}
.feature-title {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.base-container-margin{
	margin: 0 auto 2.4rem;
}
.feature-detail-button {
	margin: 2.4rem auto 0;
}
@media (min-width: 768px) {
	section#introduction {
		margin-top: 12.8rem;
	}
	.section-top {
		display: block;
	}
	.feature-header {
		text-align: center;
	}
	.feature-title {
		min-height: 7.2rem;
	}
	.feature-description{
		margin: 8rem auto 2.4rem;
		max-width: 64rem;
	}
	.feature-description h3{
		margin-bottom: 2.4rem;
	}
	.feature-detail-button {
		margin: 4.8rem auto 0;
	}
	.feature-description.tob{
		margin-top: 8rem;
	}
}
@media (min-width: 1024px) {
	.num-account-container {
		display: inline-flex;
		justify-content: center;
	}
	.section-top {
		display: flex;
	}
	.feature-container {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2.4rem;
	}
	.feature-container > li {
		padding: 5.6rem;
		gap: 3.2rem;
	}
	.feature-container > li > img {
		width: 24rem;
	}
	.base-container-margin{
		margin-bottom: 4.8rem;	
	}
}

.function-container {
	display: grid;
	max-width: 84rem;
	gap: 8rem;
	margin: auto;
}
.function-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.function-header > img {
	width: 20rem;
}
.function-text-container h3 {
	margin-bottom: 0.8rem;
}
.function-num-img {
	display: none;
}
.function-img {
	margin-top: 1.6rem;
	border-radius: 0.6rem;
	filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.1));
}

@media (min-width: 768px) {
	.function-num-img {
		display: block;
	}
	.function-text-container {
		margin: 0 2.4rem 0 0;
	}
	.function-img.service {
		margin-top: 0;
	}
}

.button-ul.cases {
	justify-content: center;
}

/* home_お役立ち資料 */
.home-resources-container {
	display: grid;
	justify-content: center;
	max-width: 96.4rem;
	gap: 3.2rem;
}
.home-resources-container > div {
	display: grid;
}
.home-resources-container > div > img {
	width: 16rem;
	margin: auto;
}
.home-resources-horizontal-card-list-container {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
}
@media (min-width: 1024px) {
	.home-resources-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 9.6rem;
	}
	.home-resources-container > div > img {
		width: 24rem;
	}
}


/* home_セミナー */
.home-event-horizontal-card-list-container {
	display: flex;
	justify-content: center;
	gap: 2.4rem;
}
.home-event-horizontal-card-list-container > li {
	flex: 1;
}
.short-list-pc {
	display: none;
}
@media (min-width: 768px) {
	.short-list-pc {
		display: grid;
	}
	.short-list-mobile {
		display: none;
	}
}
@media (min-width: 1024px) {
	.home-event-horizontal-card-list-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: center;
		max-width: 128rem;
		gap: 2.4rem;
	}
}

/* home バナー */
/* バナー */
.floating-box {
	width: 50%;
    position: fixed;
    bottom: 1.6rem;
    right: 1.6rem;
    z-index: 20;
}
.is-show {
	display: block;
}
.is-closed {
	display: none !important;
}
.floating-box>.banner-close-btn {
    background-color: #dcdee0;
    border-radius: 12px;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
	justify-content: flex-end;
    position: absolute;
    top: -1.2rem;
    left: -1.2rem;
    box-shadow: 2px 4px 8px rgb(0 0 0 / 20%);
    cursor: pointer;
    transition: all .3s;
    z-index: 1;
}
.floating-box>.banner-close-btn:hover {
    background-color: #cfd1d4;
}
.banner-close-icon {
	width: 1.2rem;
	height: 1.2rem;
}
.banner-img {
	border-radius: 0.6rem;
	box-shadow: 2px 4px 8px rgb(0 0 0 / 20%);
	width: 100%;
	transition: all .3s;
}
.banner-img:hover {
    filter: brightness(1.1);
}
@media (min-width: 768px) {
	.floating-box {
		width: 36rem;
		bottom: 2.4rem;
    	right: 2.4rem;
	}
}


#banner-type2{
    left : 1.6rem;
	width: 28rem;
	/* opacity: 0; */
	transform: translateY(130%);
	transition: transform 0.5s ease; 
}

#banner-type2.show{
	transform: translateY(0);
}

#banner-type2 .banner-close-btn{
	background-color: unset;
 	top: 0.8rem;
	left: -0.8rem;
	right: 0.8rem; 
	box-shadow: none;
	height: unset;
	width: 100%;
}
#banner-type2 .banner-close-icon {
	width: 2.8rem;
    height: 2.8rem;
    max-width: unset;
}
#banner-type2 .banner-img {
	box-shadow: none;
}
@media (max-width: 768px) {
	#banner-type2{
		display: none;
	}
}

/* バナー sp */
.floating-box-sp{
	/* display: none; */
	display: flex;
	position: fixed;
	bottom: 0;
	width: 100%;
	box-shadow: none;
	opacity: 0;
	transform: translateY(130%);
	transition: transform 0.5s ease; 
}
.floating-box-sp .floating-box-sp-main{
	display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
}
.floating-box-sp .banner-close-btn{
	position: absolute;
    display: flex;
    top: 10%;
    left: 7.3%;
    /* width: 2.5rem; */
    width: 3rem;
    height: 3rem;
    background: transparent;
    z-index: 30;
}
.floating-box-sp .banner-close-icon{
	width: 4rem;
    height: 4rem;
}
.floating-box-sp .banner-img{
	box-shadow: none;
}
.floating-box-sp .banner-img:hover {
    filter: brightness(1.1);
}

@media (max-width: 768px) {
	.floating-box-sp{
		opacity: 1;
		transform: translateY(100%);
	}
	.floating-box-sp.show{
		opacity: 1;
		transform: translateY(0);
	}
}

/* service */
.service-hero-container {
	position: relative;
	padding: 0 2.4rem;
}
.service-hero-text {
	margin-top: 5.6rem;
}
.service-hero-container h5 {
	margin: 0.8rem 0 4.8rem;
}
.cancellation-line-height > p {
	line-height: unset;
}
section.service {
	max-width: 104.8rem;
	display: grid;
	gap: 12rem;
	padding: 0;
	margin-bottom: -6.4rem;
}
section.service.last {
	margin-bottom: 0;
}
section.service-points {
	display: grid;
	gap:6.4rem;
	padding: 0 2.4rem;
	box-sizing: border-box;
}
.service-function-header {
	margin-bottom: -9.6rem;
}
.service-point-container {
	display: grid;
	gap: 3.2rem;
}
.service-point-container img {
	width: 28rem;
	margin: auto;
}
.service-point-container:nth-of-type(even) {
	flex-direction: row-reverse;
}
.service-text-container h2 {
	margin: 0 auto 1.6rem;
}
.service-text-container > p {
	font-size: 1.4rem;
}
.outlined-content.service-contents {
	height: 100%;
	padding: 2.4rem;
}
.service-contents-description {
	display: grid;
	gap: 0.8rem;
	margin-bottom: 6.4rem;
}
.service-contents-description h3 {
	font-size: 2.4rem;
}
.service-contents > ul {
	display: grid;
	gap: 6.4rem;
	grid-template-columns: none;
}
.service-contents > ul > li {
	display: grid;
	gap: 2.4rem;
}
.service-contents h4 {
	color: #252729;
	margin-bottom: 0.8rem;
}
.service-contents > ul > li img {
	width: 20rem;
	margin: auto;
}
.service-title-block{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap:16px;
	text-align: center;
}
.service-tog-service-title{
	font-weight: 700;
	font-size: 32px;
}
.service-tog-service-subtitle{
	font-weight: 700;
	font-size: 16px;
}
@media (min-width: 768px) {
	.service-hero-container {
		padding: 0 4rem;
	}
	.service-hero-container h5 {
		margin: 1.6rem 0 0;
		padding: 0;
	}
	.service-hero-container .service-hero-img {
		margin-top: 6.4rem;
	}
	.service-top > div {
		display: flex;
		flex-direction: column-reverse;
	}
	section.service-points {
		max-width: 104.8rem;
		display: grid;
		gap: 12rem;
		padding: 0 6rem;
	}
	section.service {
		margin-bottom: -12rem;
	}
	.service-function-header {
		margin-bottom: -12rem;
	}
	.service-point-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8rem;
	}
	.service-text-container h2 {
		margin: 0 auto 2.4rem;
	}
	.service-point-container img {
		width: 32rem;
	}
	.service-text-container {
		max-width: 52.8rem;
	}
	.service-text-container > p {
		font-size: 1.6rem;
	}
	.service-contents-description {
		gap: 2.4rem;
		margin-bottom: 8rem;
	}
	.service-contents-description h3 {
		font-size: 3.2rem;
	}
	.service-contents > ul {
		gap: 8rem;
		grid-template-columns: 1fr 1fr;
	}
	.service-contents h4 {
		margin-bottom: 1.6rem;
	}
	.service-contents > ul > li img {
		width: 22rem;
		margin-bottom: 0;
	} 
	.service-contents > ul > li {
		max-width: 38rem;
	}
	.outlined-content.service-contents {
		padding: 8rem;
	}
	.service-hero-text-img {
		margin-top: 6%;
		z-index: 10;
	}
	.service-title-block{
		gap:24px;
	}
	.service-tog-service-title{
		font-size: 48px;
	}
	.service-tog-service-subtitle{
		font-size: 20px;
	}
}
@media (min-width: 1024px) {
	.service-hero-text{
		margin-top: 0;
		padding: 0;
		font-size: min(calc(100vw * 0.026), 4rem);
	}
	.service-hero-container > div {
		margin-right: 2.4rem;
	}
	.service-hero-container {
		margin: 0 auto;
		border: 4rem solid #F1F8FE;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% - 8rem);
		max-width: 136rem;
		justify-content: space-between;
	}
	.service-hero-container.toe {
		padding: 6.4rem min(4%, 6.4rem);
	}
	.service-hero-container.tob {
		padding: 6.4rem min(5%, 8rem);
	}
	.service-hero-text-img {
		position: relative;
		width: 100%;
	}
	.service-hero-container .service-hero-img{
		width: 52%;
		max-width: 56rem;
		margin: unset;
		position: unset;
	} 
}

/* サービス_価格 */
.contact-price-container {
	display: grid;
	grid-template-areas: "title"
	"image"
	"description"
	"button";
	gap: 0 3.2rem;
}
.contact-price-container > img {
	grid-area: image;
	width: 22rem;
	height: 22rem;
	margin: auto;
}
.contact-price-container > h2 {
	grid-area: title;
	text-align: center;
	margin-bottom: 3.2rem;
}
.contact-price-container > p {
	grid-area: description;
}
.contact-price-container > .button-container {
	grid-area: button;
}
@media (min-width: 768px) {
	.contact-price-container {
		grid-template-areas: "image title"
	"image description"
	"image button";
	justify-content: center;
	align-items: center;
	gap: 0 8rem;
	}
	.contact-price-container > h2 {
		text-align: left;
		margin-bottom: 0;
	}
	.contact-price-container > img {
		width: 24rem;
		height: auto;
	}
}

/* contact box */
.contact-box {
	margin: 12.8rem auto;
	max-width: 128rem;
}
.contact-box-img {
	margin: auto;
	max-width: 24rem;
}
.outlined-content.contact {
	display: grid;
}
.outlined-content.contact.pc {
	display: none;
}
.outlined-content.contact.mobile {
	padding: 2.4rem;
	margin: 2.4rem auto 0;
	justify-content: center;
}
.outlined-content.contact.mobile > h3 {
	font-size: 2.4rem;
	margin: 0 auto 2.4rem;
}
.outlined-content.contact {
    border: 2.4rem solid #D9EAFE;;
}
@media (min-width: 768px) {
	.contact-box {
		margin: 20rem auto;
		padding: 0 8rem;
	}
	.outlined-content.contact {
		border: 4rem solid #D9EAFE;;
	}
	.outlined-content.contact.mobile > ul {
		margin: auto;
	}
}

@media (min-width: 1024px) {
	.outlined-content.contact.pc {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 8rem 0;
	}
	.outlined-content.contact.mobile {
		display: none;
	}
	.contact-box-img {
		max-width: 34rem;
		margin: 0 8rem 0 0;
	}
}

/* contact */
.contact-container {
	display: grid;
	gap: 3.2rem;
	margin: 6.4rem auto 12rem;
	padding: 0 2.4rem;
}
.contact-container > div > h3 {
	margin-bottom: 3.2rem;
	text-align: center;
	font-size: 2.4rem
}
.contact-container > div > p {
	text-align: left;
	font-size: 1.4rem;
}
.contact-container > div > img {
	margin: auto;
	display: flex;
	margin-top: 1.6rem;
	width: 24rem;
}
.button-container.download {
	margin: 1.6rem auto 3.2rem;
}
.contact-container > div > img.resources-img {
	border-radius: 0.6rem;
	width: 100%;
	max-width: 64rem;
}
.contact-form-container > div {
	display: flex;
	justify-content: center;
}
.contact-form-container.event {
	box-shadow: initial;
	margin: auto;
	padding: 0;
	width: 100%;
}
.contact-form-container label{
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: 600;
}
.contact-form-link {
	color: #0974E8;
}
.contact-form-label {
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: 600;
}
.contact-form-container p {
	margin-bottom: 2.4rem;
}
.contact-form-container p:last-of-type {
	margin-bottom: 0;
}
@media (min-width: 768px) {
	.contact-container > div > p {
		text-align: center;
		font-size: 1.6rem;
	}
	.contact-container > div > h3 {
		font-size: 3.2rem
	}
	.contact-form-link:hover {
		text-decoration: underline;
	}
}
@media (min-width: 1024px) {
	.contact-container {
		display: flex;
		gap: 8rem;
		justify-content: center;
		margin: 8rem auto 12rem;
		padding: 0 4rem;
	}
	.contact-container > div > img {
		width: 32rem;
		margin-top: 5.6rem;
	}
	.contact-form-container {
		width: min-content;
		padding: 3.2rem;
		border-radius: 0.6rem;
		box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
	}
	.contact-form-container.event {
		width: 100%;
	}
	.contact-form-container p {
		width: 36rem;
	}
}
.contact-required {
	font-size: 1rem;
	padding: 0.1rem 0.2rem;
	color: #ffffff;
	border-radius: 0.3rem;
	margin-left: 0.8rem;
	background-color: #FF595E;
	font-weight: initial;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), textarea, select {
	border-radius: 0.3rem;
	border: 1px solid #DCDEE0;
	padding: 1rem 0.8rem 0.9rem;
	font-size: 1.6rem;
	width: 100%;
    box-sizing: border-box;
	margin-top: 0.4rem;
	-webkit-appearance: none;
	color: #252729;
	line-height: 1.3;
	background-color: #fff;
}
@media (min-width: 1024px) {
	input:not([type="radio"]):not([type="checkbox"]), textarea, select {
		width: 36rem;
	}
	.input-sm {
		width: 17.6rem !important;
	}
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border: 1px solid #0974e8;
}
select {
	-webkit-appearance: none;
	appearance: none; /* デフォルトのスタイルを無効 */
	background-image: url(./images/select-icon.svg);
	background-repeat: no-repeat;
	background-size: 1.6rem;
	background-position: right 0.8rem center;
}
input[type="checkbox"] {
	width: 1.6rem;
	height: 1.6rem;
	margin: 0 0.4rem 0 0;
}
.link {
	color: #0974E8;
}

/* hubspot用 */
.tt-hubspot fieldset {
	max-width: unset !important;
}
.tt-hubspot fieldset div label:not(.hs-form-radio-display):not(.hs-form-booleancheckbox-display) span:not(.hs-form-required) {
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: 600 !important;
}
.tt-hubspot:not(.asterisk) .hs-form-required {
	margin-left: 0.8rem;
	font-size: 0;
}
.tt-hubspot:not(.asterisk) .hs-form-required:before {
	font-size: 1rem;
	content:'必須';
	color: #ffffff;
	border-radius: 0.3rem;
	padding: 0.1rem 0.2rem;
	background-color: #FF595E;
	cursor: pointer;
}
.tt-hubspot.asterisk .hs-form-required {
	color: #FF595E;
}
.tt-hubspot fieldset > div:not(.hs_utm_term):not(.hs_utm_source):not(.hs_utm_medium):not(.hs-richtext) {
	margin-bottom: 1.6rem;
}
.tt-hubspot fieldset > div.hs_privacypolicy {
	margin-bottom: 2rem !important;
}
.hs-fieldtype-textarea {
	margin-bottom: 1.2rem !important;
}
.hs-fieldtype-textarea .hs-error-msgs {
	margin-top: -0.8rem;
}
.tt-hubspot input:not([type="radio"]):not([type="checkbox"]), textarea, select {
	width: 100% !important;
}
.form-columns-2 {
	display: flex;
	align-items: end;
}
.hs-error-msg {
	color: #FF595E;
	font-size: 1.2rem;
	position: absolute;
	line-height: 1.3;
}
.hs_error_rollup{
	margin: 1.2rem 0;
	color: #FF595E;
	font-size: 1.4rem;
}
@media (min-width: 768px) {
	.hs_error_rollup{
		font-size: 1.6rem;
	}
}
.hs-button {
	cursor: pointer;
	border: none;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	padding: 1.4rem 0;
	background-color: #0974E8;
	border-radius: 0.3rem !important;
	min-height: 4rem;
}
.hs-form-radio:not(:last-child) {
	margin-bottom: 0.8rem;
}
.hs-form-radio-display {
	display: flex;
	align-items: center;
	font-size: 1.4rem !important;
    font-weight: normal  !important;
    line-height: 1.5  !important;
	cursor: pointer;
}
.hs-richtext > p {
	line-height: 1.5;
}
.hs_privacypolicy .hs-form-booleancheckbox-display {
	display: flex;
	cursor: pointer;
	font-size: 1.4rem;
	align-items: center;
	margin-top: 0.8rem;
}
.tt-hubspot input[type=checkbox] {
	cursor: pointer;
}
@media (min-width: 1024px) {
	.tt-hubspot:not(.event) {
		padding: 3.2rem;
		border-radius: 0.6rem;
		box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
		width: 42.4rem;
		box-sizing: border-box;
		flex-shrink: 0;
	}
}


/* image */
.image-320 {
	width: 32rem;
	height: auto;
}
.document-image {
	width: 100% !important;
	max-width: 50rem !important;
	height: auto;
	filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.1));
}


/* contact thanks */
.contact-container.thanks{
	max-width: 64rem;
	text-align: center;
	margin-bottom: 12.8rem;
}
@media (min-width: 768px) {
	.contact-container.thanks{
		margin-bottom: 28rem;
	}
}

/* cases */
.cases_search_select_container {
	display: grid;
	padding: 0 2.4rem 0;
	gap: 0.8rem;
	box-sizing: border-box;
}
.cases_cross {
	display: none;
}
.cases-nothing {
	word-break: keep-all;
}
@media (min-width: 768px) {
	.cases_search_select_container {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0;
	}
	.cases_search_select_container > select {
		max-width: 30rem;
	}
	.cases_cross {
		display: flex;
		width: 2.4rem;
		height: 2.4rem;
		margin: 0 2.4rem;
	}
}

/* resources */
.resources-container {
	display: grid;
	margin: 6.4rem auto 10.4rem;
	padding: 0 2.4rem;
}
.resources-container img {
	width: calc(100% + 4.8rem);
	margin: 0 -2.4rem;
	max-width: unset;
}
.resources-title {
	color: #252729;
	font-size: 2.4rem;
	margin-bottom: 2.4rem;
}
.resources-thanks-title{
	font-size: 2.4rem;
}
#download-btn {
	margin: 0 auto 3.2rem;
}
@media (min-width: 768px) {
	.resources-title {
		font-size: 3.2rem;
		text-align: left !important;
		margin-bottom: 3.2rem;
	}
	.resources-container {
		max-width: 64rem;
	}
	.resources-container img {
		width: 100%;
		border-radius: 0.6rem;
		margin: 0;
	}
	.resources-detail {
		margin: auto;
	}
	#download-btn {
		margin: -4rem auto 3.2rem;
	}
	.resources-thanks-title{
		font-size: 3.2rem;
	}
}
@media (min-width: 1024px) {
	.resources-detail {
		margin: 0;
	}
	.resources-container {
		display: flex;
		gap: 8rem;
		justify-content: center;
		margin: 8rem auto 12rem;
		padding: 0 4rem;
		max-width: 114.4rem;
	}
}

.summarize-container.resources {
	margin-top: 1.6rem;
}
.summarize-container.resources > b {
	color: #252729;
}
.summarize-container.resources ul {
	list-style: disc;
}

/* news */
.news-card-link {
	height: 100%;
}
.news-card-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: calc(100% / 16 * 9);
	border-radius: 0.6rem 0.6rem 0 0;
}
.card-description.news .card-title{
	margin: 1.6rem 0 0.8rem;
}
.news_category_filter{
	display: flex;
	margin-bottom: 2.4rem;
	gap: 2.4rem 0;
	flex-wrap: wrap;
}
.news_category_filter > label{
	cursor: pointer;
	font-weight: 600;
	color:#8C9197;
	font-size: 1.2rem;
	margin-right: 2.4rem;
}
.news_year_filter {
	display: flex;
	flex-wrap: wrap;
	gap: 2.4rem 0;
	margin-bottom: 3.2rem;
}
.news_year_filter > label{
	cursor: pointer;
	font-weight: 600;
	color:#8C9197;
	margin-right: 2.4rem;
	font-size: 1.2rem;
}
input[type=radio].news_category_radio{
	display: none;
}
input[type=radio].news_year_radio{
	display: none;
}
input[type=radio].news_category_radio:checked+span{
	color:#0974E8;
}
input[type=radio].news_year_radio:checked+span{
	color:#0974E8;
}
.added_more_btn {
	position: absolute;
	bottom: -80px;
	margin: auto;
	right: 0;
	left: 0;
}
.section-first.news {
	max-width: 120rem;
}
@media (min-width: 768px) {
	.news-card-description {
		padding: 3.2rem;
	}
	.news_category_filter > label{
		margin-right: 4rem;
		font-size: 1.6rem;
	}
	.news_year_filter{
		margin-bottom: 3.2rem;
	}
	.news_year_filter > label{
		margin-right: 4rem;
		font-size: 1.6rem;
	}
	.added_more_btn {
		bottom: -96px;
	}
}

/* event */
article > header.event {
	margin: 6.4rem 0 1.6rem;
}
article > header.event > h1 {
	padding: 0 2.4rem;
}
.article-content-container.event {
	margin: 0 auto 12.8rem;
}
.article-content-container.event h2.event-section-title {
	text-align: center;
	margin: 12.8rem 0 3.2rem;
	color: #0974E8;
}
.article-content-container.event header.event > img {
	max-width: calc(100% + 48px);
	width:  calc(100% + 48px);
	margin: 0 -24px;
	border-radius: 0 !important;
}
.event-speakers-container {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
}
.event-speakers-container p {
	margin-bottom: 0;
}
.event-speakers-container p:first-child {
	line-height: 1.5;
	margin-bottom: 1.6rem;
}
.speaker-name {
	font-size: 1.8rem;
	font-weight: 600;
	display: inline-block;
	margin-top: 0.4rem;
}

.speaker-img {
	width: 20rem;
	border-radius: 0.6rem;
	display: grid;
	flex-shrink: 0;
	margin: 0 auto 1.6rem;
	filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.1));
}
.speaker-img img {
	border-radius: 0.6rem;
}
.speaker-description > h5 {
	margin: 0.4rem 0 1.6rem;
}
.no-result {
    word-break: keep-all;
}
header.event > p {
	padding: 0 2.4rem;
}
@media  (min-width: 768px){
	.event-speakers-container {
		gap:4.8rem;
	}
	.event-speaker {
		display: flex;
		gap: 3.2rem;
	}
	.no-result {
		grid-column: 2/3;
		width: 35rem;
		margin: auto;
	}
	header.event > p {
		padding: 0;
		text-align: center;
	}
	.article-content-container.event header.event > img {
		border-radius: 0.6rem !important;
		width: 100%;
		margin: 0;
	}
	article > header.event {
		margin: 8rem auto 2.4rem;
		display: grid;
		justify-content: center;
		max-width: 64rem;
	}
	article > header.event > img {
		border-radius: 0.6rem;
		max-width: 64rem;
	}
	article > header.event > h1 {
		padding: 0;
	}
	.article-content-container.event {
		margin: 0 auto 20rem;
	}
	.article-content-container > h4.event-section-title {
		margin: 16rem 0 6.4rem;
	}
	.article-content-container dt {
		float: left;
		width: 10rem;
		text-align: right;
	}
	.article-content-container dd {
		margin-left: 13.2rem;
	}
	.speaker-img {
		margin: 0 0 1.6rem;
	}
}
@media  (min-width: 1024px){
	article.event {
		max-width: 114.4rem !important;
	}
	.article-content-container.event.is-column {
		display: flex;
		gap: 8rem;
		max-width: unset;
	}
	.event-section-title.is-column{
		display: none;
	}
	.event-form-block{
        position: sticky;
        top: 4rem;
        height: 100%;
    }
}

.isms-image {
	width: 10rem;
}
.dd-isms {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

/* なかのひと */
.nakanohito-container {
	font-family: "Futura PT";
	background-color: #000408;
	color: #ffffff;
	width: 100vw;
	height: 100%;
}

/* プレスキット */
.presskit-description {
	margin-bottom: 3.2rem;
	font-size: 1.4rem;
}
.presskit-download-box {
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	transition: box-shadow .2s ease-in;
}
.presskit-download-box a {
	padding: 3.2rem 3.2rem 2.4rem;
	box-sizing: border-box;
	display: block;
}
.presskit-download-box p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	margin-top: 1.6rem;
}
.presskit-download-box img {
	max-width: 24rem;
	display: flex;
	margin: auto;
}
#guideline {
	padding: 0rem;
}
#guideline .outlined-content{
	padding: 2.4rem;
}
#guideline .sub-section > h3{
	margin-bottom: 2.4rem;
	font-size: 2rem;
}
section.sub-section:last-child {
	margin-bottom: 0rem;
}
.sub-section{
	margin: 6.4rem 0 0 0;
	padding: 0;
}
.sub-section > ul{
	margin-top: 3.2rem;
}
.table {
	display: table;
}
.table > .row {
	display: table-row;
}
.table > .row > div{
	display: table-cell;
}
.table > .row > div:first-child{
	padding-right: 2.4rem;
}
.guideline-color{
	padding: 2rem;
	border-radius: 0.6rem;
	width: 100%;
    max-width: 30rem;
}
.is-primary{
	background-color: #0974E8;
	color: #ffffff;
}
.guideline-color.is-secondary{
	background-color: #FFCA3A;
}
.sub-section > ul {
	display: grid;
	gap: 2.4rem;
}
.guideline-color-ul {
	display: flex !important;
	flex-wrap: wrap;
}
.logo-type {
	width: 100%;
    padding: 3.2rem;
	box-sizing: border-box;
    border-radius: 6px;
	border: 1px solid #DCDEE0;
}
.logo-type-margin {
	margin-bottom: 3.2rem;
}
.caption {
	margin-top: 0.8rem;
	font-size: 1.2rem;
}
ul.horizontal {
	display: flex;
}
.logo-type-ul.horizontal figure {
	max-width: 20rem;
}
ul.logo-type-ul {
	margin-top: 1.6rem;
}
.isolation-horizontal {
	max-width: 28rem;
}
.isolation-vertical {
	max-width: 17rem;
}
.minimum-horizontal {
	max-width: 27.9rem;
}
.minimum-vertical {
	max-width: 12rem;
}
.bg-example {
	width: 100%;
	max-width: 40rem;
}
@media (min-width: 768px) {
	.presskit-download-box {
		max-width: 45rem;
		margin: auto;
		font-size: 1.6rem;
	}
	.presskit-download-box:hover {
		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
	}
	.presskit-download-box a {
		padding: 6.4rem 8rem 4.8rem;
	}
	.presskit-download-box p {
		margin-top: 3.2rem;
	}
	.presskit-download-box img {
		max-width: none;
	}
	.presskit-description {
		text-align: center;
		margin-bottom: 4.8rem;
		font-size: 1.6rem;
	}
	#guideline {
		max-width: 106.8rem;
		box-sizing: border-box;
	}
	#guideline .outlined-content{
		padding: 8rem;
	}
	#guideline .sub-section > h3{
		font-size: 3.2rem;
	}
	.sub-section{
		margin: 16rem 0 0 0;
		padding: 0;
	}
	.sub-section > ul{
		margin-top: 6.4rem;
	}
	.sub-section > ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4rem;
	}
	ul.logo-type-ul {
		margin-top: 1.6rem;
	}
	.logo-type-margin  {
		margin-bottom: 6.4rem;
	}
	ul.vertical {
		flex-direction: column;
	}
	.logo-type {
		max-width: 30rem;
	}
	.caption {
		font-size: 1.4rem;
	}
	.guideline-color{
		padding: 2rem 4rem;
		width: unset;
		max-width: unset;
	}
	.isolation-horizontal {
		max-width: 34.2rem;
	}
	.isolation-vertical {
		max-width: 21.8rem;
	}
	.minimum-horizontal {
		max-width: 30.1rem;
	}
	.minimum-vertical {
		max-width: 12.8rem;
	}
	.bg-example{
		max-width: 56rem;
	}
}

/* FAQページ */
section.faq-section {
	margin: 6.4rem auto;
}
section.faq-contact-section{
	margin-top: 12.8rem;
}
.faq-h2 {
	font-size: 2.4rem;
	margin-bottom: 3.2rem;
}
.faq-ul {
	margin-top: 3.2rem;
}
.toggle {
	display: none;
}
.q-label {
	color: #0974E8;
}
.faq-label {
	color: #252729;
	font-size: 1.6rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0 3.2rem 0 0;
	display: flex;
    align-items: baseline;
	line-height: 1.5;
}
.faq-q {
	color: #0974E8;
	font-size: 1.6rem;
	font-weight: 600;
	margin-right: 0.8rem;
}
.faq-label::after {
	content:url("./images/top-arrow-gray.svg");
	height: 1.2rem;
	display: flex;
	align-items: center;
	position: absolute;
	top:calc( 50% - 0.8rem );
	right: 0;
	transform: rotate(0deg);
}
.faq-label,
.faq-content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.faq-content {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 0 0 2.2rem;
	overflow: hidden;
}
.toggle:checked + .faq-label + .faq-content {	/*開閉時*/
	height: auto;
	padding: 1.2rem  0 0 2.2rem;
	transition: all .3s;
}
.toggle:checked + .faq-label::after {
	transform: rotate(180deg) !important;
}
.faq-content > p {
	font-size: 1.4rem;
}
.faq-content a:hover {
	text-decoration: underline;
}
.divider {
	border: none;
	border-top: 1px solid #DCDEE0;
	margin: 0;
}
.faq-divider-margin {
	margin: 3.2rem 0;
}
.faq-contact-form {
	margin: 3.2rem auto 0;
}
@media (min-width: 768px) {
	.faq-h2 {
		font-size: 3.2rem;
		margin-bottom: 5.6rem;
	}
	.faq-h2.contact {
		margin-bottom: 3.2rem;
	}
	section.faq-section {
		max-width: 52rem;
		padding: 0;
		margin: 8rem auto;
	}
	section.faq-contact-section{
		margin-top: 16rem;
	}
	.faq-ul {
		margin-top: 4rem;
	}
	.faq-label {	
		font-size: 2rem;
		align-items: center;
	}
	.faq-q {
		margin-right: 1.6rem;
		font-size: 2rem;
	}
	.faq-content {		
		height: 0;
		margin-bottom:10px;
		padding:0 0 0 3.2rem;
		overflow: hidden;
	}
	.toggle:checked + .faq-label + .faq-content {	
		padding: 1.2rem 0 0 3.2rem;
	}
	.faq-content > p {
		font-size: 1.6rem;
	}
	.faq-divider-margin {
		margin: 4rem 0;
	}
	.faq-contact-message {
		text-align: center;
	}
	.faq-contact-form {
		margin: 5.6rem auto 0;
		width: 100% !important;
		padding: 0 !important;
	}
}
@media (min-width: 1024px) {
	.faq-contact-form {
		margin: 5.6rem auto 0;
		width: 100% !important;
		padding: 8rem !important;
	}
}


/* 規約系 */
.center-type-narrow {
	margin: 6.4rem auto;
	max-width: 64rem;
	padding: 0 2.4rem;
}
.terms h1 {
	color: #252729;
	font-size: 2.4rem;
	margin-bottom: 6.4rem;
}
.terms h2 {
	color: #252729;
	font-size: 2.4rem;
	margin: 3.2rem 0 1.6rem;
}
.terms ul {
	margin: 0 0 0 1.4rem;
	padding-left: 1.4rem;
}
.terms ul.kana {
	list-style: katakana;
	margin: 0 0 0 1.6rem;
	padding-left: 1.6rem;
}
.terms ul.disc {
	list-style: disc;
}
.terms ul.decimal{
	list-style: decimal;
	margin: 0 0 0 1rem;
	padding-left: 1rem;
}
.terms ol.custom {
   counter-reset: count 0;
}
ol.custom.fourth li::before {
    content: "4." counter(count) " ";
	counter-increment: count 1;
}
ol.custom li {
    margin-left:2.3rem;
	text-indent:-2.3rem;
}

ol.custom.sixth li::before {
    content: "6." counter(count) " ";
	counter-increment: count 1;
}
.terms-date {
	margin-top: 3.2rem;
}
@media (min-width: 768px) {
	.center-type-narrow {
		margin: 8rem auto;
	}
	.terms h1 {
		color: #252729;
		font-size: 3.2rem;
	}
	.terms a:hover {
		text-decoration: underline;
	}
}

/* Article
------------------------------------------------------------ */
article {
	padding: 0 2.4rem;
	margin: 6.4rem auto 0;
	max-width: 104.2rem;
	box-sizing: border-box;
}
article > header {
	position: relative;
	margin-bottom: 6.4rem;
	left: -24px;
    width: calc(100% + 48px);
}
.article-title-container {
	background-color: #ffffff;
	padding: 2.4rem 2.4rem 0;
}
.article-title {
	color: #252729;
	margin: 0 0 1.6rem;
	font-size: 2.4rem;
}
.article-title-container > span {
	font-size: 1.2rem;
}
.title_bottom {
	margin: 3.2rem 0 2.4rem;
}
.article-content-container {
	margin: 6.4rem auto;
	max-width: 64rem;
}
article h1, article h2 {
	font-size: 2.4rem;
	color: #252729;
	margin: 6.4rem 0 3.2rem;
}
article h3 {
	font-size: 2rem;
	color: #252729;
	margin: 6.4rem 0 3.2rem;
}
article h4 {
	font-size: 1.8rem;
	color: #252729;
	margin: 6.4rem 0 3.2rem;
}
article p {
	margin-bottom: 3.2rem;
}
article a {
	color: #0974E8;
	word-wrap:break-word;
}
.article-content-container ul:not(.inputs-list) {
	list-style: disc;
	margin: 0 0 3.2rem 1.4rem;
	padding-left: 1.4rem;
}
.article-content-container ul:not(.inputs-list)  ul {
	list-style: circle;
	margin: 0 0 0 1.4rem;
	padding-left: 1.4rem;
}
.article-content-container ol {
	list-style: auto;
	margin: 0 0 3.2rem 1.4rem;
	padding-left: 1.4rem;
}
.article-content-container img {
	border-radius: 0.6rem !important;
	max-width: 64rem;
	width: 100%;
}
#heading {
	font-weight: 600;
	font-size: 1.8rem;
	color: #0974E8;
	position: relative;
	bottom: -5.6rem;
}
.client-detail-box {
	border: 1px solid #DCDEE0;
	box-sizing: border-box;
	border-radius: 6px;
	padding: 1.6rem;
	display: grid;
	align-items: center;
	max-width: 64rem;
	margin: auto;
	gap: 1.6rem;
}
.client-detail-box > img{
	width: 16rem;
	margin: auto;
}
.client-detail-box > .content {
	display: grid;
	gap: 0.8rem;
	font-size: 1.2rem;
}
.client-detail-box p {
	margin: 0;
}
.client-detail-box > .content > a {
	color: #0974E8;
}
.client-name {
	font-weight: 600;
}
#cases_theme {
	font-size: 1.8rem;
	font-style: italic;
	color: #0974E8;
	margin-bottom: 6.4rem;
}
.summarize-container {
	padding: 2.6rem;
	width: 100%;
	box-sizing: border-box;
	background-color: #F7F7F8;
	font-size: 1.4rem;
	margin-bottom: 1.6rem;
}
.summarize-container:last-of-type {
	margin-bottom: 6.4rem;
}
.summarize-container > b {
	color: #0974E8;
}
.summarize-container ul {
	padding-left: 1.2rem;
	margin: 0.8rem 0 0 1.2rem;
}
.date-and-tag {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 1.6rem 0 6.4rem
}
.date-and-tag > time {
	font-size: 1.2rem;
}
article > .button-ul {
	margin-top: 6.4rem;
	justify-content: center;
}
#annotation {
	font-size: 1.2rem;
	color: #8C9197;
}
.wp-caption {
	max-width: 64rem;
    width: 100% !important;
}
.wp-caption-text {
	max-width: 64rem;
    width: 100%;
	font-size: 1.2rem;
	margin-top: 0.8rem;
}
#case-header > img {
	min-width: 100%;
}
@media (min-width: 768px) {
	article {
		padding: 0 4rem;
		margin: 1rem auto 0;
	}
	article > header {
		position: relative;
		margin-bottom: 15.4rem;
		left: 0;
		width: 100%;
	}
	article > header img {
		border-radius: 0.6rem;
	}
	.date-and-tag {
		margin: 3.2rem 0 6.4rem
	}
	#cases_theme {
		font-size: 2.4rem;
	}
	.article-title {
		font-size: 3.2rem;
	}
	.article-title-container {
		padding: 2.4rem;
		width: 80%;
		position: absolute;
	}
	.article-title-container > span {
		font-size: 1.6rem;
	}

	.client-detail-box {
		display: flex;
		gap: 0.8rem;
	}
	.date-and-tag > time {
		font-size: 1.4rem;;
	}
	article a:not(article .button-container a):hover {
		text-decoration: underline;
	}
}

/*	SNS
------------------------------------------------------------ */
.share {
	display: flex;
    justify-content: center;
    align-items: center;
	margin: 6.4rem 0rem;
	gap: 1.6rem;
}
.facebook {
	border-radius: 0.3rem;
}
.share img{
	transition: filter .2s ease-in;
}
.share img:hover {
	filter: brightness(90%);
}
.hatena-bookmark-button > img {
	transition: all .2s ease-in;
}


/* アニメーション */
.fadeInTrigger {
	opacity: 0;
	transition: opacity .6s ease-out;
}
.fadeInTrigger.is-animated {
	opacity: 1;
}
.smoothLeftToRight {
	clip-path: inset(0 100% 0 0);
	display: inline-block;
	font-weight: bold;
	transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
	transition-property: clip-path;
}
.smoothLeftToRight.is-animated {
	clip-path: inset(0);
}
.fadeUpSoft {
	opacity: 0;
	transition: all .6s ease-out;
    -webkit-transform: translate(0, 30px);
    transform: translate(0, 30px);
	will-change: opacity, transform;
}
.fadeUpSoft.is-animated {
	opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
@media (min-width: 768px) {
	.fadeUpSoft {
		-webkit-transform: translate(0, 50px);
		transform: translate(0, 50px);
	}
}

.eachTextAnime span{
	opacity: 0;
}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

span.smoothText {
	overflow: hidden;
	display: block;
}

/* アニメーションで傾斜がついている文字列を水平に戻す*/
span.smoothTextTrigger{
	transition: 2s ease-in-out;
	transform: translate3d(0,100%,0) skewY(12deg);
	-webkit-transform: translate3d(0,100%,0) skewY(12deg);
	transform-origin: left;
	display: block;
}
span.smoothTextTrigger.smoothTextAppear{
    transform: translate3d(0,0,0) skewY(0);
	-webkit-transform: translate3d(0,0,0) skewY(0);
}

.world-img{
	animation:20s linear infinite rotation;
}
@keyframes rotation{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(-360deg); }
}

.fadeLeft {
	animation-name: fadeLeftAnime;
	animation-duration: 4s;
	animation-fill-mode:forwards;
	opacity:0;
}	
@keyframes fadeLeftAnime{
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@media (min-width: 1024px) {
	.shift-delay-center {
		transition-delay: .3s;
		animation-delay: .3s;
	}
	.shift-delay-right {
		transition-delay: .5s;
		animation-delay: .5s;
	}
}
	


.delay-3 {
	transition-delay: .3s;
	animation-delay: .3s;
}
.delay-6 {
	transition-delay: .6s;
	animation-delay: .6s;
}
.delay-9 {
	transition-delay: .9s;
	animation-delay: .9s;
}

.delay-fast {
	transition-delay: .5s;
	animation-delay: .5s;
}
.delay-1 {
	transition-delay: 1s;
	animation-delay: 1s
}
.delay-15 {
	transition-delay: 1.5s;
	animation-delay: 1.5s;
}
.delay-2 {
	transition-delay: 2s;
	animation-delay: 2s;
}

/* ENAS記載 */
.cta_wptypeA,
.cta_wptypeB,
.cta_wptypeC{
    width: 100%;
    max-width: 64rem;
    transition: .3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(75deg, #1F9DFF 0%, #0974E8 100%);
    padding-top: 1.6rem;
    padding-bottom: 1.4rem;
}
.cta_wptypeA span,
.cta_wptypeB span,
.cta_wptypeC span{
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 700;
    transition: .3s ease-in-out;
}

.cta_wptypeA .title,
.cta_wptypeC .title{
    width: 95%;
    display: flex;
    justify-content: center;
    margin-bottom: 1.6rem;
}
.cta_wptypeA .title span,
.cta_wptypeC .title span{
    color: #FFF;
    font-size: 1.8rem;
    line-height: 150%; /* 27px */
}
.cta_wptypeA .title span .yetxt,
.cta_wptypeC .title span .yetxt{
    color: #FFCA3A;
}
.cta_wptypeA .wbgdiv,
.cta_wptypeB .wbgdiv,
.cta_wptypeC .wbgdiv{
    border-radius: 0.6rem;
    display: flex;
    background: #fff;
    width: 95%;
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
    align-self: center;
    justify-content: center;
}

.cta_wptypeC .wbgdiv{
    padding-top: 4rem;
}

.cta_wptypeA .wbgdiv .wbgdivmain,
.cta_wptypeB .wbgdiv .wbgdivmain,
.cta_wptypeC .wbgdiv .wbgdivmain{
    width: 95%;
    display: flex;
    flex-direction: row;
    gap: 2.4rem;
}

.cta_wptypeC .wbgdiv .wbgdivmain {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cta_wptypeB .wbgdiv .wbgdivmain .btndiv_mini{
    display: none;
}

.cta_wptypeB .wbgdiv .wbgdivmain .txtdiv{
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
}
.cta_wptypeB .wbgdiv .wbgdivmain .txtdiv .stitle{
    display: flex;
    flex-direction: column;
}
.cta_wptypeB .wbgdiv .wbgdivmain .txtdiv .stitle span{
    font-size: 1.8rem;
    line-height: 150%;
    display: block;
}

.cta_wptypeA .wbgdiv .imgdiv,
.cta_wptypeB .wbgdiv .imgdiv,
.cta_wptypeC .wbgdiv .imgdiv  {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    max-width: 22rem;
    align-self: center;
}
.cta_wptypeC .wbgdiv .imgdiv {
    max-width: 54.7rem;
}

.cta_wptypeA .wbgdiv .imgdiv img,
.cta_wptypeB .wbgdiv .imgdiv img,
.cta_wptypeC .wbgdiv .imgdiv img{
    display: block;
    width: 100%;
    height: auto;
}
.cta_wptypeA .wbgdiv .txtdiv{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta_wptypeA .wbgdiv .txtdiv .stitle{

}
.cta_wptypeA .wbgdiv .txtdiv .stitle span{
    color: #252729;
    font-size: 1.6rem;
    line-height: 150%;
    display: flex;
    width: 100%;
}
.cta_wptypeA .wbgdiv .txtdiv .stitle span br{
    display: none;
}
.cta_wptypeA .wbgdiv .txtdiv .subtitle{
    margin-top: 0.8rem;
    margin-bottom: 2.4rem;
    width: 100%;
}
.cta_wptypeA .wbgdiv .txtdiv .subtitle span{
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 160%; /* 19.2px */
    display: block;
}
.cta_wptypeA .wbgdiv .txtdiv .subtitle span .yline{
    display: inline;
    box-shadow: inset 0 -0.6rem 0rem #FFEC40;
}
.cta_wptypeA .wbgdiv .txtdiv .btndiv{
    display: flex;
    width: 100%;
    justify-content: center;
}
.cta_wptypeC .wbgdiv .txtdiv .btndiv{
    display: flex;
    justify-content: center;
}
.cta_wptypeA .wbgdiv .txtdiv .btndiv a,
.cta_wptypeB .wbgdiv .txtdiv .btndiv a,
.cta_wptypeB .wbgdiv .wbgdivmain .btndiv_mini a,
.cta_wptypeC .wbgdiv .txtdiv .btndiv button{
    cursor: pointer;
    color: #000;
    display: flex;
    text-decoration: none;
    height: 6rem;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    max-width: 32rem;
    border-radius: 3rem;
    background: #FFCA3A;
    box-shadow: 0rem 0.3rem 1rem 0rem rgba(0, 0, 0, 0.25);
}
.cta_wptypeC .wbgdiv .txtdiv .btndiv button {
    border: 0;
    max-width: 36rem;
    height: 6.6rem;
}
.cta_wptypeA .wbgdiv .txtdiv .btndiv a span{
    font-size: 1.8rem;
    line-height: 134%; /* 24.12px */
}
.cta_wptypeB .wbgdiv .txtdiv .btndiv a span,
.cta_wptypeB .wbgdiv .wbgdivmain .btndiv_mini a span,
.cta_wptypeC .wbgdiv .txtdiv .btndiv button span{
    font-size: 2rem;
    line-height: 134%;
}

/* sp-> size */ 
@media screen and (max-width: 750px) {
    .cta_wptypeA,
    .cta_wptypeB{
        max-width: 32.7rem;
    }
    .cta_wptypeA .wbgdiv .wbgdivmain {
        flex-direction: column;
        gap: 1.6rem;
    }
    .cta_wptypeA .wbgdiv {
        flex-direction: column;
        width: 90%;
        align-items: center;
    }
    .cta_wptypeA .wbgdiv .txtdiv .stitle span {
        max-width: 26.9rem;
    }
    .cta_wptypeA .wbgdiv .txtdiv .btndiv a{
        max-width: 26.9rem;;
    }
    .cta_wptypeA .title {
        width: 90%;
    }

    /* cta type B */
    .cta_wptypeB .wbgdiv .wbgdivmain .txtdiv .stitle span:nth-child(1){
        font-size: 1.6rem;
    }
    .cta_wptypeB .wbgdiv .wbgdivmain {
        flex-direction: column;
    }
    .cta_wptypeB .wbgdiv .txtdiv .btndiv{
        display: none;
    }
    .cta_wptypeB .wbgdiv .wbgdivmain .btndiv_mini{
        display: block;
    }
    .cta_wptypeB .wbgdiv .txtdiv .btndiv a span,
    .cta_wptypeB .wbgdiv .wbgdivmain .btndiv_mini a span{
        font-size: 1.8rem;
    }
}

/* CTA TYPE C */
.cta_wptypeC .wbgdiv .wbgdivmain .txtdiv{
    display: flex;
    width: 100%;
    max-width: 52rem;
    flex-direction: column;
}

/* form style  */
.txtdiv .hbspt-form{
    width: 100%;
    margin-bottom: 1.6rem;
}
.txtdiv .hbspt-form form{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.txtdiv .hbspt-form form ul{
    list-style: none;
    margin: 0;
    margin-top: 0.8rem;
    padding: 0;
}

.txtdiv .hbspt-form form ul label{
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.0225rem;
    display: flex;
    color: #FD3F4A;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.txtdiv .hbspt-form form ul .hs-form-radio label,
.txtdiv .hbspt-form form ul .hs-form-booleancheckbox label{
    color: #252729;
}
.txtdiv .hbspt-form form ul .hs-form-radio label span{
    font-size: 1.4rem;
    font-weight: 400;
}

.txtdiv .hbspt-form form a{
    text-decoration: none;
    color: #18A0FB;
    text-decoration: underline;
    font-size: 1.2rem;
    font-weight: 400;
}
.txtdiv .hbspt-form form span{
    font-size: 1.4rem;
    line-height: 120%;
    display: flex;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.txtdiv .hbspt-form form #label-company-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span:nth-child(1){
    display: inline-flex;
}
.txtdiv .hbspt-form form #label-company-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before,
.txtdiv .hbspt-form form #label-numemployees-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before,
.txtdiv .hbspt-form form #label-toiawase_form_busho__c-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before,
.txtdiv .hbspt-form form #label-position-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before,
.txtdiv .hbspt-form form #label-lastname-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before,
.txtdiv .hbspt-form form #label-firstname-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before,
.txtdiv .hbspt-form form #label-email-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before,
.txtdiv .hbspt-form form #label-phone-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before,
.txtdiv .hbspt-form form #label-e_or_b-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before,
.txtdiv .hbspt-form form #label-system-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before{
    height: 1.1rem;
    content: "必須";
    margin-right: 0.5rem;
    display: flex;
    padding: 0.3rem 0.5rem;
    justify-content: center;
    width: 2.2rem;
    align-items: center;
    border-radius: 0.2rem;
    border: 0.1rem solid #FD3F4A;
    color: #FD3F4A;
    font-weight: 400;
    line-height: 100%;
    font-size: 1.1rem;
    white-space: nowrap;
}
.txtdiv .hbspt-form form #label-contact_detail-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span{
    visibility: inherit;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    height: 0rem; 
}
.txtdiv .hbspt-form form #label-contact_detail-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::before{
    height: 1.1rem;
    content: "任意";
    margin-right: 0.5rem;
    display: flex;
    padding: 0.3rem 0.5rem;
    justify-content: center;
    width: 2.2rem;
    align-items: center;
    border-radius: 0.2rem;
    border: 0.1rem solid #ACACAC;
    color: #ACACAC;
    font-weight: 400;
    line-height: 100%;
    font-size: 1.1rem;
    visibility: initial;
    white-space: nowrap;
}
.txtdiv .hbspt-form form #label-contact_detail-9e9d8bd0-d3ae-4ddc-b1a3-b8f54c3ec31f span::after{
    content: 'お問い合わせ詳細';
    visibility: visible;
    font-size: 1.4rem;  
    display: flex;
    line-height: 120%;
    font-family: 'Noto Sans JP', sans-serif !important;
}


.hs-custom-style>div input:not([type=image]):not([type=submit]):not([type=button]):not([type=radio]):not([type=checkbox]):not([type=file]), 
.hs-custom-style fieldset input:not([type=image]):not([type=submit]):not([type=button]):not([type=radio]):not([type=checkbox]):not([type=file]) {
    min-height: 4.2rem !important;
    color: #252729;
    line-height: 0 !important;
    border-radius: 0.3rem;
    border: 0.1rem solid #E2E2E2;
    background: #F7F7F7;
    width: 100%;
    margin-top: 0.8rem;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.txtdiv .hbspt-form form select{
    min-height: 4.2rem !important;
    color: #252729;
    line-height: 0 !important;
    border-radius: 0.3rem;
    border: 0.1rem solid #E2E2E2;
    background: #F7F7F7;
    width: 100%;
    margin-top: 0.8rem;
    font-family: 'Noto Sans JP', sans-serif !important;
    padding: 0 1.5rem;
}

.txtdiv .hbspt-form form .hs-form-required{
    color: #FD3F4A;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.0225rem;
    display: none;
}
.txtdiv .hbspt-form form .hs-form-required::before{
    display: none;
}

.txtdiv .hbspt-form form .hs-form-field textarea {
    border-radius: 0.3rem;
    border: 0.1rem solid #E2E2E2;
    background: #F7F7F7;
    display: flex;
    height: 8rem;
    padding: 0.8rem 1.6rem;
    flex-direction: column;
    align-items: flex-start;
    width: 92% !important;
    margin-top: 0.8rem;
    font-family: 'Noto Sans JP', sans-serif !important;
    resize: none;
}
.txtdiv .hs_submit{
    display: none;
}

.txtdiv .hbspt-form form .form-columns-1 .input{
    margin-right: 0 !important;
    display: flex;
}

.txtdiv .hbspt-form form .form-columns-0 p{
    margin: 0;
    text-align: -webkit-center;
}
.txtdiv .hbspt-form form .form-columns-0 p a{
    text-decoration: underline !important;
}
.txtdiv .hbspt-form form .form-columns-0 p span{
    display: contents;
}

.txtdiv .hbspt-form form .form-columns-1:nth-child(n+12),
.txtdiv .hbspt-form form .hs_error_rollup{
    display: flex;
    align-self: center;
    justify-content: center;
}

.txtdiv .hbspt-form form .form-columns-1:nth-child(n+13):nth-child(-n+18){
    display: none;
} 

.txtdiv .hbspt-form form .form-columns-2{
    display: flex;
}

.txtdiv .hbspt-form form ul .hs-form-booleancheckbox label span{
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 100%; /* 16px */
}

/* sp-> size */ 
@media screen and (max-width: 750px) {
    .cta_wptypeC .wbgdiv {
        padding-top: 2.4rem;
    }
    .cta_wptypeC .wbgdiv .wbgdivmain {
        gap: 1.6rem;
    }
    .cta_wptypeC .wbgdiv .txtdiv .btndiv button {
        height: 6rem;
    }
    .cta_wptypeC .wbgdiv .txtdiv .btndiv button span {
        font-size: 1.8rem;
        line-height: 134%;
    }
}