/*
Theme Name: Minbako Theme
Description: A minimal WordPress theme
Version: 1.0
Author: Your Name
*/

/* Reset and basic styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
	--color-brand: #4FA8AF;
	--text-color: #252525;
	--ruled-line: #E4E4E4;
	--text-inverse: #ffffff;
	--bg-primary: #ffffff;
	--bg-primary-hover: #F4FEFF;
	
	--button-primary-bg: #0097AC;
	--button-primary-bg-hover: #31C8DD;
	--button-primary-border: #0097AC;
	--button-primary-text: #ffffff;
	
	--button-secondary-bg: #FFFFFF;
	--button-secondary-bg-hover: #F4FEFF;
	--button-secondary-border: #0097AC;
	--button-secondary-text: #0097AC;
}

@media (max-width: 1024px) {
	.tablet-none {
		display: none;
	}
}

.under-tablet-display {
	display: none;
}
@media (max-width:430px) {
	.sp-none {
		display: none;
	}
}

@media (max-width:820px) {
	.under-tablet-display {
		display: block;
	}
	.home-hero-buttons {
		display: none;
	}
	.under-tablet-display .home-hero-buttons {
		display: block;
		padding: 24px 0 0 0;
	}
	.under-tablet-display .home-hero-buttons .home-hero-button-primary {
		margin: 0 auto;
	}
	.under-tablet-display .home-hero-buttons .home-hero-button-secondary {
		margin: 0 auto;
		border:1px solid #ddd;
	}
}

#vdbanner {
	display:none;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 1024px){
	.container {
		width: 100%;
		padding: 0 24px;
	}
}



input, button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input {
	border: 1px solid #0097AC;
	border-radius: 3px;
	background-color: #fff;
	width: 100%;
	height: 48px;
	line-height: 48px;
	padding: 12px;
	font-size: 14px;
}
select {
	border: 1px solid #0097AC;
	border-radius: 3px;
	background-color: #fff;
	width: 100%;
	height: 48px;
	padding: 12px;
	font-size: 14px;
}
/* チェックボックス全体のラベル */
.wpcf7-form-control.wpcf7-checkbox label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: #007f99;
  position: relative;
  padding-left: 28px; /* ボックスの幅 + マージン分 */
}

/* 元のチェックボックスを透明に */
.wpcf7-form-control.wpcf7-checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  margin: 0;
  z-index: 2;
  cursor: pointer;
}

/* カスタムボックスの枠 */
.wpcf7-form-control.wpcf7-checkbox label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #00a0c0;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
  transition: background-color 0.2s, border-color 0.2s;
}

/* ✓マーク */
.wpcf7-form-control.wpcf7-checkbox label::after {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #fff;
  display: none;
  pointer-events: none;
}

/* チェック時の背景と✓表示 */
.wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  background-color: #00a0c0;
  border-color: #00a0c0;
}

.wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  display: block;
}


textarea {
	height: 120px;
	line-height: 1.5;
	background-color: #fff;
	border: 1px solid #0097AC;
	width: 100%;
	border-radius: 3px;
	padding: 12px;
	font-size: 14px;
}

input:focus,
textarea:focus {
	background: #FFF;
    box-shadow: inset 0 0 5px rgba(8, 1, 3, 0.2); 
}


/* Main Content */
main {
    margin-bottom: 30px;
}

.post {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.post-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.post-title a {
    color: #333;
    text-decoration: none;
}

.post-title a:hover {
    color: #007cba;
}

.post-meta {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.post-content {
    line-height: 1.8;
}

/* Archive Page Styles */
.archive-header {
    background-color: #f8f9fa;
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 5px;
    border-left: 4px solid #007cba;
}

.archive-title {
    font-size: 2em;
    color: #333;
    margin-bottom: 15px;
}

.archive-description {
    color: #666;
    font-size: 1.1em;
    line-height: 1.6;
}

.posts-container {
    display: grid;
    gap: 30px;
}

.post {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.post-thumbnail {
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 5px;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.post-thumbnail:hover img {
    transform: scale(1.05);
}

.post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-excerpt {
    flex: 1;
    margin-bottom: 20px;
}

.post-read-more {
    margin-top: auto;
}

.read-more-btn {
    display: inline-block;
    background-color: #007cba;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.read-more-btn:hover {
    background-color: #005a87;
}

/* Pagination Styles */
.pagination {
    margin-top: 40px;
    text-align: center;
}

.page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    background-color: #f8f9fa;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.page-numbers:hover,
.page-numbers.current {
    background-color: #007cba;
    color: #fff;
}

.page-numbers.prev,
.page-numbers.next {
    background-color: #007cba;
    color: #fff;
}

.page-numbers.prev:hover,
.page-numbers.next:hover {
    background-color: #005a87;
}

/* No Posts Message */
.no-posts {
    text-align: center;
    padding: 60px 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
}

.no-posts p {
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #666;
}

.no-posts a {
    color: #007cba;
    text-decoration: none;
}

.no-posts a:hover {
    text-decoration: underline;
}

/* 404 Error Page Styles */
.error-404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.error-content {
    max-width: 800px;
    text-align: center;
    background-color: #f8f9fa;
    padding: 60px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.error-icon {
    margin-bottom: 30px;
}

.error-icon svg {
    opacity: 0.8;
}

.error-title {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 20px;
    font-weight: bold;
}

.error-message {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-suggestions {
    text-align: left;
    margin-bottom: 40px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    border-left: 4px solid #007cba;
}

.error-suggestions h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.3em;
}

.error-suggestions ul {
    list-style: none;
    padding-left: 0;
}

.error-suggestions li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.error-suggestions li:before {
    content: "•";
    color: #007cba;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.error-actions {
    margin-bottom: 40px;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.btn-primary {
    background-color: #007cba;
    color: #fff;
}

.btn-primary:hover {
    background-color: #005a87;
    transform: translateY(-2px);
}

.search-form {
    margin-top: 30px;
}

.search-form h3 {
    margin-bottom: 15px;
    color: #333;
}

.search-form form {
    display: flex;
    max-width: 400px;
    margin: 0 auto;
    gap: 10px;
}

.search-form input[type="search"] {
    flex: 1;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.search-form input[type="search"]:focus {
    outline: none;
    border-color: #007cba;
}

.search-form input[type="submit"] {
    background-color: #007cba;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.search-form input[type="submit"]:hover {
    background-color: #005a87;
}

.recent-posts,
.popular-categories {
    text-align: left;
    margin-top: 40px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
}

.recent-posts h3,
.popular-categories h3 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.3em;
    border-bottom: 2px solid #007cba;
    padding-bottom: 10px;
}

.recent-posts-list,
.categories-list {
    list-style: none;
}

.recent-posts-list li,
.categories-list li {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.recent-posts-list li:hover,
.categories-list li:hover {
    background-color: #e9ecef;
}

.recent-posts-list a,
.categories-list a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.recent-posts-list a:hover,
.categories-list a:hover {
    color: #007cba;
}

.post-date {
    display: block;
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

.category-count {
    font-size: 0.9em;
    color: #666;
    margin-left: 5px;
}


/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .site-title {
        font-size: 1.5em;
    }
    
    .archive-header {
        padding: 20px;
    }
    
    .archive-title {
        font-size: 1.5em;
    }
    
    .post {
        padding: 15px;
    }
    
    .page-numbers {
        padding: 6px 10px;
        font-size: 0.9em;
    }
    
    .error-content {
        padding: 40px 20px;
    }
    
    .error-title {
        font-size: 2em;
    }
    
    .error-suggestions,
    .recent-posts,
    .popular-categories {
        padding: 20px;
    }
    
    .search-form form {
        flex-direction: column;
    }
    
    .search-form input[type="search"],
    .search-form input[type="submit"] {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .posts-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}



/* component */

.button-link-primary {
	display: block;
	background-color: #ffffff;
	border: 1px solid #BBBBBB;
	color: #252525;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:4px;
}

.button-link-primary:hover {
	background-color: #F4FEFF;
	border: 1px solid #31C8DD;
}

.button-link-size-medium {
	font-size: 14px;
	border-radius: 24px;
	height: 48px;
	padding: 9px 16px;
}


.button-link-arrow {
	width: 16px;
	height: 16px;
	margin-left: 4px;
}

.button-link-size-large {
	font-size: 16px;
	border-radius: 30px;
	height: 54px;
	padding: 12px 24px;
}




/* header-top */

.header-top {
	width: 100%;
	background-color: #F6F6F6;
	padding: 2px 30px 0 30px;
	height: 32px;
}

@media (max-width: 1024px) {
	.header-top {
		padding: 2px 0 0 0;
	}
}

.header-top-bar {
	display: flex;
	max-width: 100% !important;
	justify-content: space-between;
	align-items: center;
}

.header-top-tagline {
	font-size: 11px;
	font-weight: bold;
	color: var(--text-color);
	line-height: 1;
	padding: 2px 0 0 0;
}

@media (max-width:430px) {
	.header-top-tagline {
		padding: 9px 0 0 0;
	}
}

.header-top-links {
	display: flex;
	gap: 20px;
	align-items: center;
}

@media (max-width:430px) {
	.header-top-links {
		display: none;
	}
}

.header-top-links > li {
	list-style: none;
}

.header-top-links > li a {
	color: var(--text-color);
	font-size: 11px;
	font-weight: bold;
	line-height: 1;
}

.header-top-links > li a:hover {
	text-decoration: none;
}


/* header */

header {
	background-color: var(--bg-primary);
	padding: 12px 0;
	position: sticky;
	top: 0;
	z-index: 100;
}


.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 100% !important;
	padding: 0 32px;
}

.header-logo {
	width: 155px;
	height: 44px;
}

.header-logo a img {
	width: 155px;
}

@media (max-width:430px) {
	.header-sub-menu {
		display: none;
	}
}

.header-sub-menu ul {
	display: flex;
}

.header-sub-menu ul li {
	list-style: none;
}

.header-sub-menu ul li a {
	display: block;
	color: var(--text-color);
	font-size: 14px;
	font-weight: bold;
	padding: 8px 16px;
	text-decoration: none;
}

.header-sub-menu ul li a:hover {
	color: #4ECCDB;
}

.header-main-menu ul {
	display: flex;
	gap: 16px;
}

.header-main-menu ul li {
	list-style: none;
}

@media (max-width: 1024px) {
	.header-main-menu ul > li:nth-child(1),
	.header-main-menu ul > li:nth-child(2) {
		display: none;
	}
}

.button-primary {
	background-color: var(--button-primary-bg);
	color: var(--button-primary-text);
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid var(--button-primary-border);
}


.button-primary:hover {
	background-color: var(--button-primary-bg-hover);
}


.button-secondary {
	background-color: var(--button-secondary-bg);
	color: var(--button-secondary-text);
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid var(--button-secondary-border);
}


.button-secondary:hover {
	background-color: var(--button-secondary-bg-hover);
}



/* -------------------- 
home-hero
-------------------- */

.home-hero {
	background: linear-gradient(135deg, #4AC8D9 0%, #2CA1AE 100%);
	width: 100%;
	background-image: url(./assets/images/home-hero-bg-pc.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.home-hero-container {
	position: relative;
	height: 526px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media (max-width:430px) {
	.home-hero-container {
		height: 280px;
	}
}

.home-hero-h1 {
	font-size: 60px;
	font-weight: bold;
	font-style: italic;
	color: #ffffff;
	line-height: 1.4;
	margin: -100px 0 0 0;
}

@media (max-width:430px) {
	.home-hero-h1 {
		font-size: 24px;
		margin:-20px 0 0 8px;
	}
}

.home-hero-h1-large {
	font-size: 90px;
	font-weight: bold;
	font-style: italic;
	color: #ffffff;
	text-shadow: 0 4px 4px rgba(000,000,000,0.25);
	position: relative;
	z-index: 2;
}
@media (max-width:430px) {
	.home-hero-h1-large {
		font-size: 36px;
	}
}

.home-hero-h1-large::after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 24px;
	background-color: #FFCF00;
	box-shadow: 0 4px 4px rgba(000,000,000,0.25);
}

.home-hero-buttons li {
	list-style: none;
	margin-bottom: 40px;
}

@media (max-width:430px) {
	.home-hero-buttons li {
		margin-bottom: 24px;
	}
}

.home-hero-no1 {
	width: 320px;
}

@media (max-width:430px) {
	.home-hero-no1 {
		width: 220px;
	}
}

.home-hero-button-primary {
	background-color: #216F7A;
	color: #ffffff;
	position: relative;
	width: 280px;
	height: 72px;
	border-radius: 36px;
	display: block;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 20px;
}

@media (max-width:430px) {
	.home-hero-button-primary {
		height: 60px;
	}
}

.home-hero-button-primary::before {
	content: "3分でわかる";
	position: absolute;
	background-color: #FFCF00;
	color: #252525;
	border-radius: 14px;
	height: 20px;
	width: 160px;
	padding: 4px 0;
	text-align: center;
	top: -12px;
	z-index: 2;
	left: calc(50% - 80px);
	font-size: 14px;
	font-weight: bold;
}

@media (max-width:430px) {
	.home-hero-button-primary::before {
		top:-16px;
	}
}

.home-hero-button-primary::after {
}

.home-hero-button-primary:hover {
	background-color: #468189;
}

.home-hero-button-secondary {
	background-color: #ffffff;
	color: #252525;
	position: relative;
	width: 280px;
	height: 72px;
	border-radius: 36px;
	display: block;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 20px;
}

@media (max-width:430px) {
	.home-hero-button-secondary {
		height: 60px;
	}
}

.home-hero-button-secondary::before {
	content: "まずは触ってみる";
	position: absolute;
	background-color: #FFCF00;
	color: #252525;
	border-radius: 14px;
	height: 20px;
	width: 160px;
	padding: 4px 0;
	text-align: center;
	top: -12px;
	z-index: 2;
	left: calc(50% - 80px);
	font-size: 14px;
	font-weight: bold;
}

@media (max-width:430px) {
	.home-hero-button-secondary::before {
		top:-16px;
	}
}

.home-hero-button-secondary:hover {
	background-color: #E4E2E2;
}

.home-hero-burron-thum {
	width: 48px;
}

.home-hero-burron-icon {
	width: 16px;
}

.home-hero-attention {
	position: absolute;
	bottom: 12px;
	left: 0;
	display: flex;
	flex-direction: column;
	gap:8px;
}

@media (max-width: 1024px) {
	.home-hero-attention {
		left: 24px;
	}
}

.home-hero-thum {
	width: 355px;
	height: 94px;
}

.home-hero-attention-description {
	font-size: 10px;
	color: #ffffff;
}

@media (max-width:430px) {
	.home-hero-attention-description {
		display: none;
	}
}



/* -------------------- 
home-hero
-------------------- */


.home-solution {
	width: 100%;
	padding: 20px 0;
}

.home-solution-card {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	gap: 52px;
	align-items: center;
}

@media (max-width: 1024px) {
	.home-solution-card {
		flex-direction: column-reverse;
	}
}

.home-solution-content {
	flex: 1;
}

.home-solution-list li {
	list-style: none;
}

.home-solution-h2 {
	font-size: 27px;
	font-weight: bold;
	color: #4FA8AF;
}

@media (max-width:430px) {
	.home-solution-h2 {
		text-align: center;
		font-size: 18px;
	}
}

.home-solution-list > li {
	list-style: none;
	padding: 8px 0;
}

.home-solution-list-block {
	display: flex;
	flex-direction: row;
	gap:16px;
	align-items: center;
}

@media (max-width:430px) {
	.home-solution-list-block-title {
		width: 74px;
	}
}

.home-solution-list-block-title p {
	display: inline-block;
	background-color: #4FA8AF;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	position: relative;
	border-radius: 3px;
	padding: 3px 12px;
}

@media (max-width:430px) {
	.home-solution-list-block-title p {
		text-align: center;
	}
}

.home-solution-list-block-title p::after {
	content: '';
	position: absolute;
	right: -10px; /* 吹き出しの右側に配置 */
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 10px 10px; /* 右向きの三角形 */
	border-color: transparent transparent transparent #4FA8AF;
}

@media (max-width:430px) {
	.home-solution-list-block-title p::after {
		display: none;
	}
}

.home-solution-list-block-items {
	font-size: 14px;
	font-weight: bold;
	color: #252525;
}

@media (max-width:430px) {
	.home-solution-list-block-items {
		flex: 1;
	}
}

.home-solution-thum {
	width: 380px;
	margin-left: 80px;
}

@media (max-width:820px) {
	.home-solution-thum {
		margin: 0;
	}
}


/* ----------about ---------- */

.home-about {
	width: 100%;
	padding: 40px 0;
}

.home-about-h2 {
	text-align: center;
	font-size: 24px;
	color: #252525;
	margin-bottom: 20px;
}

@media (max-width:430px) {
	.home-about-h2 {
		font-size: 18px;
	}
}

.home-about-h2 span {
	color: #0097AC;
	font-weight: bold;
}

.home-about-list {
	display: grid;
	gap: 32px;
	justify-content: space-between;
	align-items: stretch;
	grid-template-columns:repeat(3, 1fr);
}

@media (max-width:430px) {
	.home-about-list {
	grid-template-columns:repeat(1, 1fr);
	}
}

.home-about-list > li {
	list-style: none;
}

@media (max-width:430px) {
	.home-about-list > li {
		width: 100%;
	}
}

.home-about-h3 {
	text-align: center;
	font-size: 18px;
	color: #252525;
	margin-bottom: 12px;
}

.home-about-thum {
	width: 100%;
	margin-bottom: 12px;
}

.home-about-h4 {
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	color: #252525;
	margin-bottom: 8px;
}

.home-about-description {
	font-size: 14px;
	color: #252525;
}

.home-about-attention {
	text-align: center;
	font-size: 14px;
	color: #252525;
	text-decoration: underline;
	margin: 20px 0 0 0;
}


/* -------- howto -------- */

.home-howto {
	width: 100%;
	padding: 40px 0;
}

.home-howto-h2 {
	text-align: center;
	font-size: 34px;
	font-weight: bold;
	color: #252525;
}

@media (max-width:430px) {
	.home-howto-h2 {
		font-size: 24px;
	}
}

.home-howto-h2 span {
	color: #139EA8;
}

.home-howto-description {
	text-align: center;
	font-size: 15px;
	color: #252525;
	margin: 12px 0 12px 0;
}

.home-howto-description span {
	text-decoration: underline;
}

.home-howto-thum {
	width: 900px;
	margin: 0 auto;
	display: block;
}

@media (max-width:820px) {
	.home-howto-thum {
		width: 100%;
	}
}

/* -------- logos -------- */

.home-logolist {
	width: 100%;
	padding: 40px 0;
}

.home-logolist-title {
	text-align: center;
	font-size: 20px;
	color: #252525;
	font-weight: bold;
	margin-bottom: 12px;
}

@media (max-width:430px) {
	.home-logolist-title {
		font-size: 16px;
	}
}

.home-logolist-title span {
	color: #0097AC;
	font-size: 32px;
	padding: 0 4px;
}

@media (max-width:430px) {
	.home-logolist-title span {
		font-size: 24px;
	}
}

.home-logolist-list {
	display: grid;
	flex-wrap: wrap;
	gap: 12px;
	grid-template-columns:repeat(9, 1fr)
}

@media (max-width:430px) {
	.home-logolist-list {
		gap:0;
		grid-template-columns:repeat(3, 1fr)
	}
}

.home-logolist-list > li {
	list-style: none;
}

.home-logolist-logo {
	width: 100%;
}


/* -------- feature ---------- */

.home-feature {
	width: 100%;
	padding: 60px 0;
}

.home-feature-h2 {
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	color: #252525;
}

@media (max-width:430px) {
	.home-feature-h2 {
		font-size: 24px;
	}
}

.home-feature-h2 span {
	color: #0097AC;
}

.home-feature-description {
	text-align: center;
	color: #252525;
	font-size: 16px;
	margin: 20px 0 24px 0;
}

@media (max-width:430px) {
	.home-feature-description {
		font-size: 16px;
	}
}

.home-feature-list {
	display: grid;
	gap: 32px;
	justify-content: space-between;
	flex-wrap: wrap;
	grid-template-columns:repeat(3, 1fr);
	align-items:stretch;
}

.home-feature-list > li {
	list-style: none;
}

@media (max-width:820px) {
	.home-feature-list {
	grid-template-columns:repeat(2, 1fr);
	}
}

@media (max-width:430px) {
	.home-feature-list {
	grid-template-columns:repeat(1, 1fr);
	}
}

.home-feature-card {
	border: 1px solid #cacaca;
	border-radius: 10px;
	display: flex;
	flex-direction: column-reverse;
}

.home-feature-card-content {
	padding: 16px;
}

.home-feature-card-thum {
	width: 100%;
}

.home-feature-card-h3 {
	font-size: 16px;
	color: #252525;
	font-weight: bold;
}

.home-feature-card-description {
	font-size: 12px;
	color: #252525;
}


/* -------- service -------- */

.home-service {
	width: 100%;
	padding: 60px 0;
}

.home-service-h2 {
	text-align: center;
	font-size: 30px;
	color: #252525;
	margin-bottom: 20px;
}

.home-service-list {
	display: flex;
	gap: 32px;
	flex-direction: row;
}

@media (max-width:820px) {
	.home-service-list {
		flex-direction: column;
	}
}

.home-service-list > li {
	list-style: none;
	width: 100%;
}
@media (max-width:820px) {
	.home-service-list > li {
		width: 100%;
	}
}

.home-service-card {
	background-color: #F5F8F9;
	padding: 24px 60px;
}

@media (max-width:430px) {
	.home-service-card {
		padding: 20px 16px;
	}
}

.home-service-card-h3 {
	text-align: center;
	color: #252525;
	font-size: 36px;
	margin-bottom: 12px;
}

.home-service-card-h3 span {
	color: #0097AC;
} 

.home-service-card-thum {
	width: 320px;
	display: block;
	margin: 0 auto;
}

.home-service-card-description {
	font-size: 15px;
	color: #252525;
	margin-top: 8px;
	margin-bottom: 12px;
}

.home-service-card-description span {
	text-decoration: underline;
	font-weight: bold;
}

.home-service-other {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	gap:32px;
}

@media (max-width:820px) {
	.home-service-other {
		display: none;
	}
}

.home-service-other > li {
	list-style: none;
	width: 100%;
}

.home-service-other-thum {
	width: 100%;
}

/* -------- reason -------- */

.home-reason {
	width: 100%;
	background-image: url(./assets/images/home-reason-bg-.jpg);
	padding: 40px 0;
	background-size: cover;
}

.home-reason-h2 {
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 12px;
}

@media (max-width:430px) {
	.home-reason-h2 {
		font-size: 24px;
	}
}

.home-reason-description {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 20px;
}

@media (max-width:430px) {
	.home-reason-description {
		font-size: 18px;
	}
}

.home-reason-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.home-reason-list > li {
	list-style: none;
}

.home-reason-list-card {
	background-color: #fff;
	width: 700px;
	margin: 0 auto;
	border-radius: 10px;
	padding: 16px 16px;
}

@media (max-width:430px) {
	.home-reason-list-card {
		width: 100%;
	}
}

.home-reason-list-title-h3 {
	font-size: 18px;
	font-weight: bold;
	color: #252525;
	text-align: center;
}

@media (max-width:430px) {
	.home-reason-list-title-h3 {
		font-size: 15px;
	}
}

.home-reason-list-title-h3 span {
	color: #0097AC;	
}

/* ---------- inquiry -------- */

.home-inquiry-set {
	width: 100%;
	padding: 40px 0;
}

.home-inquiry-set-card {
	background: linear-gradient(135deg, #4AC8D9 0%, #2CA1AE 100%);
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 300px;
	padding: 0 80px;
}

@media (max-width:820px) {
	.home-inquiry-set-card {
		flex-direction: column-reverse;
		height: auto;
		padding: 32px;
	}
}

.home-inquiry-set-card-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (max-width:430px) {
	.home-inquiry-set-card-content {
		gap:8px;
		margin-top: 12px;
	}
}

.home-inquiry-set-h2 {
	color: #fff;
	font-size: 30px;
	font-weight: bold;
}

@media (max-width:430px) {
	.home-inquiry-set-h2 {
		font-size: 20px;
	}
}

.home-inquiry-set-description {
	color: #fff;
	font-size: 16px;
	margin-bottom: 10px;
}

@media (max-width:430px) {
	.home-inquiry-set-description {
		font-size: 15px;
	}
}

.home-inquiry-set-card-thum {
	width: 400px;
}

@media (max-width:430px) {
	.home-inquiry-set-card-thum {
		width: 100%;
	}
}

/* ----- security ------ */

.home-security {
	background-color: #F3F3F3;
	padding: 50px 0;
}

.home-security-h2 {
	text-align: left;
	font-size: 30px;
	font-weight: bold;
	color: #252525;
}

@media (max-width:430px) {
	.home-security-h2 {
		font-size: 24px;
	}
}

.home-security-description {
	text-align: left;
	font-size: 15px;
	font-weight: normal;
	color: #252525;
	margin: 8px 0 24px 0;
}

.home-security-list {
	display: flex;
	justify-content: space-between;
	gap:32px;
}

@media (max-width:430px) {
	.home-security-list {
		flex-direction: column;
	}
}

.home-security-list > li {
	list-style: none;
	width: 100%;
}

.home-security-card {
	background-color: #ffffff;
	border: 1px solid #CACACA;
	border-radius: 10px;
	display: flex;
	flex-direction: column-reverse;
	overflow: hidden;
}

.home-security-thum {
	width: 100%;
}

.home-security-card-content {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 0 24px 0;
}

.home-security-h3 {
	font-size: 20px;
	font-weight: bold;
	color: #252525;
}

@media (max-width:430px) {
	.home-security-h3 {
		font-size: 18px;
	}
}

.home-security-button {
	margin: 0 auto;
}



/* contact-cv */

.contact-cv {
	background-color: var(--color-brand);
	padding: 32px 0;
}

.contact-cv-top {
	display: flex;
	justify-content: space-between;
}

@media (max-width:820px) {
	.contact-cv-top {
		flex-direction: column;
	}
}

.contact-cv-top-contents {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 12px 0;
}

.contact-cv-top-contents-h2 {
	font-size: 30px;
	font-weight: bold;
	padding-top: 12px;
	color: var(--text-inverse);
}

@media (max-width:820px) {
	.contact-cv-top-contents-h2 {
		text-align: center;
	}
}

@media (max-width:430px) {
	.contact-cv-top-contents-h2 {
		font-size: 24px;
	}
}

.contact-cv-top-contents-description {
	font-size: 15px;
	color: var(--text-inverse);
}
@media (max-width:820px) {
	.contact-cv-top-contents-description {
		text-align: center;
	}
}

.contact-cv-top-thum {
	width: 300px;
	height: 119px;
	margin-right: 40px;
}

@media (max-width:820px) {
	.contact-cv-top-thum {
		margin: 0 auto;
	}
}

.contact-cv-bottom {
	display: flex;
	overflow: hidden;
	align-items: stretch;
}

@media (max-width:820px) {
	.contact-cv-bottom {
		flex-direction: column;
	}
}

.contact-cv-bottom li {
	flex: 1;
	list-style: none;
}

.contact-cv-bottom li:nth-child(1) .contact-cv-bottom-card {
	border-radius: 10px 0 0 10px;
}

@media (max-width:820px) {
	.contact-cv-bottom li:nth-child(1) .contact-cv-bottom-card {
		border-radius: 10px 10px 0 0;
	}
}

.contact-cv-bottom li:nth-child(3) .contact-cv-bottom-card {
	border-radius: 0 10px 10px 0;
}

@media (max-width:820px) {
	.contact-cv-bottom li:nth-child(3) .contact-cv-bottom-card {
		border-radius: 0 0 10px 10px;
	}
}

.contact-cv-bottom a {
	display: block;
	color: var(--text-color);
	text-decoration: none;
	height: 100%;
}

.contact-cv-bottom-card {
	background-color: var(--bg-primary);
	padding: 24px 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #CACACA;
	height: 100%;
}

.contact-cv-bottom a:hover .contact-cv-bottom-card {
	background-color: var(--bg-primary-hover);
	border: 1px solid #31C8DD;
}

.contact-cv-bottom-card-contents {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-cv-bottom-card-title {
	display: flex;
	gap: 10px;
}

.contact-cv-bottom-card-title-icon {
	width: 32px;
	height: 32px;
}

.contact-cv-bottom-card-h3 {
	font-size: 20px;
	font-weight: bold;
}

.contact-cv-bottom-card-description {
	font-size: 13px;
}

.contact-cv-bottom-card-arrow {
	width: 20px;
	height: 20px;
}




/* footer */

footer {
    border-bottom: 3px solid var(--color-brand);
	padding: 32px 0;
}

.footer-top {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	align-items: center;
}

@media (max-width:820px) {
	.footer-top {
		flex-direction: column;
	}
}

.footer-logo {
	width: 160px;
}

.footer-logo a img {
	width: 160px;
}

.footer-nav-main ul{
	display: flex;
	gap: 30px;
}

@media (max-width:430px) {
	.footer-nav-main ul {
		flex-direction: column;
		gap:16px;
		margin-bottom: 32px;
	}
}

.footer-nav-main ul li {
	list-style: none;
}

@media (max-width:430px) {
	.footer-nav-main ul li {
		text-align: center;
	}
}

.footer-nav-main ul li a {
	font-size: 14px;
	font-weight: bold;
	color: var(--text-color);
	text-decoration: underline;
}

.footer-nav-main ul li a:hover {
	text-decoration: none;
}


.footer-bottom {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--ruled-line);
	padding: 16px;
	align-items: center;
}

@media (max-width:430px) {
	.footer-bottom {
		flex-direction: column-reverse;
		padding: 32px 0 0 0;
		margin-top: 24px;
	}
}
.footer-nav-sub {
	order: 2;
}

.footer-nav-sub ul{
	display: flex;
	gap: 24px;
}

@media (max-width:430px) {
	.footer-nav-sub {
		margin-top: 32px;
	}
	.footer-nav-sub ul {
		flex-direction: column;
		gap: 12px;
		margin-bottom: 24px;
	}
}

.footer-nav-sub ul li {
	list-style: none;
}

@media (max-width:430px) {
	.footer-nav-sub ul li {
		text-align: center;
	}
}

.footer-nav-sub ul li a {
	font-size: 12px;
	font-weight: normal;
	color: var(--text-color);
	text-decoration: underline;
}

.footer-nav-sub ul li a:hover {
	text-decoration: none;
}

.copyright {
	order: 1;
	text-align: left;
	font-size: 12px;
	color: var(--text-color);
}





/* -------------------- 
page-bako
-------------------- */
.bako {
	width: 100%;
	padding: 24px 0;
}

.bako .container {
	max-width: 90%;
}

@media (max-width:430px) {
	.bako {
		padding: 0;
	}
	.bako .container {
		padding: 0;
	}
}

.bako-top {
	background-color: #F4F8F9;
	border-radius: 5px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	gap: 24px;
	padding: 40px 60px;
	overflow: hidden;
	align-items: center;
}

@media (max-width:820px) {
	.bako-top {
		flex-direction: column-reverse;
	}
}

@media (max-width:430px) {
	.bako-top {
		padding: 24px;
	}
}

.bako-content {
	flex: 1;
}

.bako-logo {
	display: flex;
	gap: 8px;
	flex-direction: row;
	align-items: center;
}

.bako-thum {
	width: 64%;
	margin-right: -132px;
}

@media (max-width:820px) {
	.bako-thum {
		margin: 0 auto;
		width: 90%;
	}
}

@media (max-width:430px) {
	.bako-thum {
		width: 100%;
	}
}

.bako-logo-symbol {
	width: 50px;
	height: 50px;
}

@media (max-width:430px) {
	.bako-logo-symbol {
		width: 32px;
		height: 32px;
	}
}
	
.bako-h1 {
	font-size: 40px;
	font-weight: bold;
	color: #139EA8;
}

@media (max-width:430px) {
	.bako-h1 {
		font-size: 24px;
	}
}

.bako-h2 {
	font-size: 24px;
	margin: 16px 0;
	font-weight: bold;
	color: #252525;
	position: relative;
	z-index: 2;
}

@media (max-width:430px) {
	.bako-h2 {
		font-size: 24px;
		margin-top: 8px;
		line-height: 1.4;
	}
}

.bako-h2 span {
	position: relative;
	z-index: 2;
	display: inline-block;
}

.bako-h2 span::before {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 0;
	width: 100%;
	height: 10px;
	background-color: #FFCF00;
	z-index: -1;
}

.bako-description {
	font-size: 15px;
	color: #252525;
	margin-bottom: 24px;
}

@media (max-width:430px) {
	.bako-description {
		font-size: 15px;
		margin-top: 8px;
	}
}

.bako-cv-button {
	display: block;
	width: 324px;
	height: 50px;
	border-radius: 25px;
	background-color: #fff;
	border: 1px solid #D2D2D2;
	text-decoration: none;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #252525;
	padding: 12px 0;
}

.bako-cv-button:hover {
	background-color: #F4FEFF;
	border: 1px solid #31C8DD;
}

.bako-torikumi {
	background-color: #F8F8F8;
	width: 100%;
	padding: 60px 0;
}

.bako-torikumi-h2 {
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 16px;
	line-height: 1.4;
}

@media (max-width:430px) {
	.bako-torikumi-h2 {
		font-size: 24px;
	}
}

.bako-torikumi-description {
	font-size: 15px;
	color: #252525;
	width: 900px;
	margin: 0 auto 24px auto;
}

@media (max-width:820px) {
	.bako-torikumi-description {
		width: 100%;
	}
}

.bako-torikumi-thum {
	width: 900px;
	margin: 0 auto;
	display: block;
}

@media (max-width:820px) {
	.bako-torikumi-thum {
		width: 100%;
	}
}
.bako-feature-link {
	background-color: #F3F3F3;
	padding: 32px 0;
	width: 100%;
}

.bako-feature-h2 {
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 16px;
}

.page-navigation-list {
	display: flex;
	width: 100%;
	gap: 32px;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
}

@media (max-width:430px) {
	.page-navigation-list {
		flex-direction: column;
		gap:8px;
	}
}

.page-navigation-list > li {
	width: 100%;
	list-style: none;
}

.page-navigation-list > li a {
	background-color: #fff;
	padding: 16px;
	border-radius: 10px;
	display: block;
	text-decoration: none;
	height: 100%;
}

.page-navigation-list > li a:hover {
	background-color: #F4FEFF;
}

.page-navigation-card {
	text-align: center;
	height: 100%;
}

@media (max-width:430px) {
	.page-navigation-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap:8px;
	}
}

.page-navigation-card-num {
	font-size: 25px;
	font-weight: bold;
	color: #0097AC;
}

.page-navigation-h3 {
	font-size: 16px;
	font-weight: bold;
	color: #252525;
}

.page-navigation-icon {
	width: 24px;
	height: 24px;
}


.bako-point {
	width: 100%;
	padding: 60px 0;
	background-color: #F8F8F8;
}

@media (max-width:430px) {
	.bako-point {
		padding: 32px 0 0 0;
		margin: 0 0 -20px 0;
	}
}

.bako-point-h2 span {
	font-size: 28px;
	font-weight: bold;
	color: #0097AC;
	padding-right: 12px;
}

@media (max-width:430px) {
	.bako-point-h2 span {
		font-size: 24px;
	}
}

.bako-point-h2 {
	font-size: 28px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 32px;
}

@media (max-width:430px) {
	.bako-point-h2 {
		font-size: 24px;
		margin-bottom: 12px;
	}
}

.bako-point-description {
	font-size: 16px;
	color: #252525;
	margin-bottom: 32px;
}

@media (max-width:430px) {
	.bako-point-description {
		font-size: 15px;
	}
}

.bako-point-list {
	display: grid;
	justify-content: space-between;
	flex-direction: row;
	gap: 32px;
	margin-bottom: 60px;
	align-items:stretch;
	grid-template-columns:repeat(3, 1fr);
}

@media (max-width:820px) {
	.bako-point-list {
		flex-direction: column;
	}
}

@media (max-width:430px) {
	.bako-point-list {
		grid-template-columns:repeat(1, 1fr);
	}
}

.bako-point-list > li {
	list-style: none;
}

.bako-point-list-card {
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	gap: 16px;
	background-color: #fff;
	padding: 24px;
	border-radius: 10px;
}

@media (max-width:820px) {
	.bako-point-list-card {
		flex-direction: row-reverse;
		align-items: start;
	}
}

@media (max-width:430px) {
	.bako-point-list-card {
		flex-direction: column-reverse;
	}
}

.bako-point-list-card-thum {
	width: 100%;
	border-radius: 10px;
}

@media (max-width:820px) {
	.bako-point-list-card-thum {
		width: 200px;
	}
}

@media (max-width:430px) {
	.bako-point-list-card-thum {
		width: 100%;
	}
}

.bako-point-list-card-content {
	display: flex;
	gap: 8px;
	flex-direction: column;
}

.bako-point-list-card-h3 {
	font-size: 20px;
	font-weight: bold;
	color: #252525;
	line-height: 1.4;
}

@media (max-width:430px) {
	.bako-point-list-card-h3 {
		font-size: 18px;
	}
}

.bako-point-list-card-description {
	font-size: 15px;
	color: #252525;
}

@media (max-width:430px) {
	.bako-point-list-card-description {
		font-size: 15px;
	}
}

.bako-cvr {
	width: 100%;
	background-color: #EAEAEA;
	padding: 60px 0;
	margin-bottom: 60px;
}

@media (max-width:430px) {
	.bako-cvr {
		padding: 40px 0;
		margin-bottom: 32px;
	}
}

.bako-cvr-content {
	width: 100%;
}

.bako-cvr-top {
	display: flex;
	flex-direction: row;
	width: 100%;
	background-color: #4FA8AF;
	border: 5px solid #4FA8AF;
	margin-bottom: 24px;
}

@media (max-width:820px) {
	.bako-cvr-top {
		flex-direction: column-reverse;
	}
}

.bako-cvr-top-content {
	background-color: #fff;
	width: 50%;
	padding: 24px;
	flex-direction: column;
	gap: 8px;
	display: flex;
}

@media (max-width:820px) {
	.bako-cvr-top-content {
		width: 100%;
	}
}

.bako-cvr-thum {
	width: 50%;
	background: linear-gradient(90deg, #4FA8AF 0%, #37C9D5 100%);
	display: grid;
	place-items: center;
}

@media (max-width:820px) {
	.bako-cvr-thum {
		width: 100%;
	}
}

.bako-cvr-thum-img {
	width: 100%;
}

.bako-cvr-top-content-h2 {
	font-size: 24px;
	font-weight: bold;
	color: #252525;
	line-height: 1.3;
	padding: 18px 0 0 0;
}

@media (max-width:430px) {
	.bako-cvr-top-content-h2 {
		font-size: 24px;
	}
}

.bako-cvr-top-content-description {
	font-size: 15px;
	color: #252525;
}

@media (max-width:430px) {
	.bako-cvr-top-content-description {
		font-size: 15px;
	}
}

.bako-cvr-top-content .button-link-size-medium{
	width: 280px;
	margin: 10px 0 0 0;
}

.bako-cvr-bottom {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: stretch;
}

@media (max-width:820px) {
	.bako-cvr-bottom {
		flex-direction: column;
	}
}

.bako-cvr-bottom > li {
	list-style: none;
	width: 100%;
}

@media (max-width:820px) {
	.bako-cvr-bottom > li:nth-child(2) {
		margin-top: -5px;
	}
}

.bako-cvr-bottom-card {
	background-color: #fff;
	border: 5px solid #4FA8AF;
	padding: 16px;
	display: flex;
	flex-direction: row;
	gap: 24px;
	align-items: center;
	height: 100%;
}


.bako-cvr-bottom > li:nth-child(1) .bako-cvr-bottom-card{
	border-right: 2.5px;
}

@media (max-width:820px) {
	.bako-cvr-bottom-card {
		justify-content: space-between;
	}
}

@media (max-width:430px) {
	.bako-cvr-bottom-card {
		flex-direction: column;
		gap:8px;
		text-align: center;
	}
}
@media (max-width:430px) {
	.bako-cvr-bottom > li:nth-child(1) .bako-cvr-bottom-card{
		border-right: 5px solid #4FA8AF;
	}
}

.bako-cvr-bottom-card-content {
	display: flex;
	flex-direction: column;
	gap: 0px;
}

.bako-cvr-bottom-card-h2 {
	font-size: 24px;
	font-weight: bold;
	color: #252525;
}


.bako-cvr-bottom-card-description {
	font-size: 15px;
	color: #252525;
}

.bako-cvr-button {
	display: flex;
	text-decoration: none;
	background-color: #4FA8AF;
	color: #fff;
	border: 1px solid #bbbbbb;
	border-radius: 30px;
	height: 60px;
	width: 180px;
	font-weight: bold;
	flex-direction: row;
	align-items: center;
	padding: 8px 0;
	text-align: center;
	gap: 8px;
	justify-content: center;
}

.bako-cvr-button:hover {
	background-color: #2F939B;
	border: 1px solid #bbbbbb;
}

.bako-cvr-icon {
	width: 16px;
}

.faq-section .container {
	border-bottom: 1px dotted #DEDEDE;
	margin-bottom: 80px;
}

@media (max-width:430px) {
	.faq-section .container {
		margin-bottom: 32px;
	}
}

.faq-h2 {
	margin-bottom: 24px;
	font-size: 24px;
	color: #252525;
}


.faq-item {
	border-top: 1px dotted #DEDEDE;
	padding: 12px 0;
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.faq-question-h3 {
	font-size: 16px;
	font-weight: bold;
	color: #252525;
}

.faq-item:hover {
}

.faq-question-q {
	color: #0097AC;
	padding-right: 12px;
}

.faq-question-a {
	color: #252525;
	padding-right: 12px;
}

.faq-question {
	padding: 20px 25px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background 0.3s ease;
	gap:16px;
}

.faq-question:hover {
	background: #f8f9fa;
}

.faq-icon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-answer-content {
	padding: 0 25px;
	color: #252525;
	line-height: 1.6;
}

.faq-item.active .faq-answer {
	max-height: 500px;
	padding: 8px 0 20px 0;
}

.faq-item.active .faq-icon {
	transform: rotate(180deg);
}


.faq-button {
	max-width: 220px;
	margin: 16px 0 0 0;
}


/* -------------------- 
page-usage
-------------------- */

.page-header {
	width: 100%;
}

@media (max-width:430px) {
	.page-header .container {
		padding: 0;
	}
}

.page-header-content {
	width: 100%;
	background-color: #F4F8F9;
	padding: 60px 0;
	text-align: center;
}

@media (max-width:430px) {
	.page-header-content {
		padding: 40px 24px;
	}
}

.page-header-h1 {
	font-size: 40px;
	font-weight: bold;
	color: #139EA8;
}

@media (max-width:430px) {
	.page-header-h1 {
		font-size: 32px;
	}
}

.page-header-description {
	font-size: 16px;
	font-weight: bold;
	color: #252525;
}

.page-header-under {
	width: 100%;
	padding: 50px 0;
}

@media (max-width:430px) {
	.page-header-under {
		padding: 0;
	}
}

.page-header-under-content {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	gap: 24px;
}

@media (max-width:820px) {
	.page-header-under-content {
		flex-direction: column-reverse;
	}
}

@media (max-width:430px) {
	.page-header-under-content {
		display: none;
	}
}

.page-header-under-content {
	flex: 1;
	align-items: center;
}

.page-header-under-contents {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

.page-header-under-content-h2 {
	font-size: 32px;
	line-height: 1.4;
	font-weight: bold;
	color: #252525;
}

.page-header-under-content-description {
	font-size: 15px;
	margin-top: 8px;
	color: #252525;
}

.page-header-under-content-thum {
	width: 420px;
	height: 320px;
}

.usage-page-navigation {
	background-color: #F3F3F3;
	width: 100%;
	padding: 40px 0;
}

.usage-case {
	padding: 50px 0;
}

.usage-case-h2 {
	position: relative;
	color: #252525;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	margin: 32px 0 0 0;
}

.usage-case-h2 span {
	background-color: #fff;
	padding: 0 24px;
}

.usage-case-h2::before {
	content: "";
	position: absolute;
	border-top: 2px dotted #0097AC;
	top: 20px;
	left: 0;
	width: 100%;
	z-index: -1;
}

.usage-case-block {
	padding: 40px 0;
}

.usage-case-block-titles {
	display: flex;
	flex-direction: column-reverse;
	text-align: center;
}

.usage-case-h3 {
	font-size: 24px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 16px;
}

.usage-case-h3-top {
	font-size: 16px;
	font-weight: bold;
	color: #31C8DD;
}

.usage-case-thum {
	width: 100%;
}

.usage-case-about {
	border: 3px solid #252525;
	border-radius: 5px;
	padding: 20px 40px;
	margin-top: 24px;
}

.usage-case-h4 {
	font-size: 18px;
	font-weight: bold;
	color: #252525;
	margin: -34px 0 12px 0;
	text-align: center;
}

.usage-case-h4 span {
	background-color: #fff;
	padding: 0 12px;
}

.usage-case-about-description {
	font-size: 16px;
	color: #252525;
}

.usage-case-about-list {
	margin-top: 16px;
}

.usage-case-about-list > li {
	list-style: none;
	padding: 4px 0;
}

.usage-case-about-check {
	position: relative;
	padding: 0 0 0 24px;
	font-size: 15px;
	color: #252525;
}

.usage-case-about-check span {
	color: #0097AC;
	font-weight: bold;
}

.usage-case-about-check::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(./assets/images/icon-check-checked.svg);
}


/* -------------------- 
page-pricing
-------------------- */


.pricing {
	background-color: #F8F8F8;
	padding: 50px 0;
}

@media (max-width:820px) {
	.pricing {
		display: none;
	}
	.pricing.under-tablet-display {
		display: block;
	}
}

.pricing-h2 {
	font-size: 29px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 12px;
}

@media (max-width:430px) {
	.pricing-h2 {
		font-size: 24px;
	}
}

.pricing-table {
	background-color: #fff;
	border: 2px solid #31C8DD;
	border-radius: 10px;
}

@media (max-width:820px) {
	.pricing-table {
		margin-bottom: 24px;
	}
}

.pricing-title {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.pricing-price-title {
	flex: 1;
}

.pricing-price-title-feature {
	background-color: #F3FEFF;
}

.pricing-price-head {
	width: 356px;
}

.pricing-price-name {
	padding: 12px 8px 8px;
	border-left: 2px solid #31C8DD;
}

@media (max-width:820px) {
	.pricing-price-name {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: left;
		padding: 12px 16px;
		gap:12px;
		border-left: 0px solid #31C8DD;
	}
}

@media (max-width:430px) {
	.pricing-price-name {
		flex-direction: column-reverse;
	}
}

.pricing-price-name-top {
	display: flex;
	flex-direction: column;
}

@media (max-width:430px) {
	.pricing-price-name-top {
		width: 100%;
	}
}

.pricing-price-h2 {
	font-size: 18px;
	font-weight: bold;
	color: #252525;
	text-align: center;
}

@media (max-width:820px) {
	.pricing-price-h2 {
		text-align: left;
	}
}

.pricing-price-description {
	font-size: 14px;
	color: #252525;
	margin: 8px 0;
}

@media (max-width:820px) {
	.pricing-price-description {
		margin: 4px 0 0 0;
	}
}

.pricing-price-title-thum {
	width: 100%;
}

@media (max-width:820px) {
	.pricing-price-title-thum {
		width: 200px;
	}
}

@media (max-width:430px) {
	.pricing-price-title-thum {
		width: 100%;
	}
}

.pricing-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-top: 2px solid #DFDFDF;
}

@media (max-width:430px) {
	.pricing-item.pricing-item-sp-none {
		display: none;
	}
}

.pricing-item-title {
	width: 356px;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	font-size: 14px;
	align-items: center;
	color: #252525;
	height: 50px;
	padding: 0 12px;
}

@media (max-width:820px) {
	.pricing-item-title {
		flex: 1;
	}
}

@media (max-width:820px) {
	.pricing-item-title-block {
		width: 356px;
		display: flex;
		flex: 1;
		justify-content: start;
		flex-direction: row;
		align-items: center;
		font-size: 14px;
		align-items: center;
		color: #252525;
		height: 50px;
		padding: 0 12px;
		border-right: 2px solid #DFDFDF;
	}
}

@media (max-width:430px) {
	.pricing-item-title-block {
		width: 200px;
		text-align: left;
		padding: 0 16px;
	}
}

@media (max-width:820px) {
	.pricing-item-detail-text {
		padding: 0 0 0 12px;
		width: 160px;
	}
}
@media (max-width:430px) {
	.pricing-item-detail-text {
		padding: 0 0 0 0px;
	}
}

.pricing-item-title-icon {
	width: 22px;
}

.pricing-item-coming {
	font-size: 14px;
	color: #31C8DD;
	flex: none;
	padding-right: 8px;
}

.pricing-item-detail {
	flex: 1;
	border-left: 2px solid #31C8DD;
	height: 50px;
	display: flex;
	align-items: center;
	padding: 0 12px;
	text-align: center;
}

.pricing-item-detail-text {
	width: 100%;
}

@media (max-width:820px) {
	.pricing-item-detail {
		border-left: 0px solid #31C8DD;
	}
}

@media (max-width:430px) {
	.pricing-item-detail {
		padding: 0;
	}
}

.pricing-item-detail-icon {
	margin-top: 8px;
}

.pricing-item-detail-feature {
	background-color: #F3FEFF;
}

.pricing-table-hosoku {
	display: flex;
	margin-top:20px;
	margin-bottom: 16px;
	flex-direction: row;
	align-items: center;
}

.pricing-table-hosoku-icon {
	width: 24px;
	padding-right: 4px;
}
.pricing-table-hosoku-text {
	padding-right: 12px;
}

.pricing-table-hosoku-text {
	font-size: 16px;
	color: #252525;
}

.pricing-table-attention {
	font-size: 16px;
	color: #252525;
	margin-bottom: 8px;
}

.pricing-table-attention a {
	color: #0097AC;
	font-weight: bold;
	text-decoration: underline;
}
.pricing-table-attention a:hover {
	text-decoration: inherit;
}


.tooltip {
	position: relative;
	display: inline-block;
	cursor: pointer;
	width: 24px;
	height: 24px;
}

@media (max-width:430px) {
	.tooltip {
		display: none;
	}
}

.tooltip-right .tooltiptext {
	visibility: hidden;
	width: 200px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 8px;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 110%;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip-right .tooltiptext::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent #333 transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.pricing-cvr {
	width: 100%;
	background-color: #F6F6F6;
	padding: 30px 0;
	margin-bottom: 48px;
}

.pricing-cvr-middle {
	width: 100%;
	background-color: #F6F6F6;
	padding: 30px 0;
}

.pricing-cvr-card {
	display: flex;
	flex-direction: row;
	border: 3px solid #00C4CC;
	border-radius: 5px;
	align-items: center;
	align-items: stretch;
}

@media (max-width:820px) {
	.pricing-cvr-card {
		flex-direction: column;
	}
}

.pricing-cvr-card-text {
	flex: 1;
	background-color: #00C4CC;
	padding: 54px 32px 32px;
}

@media (max-width: 1024px) {
	.pricing-cvr-card-text {
		padding: 32px;
	}
}

.pricing-cvr-card-content {
	width: 500px;
	background-color: #fff;
	padding: 32px;
	text-align: center;
}

@media (max-width:820px) {
	.pricing-cvr-card-content {
		width: 100%;
	}
}

.pricing-cvr-card-title {
	font-size: 30px;
	font-weight: bold;
	color: #fff;
}

@media (max-width:820px) {
	.pricing-cvr-card-title {
		text-align: center;
	}
}

@media (max-width:430px) {
	.pricing-cvr-card-title {
		font-size: 24px;
	}
}

.pricing-cvr-card-h2 {
	font-size: 29px;
	font-weight:bold;
	color: #252525;
	position: relative;
}

.pricing-cvr-card-h2::before {
	content: "¥";
	position: absolute;
	left: calc(100% - 300px);
	top: 0;
	font-size: 29px;
	font-weight: bold;
	color: #00C4CC;
}

@media (max-width:820px) {
	.pricing-cvr-card-h2::before {
		display: none;
	}
}

.pricing-cvr-card-description {
	font-size: 14px;
	font-weight: bold;
	color: #252525;
	margin: 12px 0 16px 0;
}

.pricing-cvr-button-area {
}

.pricing-cvr-button-icon {
	width: 16px;
	height: 16px;
	margin-left: 12px;
}

.pricing-cvr-button {
	display: block;
	width: 300px;
	height: 47px;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	background-color: #00C4CC;
	border-radius: 25px;
	padding: 9px 0 0 0;
	margin: 0 auto;
}

.pricing-cvr-button:hover {
	background-color: #4FA8AF;
	
}

.pricing-feature {
	background-color: #F6F6F6;
	padding: 24px 0;
}

.pricing-feature-h2 {
	font-size: 29px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 16px;
}

@media (max-width:430px) {
	.pricing-feature-h2 {
		font-size: 24px;
	}
}

.pricing-feature-card-list {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	gap: 32px;
}

@media (max-width:820px) {
	.pricing-feature-card-list {
		flex-direction: column;
	}
}

.pricing-feature-card-list > li {
	list-style: none;
	width: 100%;
}

.pricing-feature-card {
	width: 100%;
	background-color: #fff;
	padding: 16px 80px;
}

@media (max-width:430px) {
	.pricing-feature-card {
		padding: 16px;
	}
}

.pricing-feature-h3 {
	font-size: 20px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 12px;
	text-align: center;
}

.pricing-feature-thum {
	width: 280px;
	margin: 0 auto 12px auto;
	display: block;
}

.pricing-feature-card-attention-text {
	background-color: #4FA8AF;
	padding: 6px 12px;
	border-radius: 3px;
	text-align: center;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 12px;
}

.pricing-feature-card-list-point {}

.pricing-feature-card-list-point > li {
	list-style: none;
	padding: 4px 0;
}

.pricing-feature-card-list-point-text {
	font-size: 12px;
	font-weight: bold;
}

.pricing-feature-last {
	padding: 16px 120px;
	margin-top: 24px;
	background-color: #E3EDEF;
}

@media (max-width: 1024px) {
	.pricing-feature-last {
		padding: 24px;
	}
}

.pricing-feature-last-h3 {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 12px;
}

.pricing-support {
	background-color: #f8f8f8;
	padding: 50px 0;
}

.pricing-support-h2 {
	text-align: left;
	font-size: 29px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 16px;
}

@media (max-width:430px) {
	.pricing-support-h2 {
		font-size: 24px;
	}
}

.pricing-support-list {
	
}

.pricing-support-list > li {
	list-style: none;
	margin-bottom: 16px;
}

.pricing-support-card {
	background-color: #fff;
	width: 100%;
	padding: 20px;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-direction: row;
}

@media (max-width:820px) {
	.pricing-support-card {
		flex-direction: row-reverse;
		align-items: start;
	}
}

@media (max-width:430px) {
	.pricing-support-card {
		flex-direction: column-reverse;
	}
}

.pricing-support-card-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}


.pricing-support-card-tag-text {
	display: inline-block;
	background-color: #F4F8F9;
	border-radius: 3px;
	padding: 5px 20px;
	color: #0097AC;
	font-size: 14px;
	font-weight: bold;
}

.pricing-support-h3 {
	font-size: 26px;
	color: #252525;
	font-weight: bold;
}

@media (max-wdth:430px) {
	.pricing-support-h3 {
		font-size: 18px;
	}
}

.pricing-support-card-description {
	font-size: 16px;
	color: #252525;
}

@media (max-width:430px) {
	.pricing-support-card-description {
		font-size: 15px;
	}
}

.pricing-support-card-attention {
	font-size: 14px;
	color: #252525;
}

.pricing-support-card-thum {
	width: 368px;
}

@media (max-width:820px) {
	.pricing-support-card-thum {
		width: 200px;
	}
}

@media (max-width:430px) {
	.pricing-support-card-thum {
		width: 100%;
	}
}

.pricing-voice {
	background-color: #fff;
	padding: 32px;
	border-radius: 10px;
	margin-top: 16px;
}

.pricing-voice-h2 {
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 8px;
}

.pricing-voice-list {
	display: flex;
	flex-direction: row;
	gap:16px;
}

@media (max-width:430px) {
	.pricing-voice-list {
		flex-direction: column;
	}
}

.pricing-voice-list > li {
	width: 32%;
	list-style: none;
	display: flex;
	align-items: start;
	gap: 12px
}

@media (max-width:430px) {
	.pricing-voice-list > li {
		width: 100%;
	}
}

.pricing-voice-thum {
	width: 64px;
	height: 64px;
	border-radius: 10px;
}

.pricing-voice-text {
	font-size: 14px;
	color: #252525;
}


/* page共通 */

.pages {
	color: #252525;
	margin-bottom: 60px;
}

.pages h1 {
	font-size: 40px;
	margin: 40px 0 12px 0;
}

.pages h2 {
	font-size: 28px;
	margin: 20px 0 12px 0;
}

.pages p {
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 16px;
}

.pages ul {
	padding-left: 24px;
}

.pages ol {
	padding-left: 24px;
}

.pages ul li,
.pages ol li {
	list-style: none;
}



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

security

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

.security-counterplan {
	padding: 24px 0 60px 0;
	width: 100%;
	background-color: #F6F6F6;
	margin-bottom: 60px;
}

.security-h2 {
	font-size: 24px;
	color: #252525;
	margin-bottom: 16px;
	margin-top: 40px;
}

@media (max-width:430px) {
	.security-h2 {
		font-size: 24px;
		margin-top: 12px;
	}
}

.security-counterplan-list {
	display: flex;
	flex-wrap: wrap;
	gap:16px;
	align-items: stretch;
}

@media (max-width:820px) {
	.security-counterplan-list {
		flex-direction: column;
	}
}

.security-counterplan-list > li {
	width: 32%;
	list-style: none;
}

@media (max-width:820px) {
	.security-counterplan-list > li {
		width: 100%;
	}
}

.security-counterplan-list-card {
	padding: 24px 30px;
	background-color: #fff;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

@media (max-width:820px) {
	.security-counterplan-list-card {
		flex-direction: row;
		align-items: center;
		gap:16px;
	}
}

@media (max-width:430px) {
	.security-counterplan-list-card {
		flex-direction: column;
	}
}

.security-counterplan-list-card-description {
	font-size: 14px;
	font-weight: bold;
	color: #252525;;
}

.security-counterplan-thum {
	width: 100%;
}

@media (max-width:820px) {
	.security-counterplan-thum {
		width: 200px;
	}
}

@media (max-width:430px) {
	.security-counterplan-thum {
		width: 100%;
	}
}

.security-h3 {
	font-size: 18px;
	font-weight: bold;
	color: #252525;
	margin: 24px 0 12px 0;
}

@media (max-width:820px) {
	.security-h3 {
		margin: 0 0 12px 0;
	}
}

.security-counterplan-list-card-description {
	font-size: 14px;
	color: #252525;
	font-weight: normal;
}


.sp-humberger {
	display: none;
}

@media (max-width:430px) {
	.sp-humberger {
		display: block;
	}
}

@media (max-width:430px) {
	.header-main-menu-sp {
		display: flex;
		gap:16px;
		align-items: center;
	}
}

.hamburger {
	width: 30px;
	height: 21px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: none;
	border: none;
	padding: 0;
}

.hamburger span {
	display: block;
	width: 100%;
	height: 3px;
	background: var(--button-primary-bg);
	transition: all 0.3s;
}

.hamburger.active span:nth-child(1) {
	transform: translateY(11px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hamburger.active span:nth-child(3) {
	transform: translateY(-11px) rotate(-45deg);
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	z-index: 200;
}

.overlay.active {
	opacity: 1;
	visibility: visible;
}

.modal-menu {
	position: fixed;
	top: 0;
	right: -280px;
	width: 280px;
	height: 100%;
	background: #ffffff;
	transition: right 0.3s;
	z-index: 300;
	overflow-y: auto;
}

.modal-menu.active {
	right: 0;
}

.menu-header {
	background: var(--button-primary-bg);
	color: #ffffff;
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.close-btn {
	background: none;
	border: none;
	color: #ffffff;
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-list {
	list-style: none;
	padding: 0;
}

.menu-list li {
	border-bottom: 1px solid #eee;
}

.menu-list a {
	display: block;
	padding: 16px 20px;
	color: #252525;
	text-decoration: none;
	transition: background 0.2s;
}

.menu-list a:hover {
	background: #f5f5f5;
}



/* company */

.wrap-company {
	padding: 80px 0 40px 0;
	width: 746px;
	margin: 0 auto;
	position: relative;
}

.wrap-company::after {
	content: "";
	position: absolute;
	top: 340px;
	right: 0;
	width: 211px;
	height: 211px;
	background-image: url(./images/company-dot.svg);
	background-repeat: no-repeat;
	background-size: cover;
}

.h1-company {
	padding: 32px 0 0 0;
	font-size: 49px;
	font-weight: normal;
	color: var(--text-primary);
}

.h1-company-subtext {
	font-size: 12px;
	color: var(--text-primary);
	margin: -4px 0 0 0;
}

.h2-company {
	color: #0097ac;
	font-size: 35px;
	line-height: 1.3;
	font-weight: bold;
	margin: 20px 0 0 0;
}

.purpose-message {
	font-size: 17px;
	color: #4c4c4c;
	line-height: 1.7;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin: 32px 0 0 0;	
}

.purpose-keymessage {
	font-size: 32px;
	font-weight: bold;
	line-height: 1.4;
	color: #4c4c4c;
	letter-spacing: 0.1em;
	margin: 32px 0 0 0;
}

.purpose-keymessage span {
	color: #0097AC;
}

hr.dot-line {
	margin: 40px 0 0 0;
	border: 1px dashed rgba(112, 124, 151, 0.2);
}

.h3-company {
	color: #0097AC;
	font-weight: bold;
	font-size:20px;
	margin: 20px 0 12px 0;
}

.company-about-text {
	color: #000;
	font-size: 14px;
	line-height: 1.5;
	font-weight: normal;
}

.company-cta {
	background-color:#FBFBFB;
	width:100%;
	padding:32px 16px;
}

.company-cta-wrap {
	margin:0 auto;
	width:1024px;
	display:flex;
	justify-content:space-between;
	gap:24px;
	align-items: center;
}

.company-cta-text-title {
	color:#1A1F4A;
	font-size:26px;
	font-weight:bold;
	display:flex;
	align-items: center;
	gap:8px;
	margin-bottom:12px;
}

.company-cta-text-title img {
	width:180px;
}

.company-cta-text-dsc {
	color:#1A1F4A;
	font-size:22px;
	font-weight:bold;
}

.company-cta-button-bule {
	background-color:#0097AC;
	border-radius:5px;
	height:60px;
	padding:0 24px;
	color:#fff;
	font-size:22px;
	font-weight:bold;
	display:block;
	line-height:60px;
	display:flex;
	align-items:center;
	gap:12px;
	text-decoration: none;
}

.company-cta-button-bule:hover {
	opacity:0.7;
}

.company-cta-button-icon {
	width:20px;
}

.pc-none {
	display: none;
}

/* ---------- 429-1024 ---------- */
@media screen and (min-width:429px) and ( max-width:1024px) {

.company-cta-wrap {
	width:100%;
	flex-direction:column;
}
	
	.company-cta-text {
		text-align:center;
	}

}
/* ---------- 320-428 ---------- */
@media screen and (min-width:320px) and ( max-width:430px) {
	.wrap-company {
		width: 100%;
	}
	.h1-company {
		font-size: 36px;
	}
	.h2-company {
		font-size: 21px;
		line-height: 1.5;
	}
	.purpose-message {
		font-size: 12px;
		font-weight: normal;
	}
	.wrap-company::after {
		width: 74px;
		height: 74px;
		top: 300px;
	}
	.purpose-keymessage {
		font-size: 26px;
	}
	.pc-none {
		display: block;
	}
	.h3-company {
		font-size: 14px;
		font-weight: normal;
	}
.company-cta-wrap {
	width:100%;
	flex-direction:column;
}
	
	.company-cta-text-title {
		flex-direction:column;
	}
	.company-cta-text-title {
		font-size:20px;
	}
	.company-cta-text-dsc {
		font-size:20px;
	}
	.company-cta-button-bule {
		font-size:16px;
		height:40px;
		line-height:40px;
	}
	
	.company-cta-text {
		text-align:center;
	}

}


.form-subattention {
	font-size:13px;
	font-weight:bold;
	text-align:center;
	margin-bottom:-20px;
}


.p-form-card-list-attention {
	margin-top:4px;
	margin-bottom:12px;
	font-size:13px;
}
.form {
	background-color: var(--bg-primary);
	width: 100%;
	padding: 0px 0 64px 0;
}

.form-wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
}

.form-wrap-info {
	width: 400px;
	margin: 0 40px 0 0;
}

.form-wrap-form {
	width: calc(100% - 440px);
	padding: 40px;
	background-color: var(--bg-secondary);
	border-radius: 16px;
	box-shadow: 2px 2px 4px rgba(000,000,000,0.2);
	border:1px solid #eee;
}

.h1-form {
	color: #0097AC;
	margin: 0 0 12px 0;
	font-size: 38px;
}

.h1-form-inquiry {
	font-size:28px;
}

.p-form {
	color: var(--text-primary);
	line-height: 1.7;
	font-size: 14px;
}

.form-card-gray {
	margin: 12px 0 0 0;
}

.h3-form-card {
	color: #1A1F4A;
	font-size: 18px;
	font-weight: bold;
	margin: 0px 0 8px 0;
	padding:0 0 8px 0;
	border-bottom:1px solid #1A1F4A;
}

.form-card-list > li {
	margin: 0 0 0px 0;
	font-size: 16px;
	color: #1A1F4A;
	font-weight: bold;
	list-style:none;
}

.p-form-card-list-attention {
	font-size: 12px;
	color: var(--text-primary);
	line-height: 1.5;
}

.form-card-jisseki-thum {
	width: 100%;
}

.h2-form {
	font-size: 16px;
	color: var(--text-primary);
	margin: 40px 0 12px 0;
}

.btn-form-secondary {
	border: 2px solid #0097AC;
	text-align: center;
	height: 72px;
	font-size: 20px;
	color: #0097AC;
	line-height: 40px;
	border-radius: 6px;
	width: 354px;
	position: relative;
}

.btn-form-secondary:hover {
	background-color: rgba(0,151,172,0.1);
}

.btn-form-secondary::after {
	content: "";
	background-image: url(./images/ic-button-arrow.svg);
	width: 20px;
	height: 20px;
	right: 24px;
	top: 24px;
	z-index: 1;
	position: absolute;
	background-size: cover;
}

.p-form-explain {
	font-size: 16px;
	font-weight: bold;
	color: var(--text-primary);
	text-align: center;
	padding: 32px 0;
}

input[type="submit"] {
	background-color: #0097AC;
	color: #fff;
	height: 72px;
	line-height: 72px;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	padding: 0;
	border-radius: 6px;
}

input[type="submit"]:hover {
	background-color: #27B2C6;
}

.form-content {
	margin: 0 0 16px 0;
	display: flex;
	justify-content: space-between;
}

.form-content-name {
	border-bottom: 1px solid #eee;
	width: 200px;
	margin: 0 24px 0 0;
	padding: 12px 0 0 0;
}

.form-content-title {
	color: #0097AC;
	font-weight: bold;
	position: relative;
}

.form-must-badge {
	color: #0097AC;
	border: 1px solid #0097AC;
	padding: 0px 16px;
	border-radius: 12px;
	position: absolute;
	right: 0;
	top: 0;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
}

.form-content-input {
	width: calc(100% - 200px);
	min-height:44px;
}

.p-form-legal {
	color: var(--text-primary);
	font-size: 14px;
	margin: 12px 0 12px 0;
}

.p-form-legal a {
	color: #0097AC;
	text-decoration: underline;
}

.p-form-legal a:hover {
	color: #27B2C6;
	text-decoration: none;
}

.contact-title--sub {
	font-size:20px;
	font-weight:bold;
	color:#707C97;
	margin:32px 0 10px 0;
	position:relative;
}


.contact-title--sub::after {
	content:"";
	position:absolute;
	right:0;
	top:14px;
	width:220px;
	background-color:#707C97;
	height:1px;
}

.contact-faq-list {
	margin:4px 0;
}

.contact-faq-list > li {
	list-style: none;
}

.contact-faq-list > li p {
	font-size:16px;
	color:#707C97;
	line-height:2;
}

.contact-faq-dsc {
	font-size:14px;
	color:#707C97;
	margin:0 0 12px 0;
}



.contact-faq-dsc-last {
	font-size:14px;
	color:#707C97;
	margin:0 0 12px 0;
	border-bottom:1px solid #707C97;
	padding: 0 0 24px 0;
}


.no-sales {
	margin:12px 0;
}

.no-sales-text {
	font-size:13px;
	color:#252525;
	margin:10px 0;
	padding:8px 32px;
	position:relative;
}

.no-sales-text::before {
	content:"";
	position:absolute;
	left:0;
	top:0;
	background-image:url("https://minbako.com/wp-content/uploads/2024/11/kakko-left.png");
	width:17px;
	height:55px;
	background-size:cover;
}
.no-sales-text::after {
	content:"";
	position:absolute;
	right:0;
	top:0;
	background-image:url("https://minbako.com/wp-content/uploads/2024/11/kakko-right.png");
	width:17px;
	height:55px;
	background-size:cover;
}

.img-no-sales-thum {
	width:100%;
}


/* ---------- 429-1024 ---------- */
@media screen and (min-width:429px) and ( max-width:1024px) {
	.form-wrap-info {
		width:100%;
		margin:0 0 40px 0;
	}
	.h1-form-demo-trial {
		text-align:center;
	}

}
/* ---------- 375-428 ---------- */
@media screen and (min-width:375px) and ( max-width:428px) {
	.form-wrap-info {
		width: 100%;
		margin: 0;
	}
	.h1-form {
		font-size: 24px;
	}
	.h2-form {
		text-align: center;
	}
	.form-wrap-form {
		width: 100%;
		padding: 24px;
		margin: 32px 0 0 0;
	}
	.form-content {
		flex-wrap: wrap;
	}
	.form-content-name {
		width: 100%;
		border: 0px solid #000;
		margin: 0 0 8px 0;
	}
	.form-content-input {
		width: 100%;
	}
	input[type="submit"] {
		height: 56px;
		line-height: 56px;
	}
	.btn-form-secondary {
		height: 56px;
		line-height: 52px;
		width:100%;
	}
	.btn-form-secondary::after {
		top: 17px;
	}
.contact-title--sub::after {
	width:120px;
}
	
.no-sales-text::before {
	top:6px;
}
.no-sales-text::after {
	top:6px;
}
	.h1-form-demo-trial {
		text-align:center;
	}
}
/* ---------- 320-374 ---------- */
@media screen and (min-width:320px) and ( max-width:374px) {

}



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

form-contact-thanks

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

.thanks {
	background: var(--bg-primary);
	padding: 64px 0;
	width: 100%;
}

.thanks-section {
	height:100vh;
	position: relative;
}

.wrap-thanks {
	  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

.thanks-wrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	margin: 40px 0;
}

.img-thanks-thum {
	width: 200px;
	height: 200px;
}

.thanks-info {
	width: 600px;
	padding: 0 0 0 40px;
}

.h1-thanks {
	color: #0097AC;
	font-size: 30px;
	font-weight: bold;
	margin: 0 0 12px 0;
}

.p-thanks {
	color: #0097AC;
	font-size: 16px;
	line-height: 2;
	font-weight: bold;
}

/* thanks2 */

.thanks-header {
	width: 100%;
	background-color: #D4EDED;
	padding: 40px 0;
}

.thanks-header-contents {
	width: 1024px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:40px;
}

.thanks-header-info h1 {
	font-size: 32px;
	font-weight: bold;
	color:var(--text-primary);
	margin-bottom: 8px;
}
.thanks-header-info p {
	font-size: 15px;
	line-height: 1.5;
	color:var(--text-primary);
}

.thanks-header-images {
	width: 260px;
}

.thanks-header-images img {
	width: 260px;
}

.thanks-content {
	width: 1024px;
	padding: 32px 0;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap:24px;
}
.thanks-content-info {
	flex: 1;
}

.thanks-content-info h2 {
	font-size: 24px;
	font-weight: bold;
	color:#0097AC;
	margin-bottom: 8px;
	margin-top: 32px;
}
.thanks-content-info ul {
	margin-bottom: 16px;
}
.thanks-content-info ul li {
	color: #707C97;
	font-size: 15px;
	margin: 2px 0;
}
.thanks-content-info  p {
	font-size: 15px;
	line-height: 1.5;
	color: #707C97;
}

.thanks-content-embed {
	width: 560px;
}

.thanks-content-embed-top-text {
	padding:0 0 20px 0;
}


/* ---------- 429-1024 ---------- */
@media screen and (min-width:429px) and ( max-width:1024px) {
	.thanks-header-contents {
		width: 100%;
		padding: 0 24px;
	}
	
	.thanks-content {
		width: 100%;
		padding: 24px;
		flex-direction: column;
	}
	
	.thanks-content-embed {
		width:100%;
	}

}
/* ---------- 375-428 ---------- */
@media screen and (min-width:320px) and ( max-width:428px) {
	.thanks-header-contents {
		width: 100%;
		padding: 0 16px;
		flex-direction: column-reverse;
	}
	
	.thanks-content {
		width: 100%;
		padding: 16px;
		flex-direction: column;
	}
	
	.thanks-content-embed {
		width:100%;
	}
	.thanks-info {
		padding:0;
	}
}