@charset "UTF-8";

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-weight: 400
}

body {
	font-family: "ryo-gothic-plusn", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	line-height: 1
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block
}

ul,
ol {
	list-style: none
}

blockquote,
q {
	quotes: none
}

i {
	font-style: normal
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transition: all .2s ease;
}

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none
}

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: 700
}

del {
	text-decoration: line-through
}

abbr[title],
dfn[title] {
	border-bottom: 1px dotted;
	cursor: help
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0
}

input,
select {
	vertical-align: middle
}

button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none
}

img,
svg {
	vertical-align: bottom
}

:root,
::backdrop {
	--scrollbar: 0px;
	--breakpoint: 950;
	--100vw: calc(100vw - var(--scrollbar));
	--1vw: calc((100vw - var(--scrollbar)) / 100);
	--color-white: #fff;
	--color-black: #000;
	--font-bold: bold
}

:root {
	--black: #232315;
	--white: #fff;
	--gray: #f1f3f3;
	--darkgray: #bebebe;
	--green: #00b1b5;
	--orange: #ee6f66;
	--cms: #2f4050;
	--autou: #ed704a;
	--atelu: #c84e75;
  --atelu-orange: #FFA726;	
	--atelusub: #523c44;
	--atelu-low: #f3d1d1
}

.page-atelu {
	--black: #523c44;
}

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

	:root,
	::backdrop {
		--whiteGrid: 24px;
		--redGrid: (var(--100vw, 100vw) - 600px) / 24;
		--mixGrid: 24px + var(--redGrid)
	}
}

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

	:root,
	::backdrop {
		--whiteGrid: 16px;
		--redGrid: (var(--100vw, 100vw) - 208px) / 12;
		--mixGrid: 16px + var(--redGrid)
	}
}

a {
	color: inherit;
}

html {
	visibility: hidden;
}

html.wf-active,
html.wfno-load {
	visibility: visible;
}

html,
body {
	width: 100%;
	height: auto;
	min-height: 100vh;
	font-family: "source-han-sans-japanese", sans-serif;
	font-feature-settings: "palt";
	font-smooth: antialiased;
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0;
}

canvas {
	-webkit-user-select: none;
	user-select: none
}

button {
	color: inherit
}

body.-mouse button:hover {
	cursor: pointer
}

div {
/* 	position: relative; */
	width: auto;
	height: auto;
	/*   max-width: 100%; */
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 0.75rem;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
.kv-subtitle-p span {
	font-family: "ryo-gothic-plusn", sans-serif;
	font-weight: 400;
	font-style: normal;
/* ★ サイト全体で変な改行が起きるのを防ぐ */	
  word-break: normal;	
  overflow-wrap: break-word;	
}

/* #comnico-page-cms .page-fv-inner {
	padding: 12vw 80px 0;
} */

#comnico-page-cms .page-fv-area {
	position: relative;
	background-color: #fdf9fb;
	padding-bottom: 60px;
}

.form-container {
	background-color: #dcdfe6;
	border-radius: 16px 0 0 0;
	padding: 30px 20px;
	text-align: center;
}

.product-form-area {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 18%;
	z-index: 3;
	top: auto;
}

.form-container p {
	font-size: 18px;
	font-weight: 600;
}

.form-container img {
	margin-bottom: 20px;
	margin-top: 30px;
}

input[type=email],
input[type=tel],
input[type=text] {
	border: 1px solid var(--darkgray);
	border-radius: 6px;
	margin-bottom: 15px;
	padding: 6px;
	width: 100%;
	margin-top: 7px;
}

#form-content label {
	font-size: 13px;
	font-weight: 600;
}

#form-content .terms {
	margin-bottom: 30px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
}

.terms .lh-middle {
	margin-top: 10px;
	font-size: 12px;
	font-weight: 400;
}

/* 20251118追加 */	
/* スマートフォン表示 (767px以下) */	
@media (max-width: 767px) {	
/* ... (既存の左揃え設定などはそのまま維持) ... */	
/* ▼▼▼ 赤枠のタイトルを中央揃えにする ▼▼▼ */	
 .terms .lh-middle,	
  h1.lh-middle {	
  text-align: center !important; /* ★ テキストを中央に */	
  width: 100% !important; /* ★ 幅を100%にして中央配置を有効にする */	
  display: block !important; /* ★ ブロック要素として扱う */	
 }	
}	
/* 20251118追加 */

.submit-btn {
	background-color: var(--atelu);
	border: none;
	border-radius: 8px;
	color: #fff;
	font-size: 14px;
	padding: 12px;
	width: 100%;
}

#comnico-page-cms .comnico-top-header .menu-logo {
	width: 100px;
}

.menu-cta a:first-child {
	border: 1px solid var(--atelu);
	color: var(--atelu);
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	padding: 15px 25px;
	font-weight: 600;
}

/* 20241115 */
.menu-cta a:first-child:hover {
	background-color: var(--atelu);
	opacity: 1;
	color: white;
}

.menu-cta a:last-child {
	background-color: var(--atelu-orange);
	border: 1px solid var(--atelu-orange);
	color: var(--white);
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	padding: 15px 25px;
	font-weight: 600;
}

/* 20241115 */
.menu-cta a:last-child:hover {
	color: var(--atelu-orange);
	background-color: white;
	opacity: 1;
}

#comnico-fv-area .nav-wrapper .menu-cta a {
	line-height: 1.6;
	padding: 6px 25px;
}

#comnico-page-cms .h1-head {
	padding-top: 45px;
	max-width: 150px;
}

/* 20251118修正＋追加 */	
.kv-atelu-desc {
	position: relative;
	background-color: var(--atelu);
	/* text-align: center; */
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	/* padding: 10px;
	width: 100%; */
  	/* ★★★ PCのスタイルを共通化 ★★★ */
	display: inline-block; /* ★テキスト幅に合わせる (PC/モバイル共通) */
	text-align: left;      /* ★テキストを左揃えに (PC/モバイル共通) */
	padding: 10px 20px;  /* ★PC用の余白に統一 */
	
	border-radius: 8px;
	margin-bottom: 16px !important;
}

/* スマートフォン表示 (767px以下) */
@media (max-width: 767px) {
    .kv-atelu-desc {
        text-align: center ;
        margin-left: auto ;
        margin-right: auto ;
        align-self: center ;
    }
}
/* 20251118修正＋追加 */	

.fv-title h1 {
	font-weight: 600;
	line-height: 1.2;
}

.page-product-kv-top {
	max-width: 55%;
}
/* 20251118修正＋追加 */	


/* 20251118修正＋追加 */	
/* ★★★ 全角スペースを修正し、レイアウト崩れを修正 ★★★ */

/* 1. 親コンテナ (4つのカードを囲む) */
.fv-sns-column {
	display: flex;
	flex-direction: row; /* 横並び */
	flex-wrap: wrap;
	
	/* ★ 隙間を 48px から 20px に狭くします */
	gap: 40px; 
	
	width: 100%; /* 全体の幅は100%のまま */
	
	align-content: flex-start;
	align-items: stretch; 
	margin-top: 40px;
}

/* 2. カードのラッパー (<a> タグ) */
.fv-sns-grid-link-wrapper {
	/* ★ gapの変更に合わせて計算式も変更 (20px * 3) / 4 = 15px */
	width: calc(25% - 15px); 
	
	display: block;
	text-decoration: none; 
	color: inherit;       
}
/* ホバーエフェクト */
.fv-sns-grid-link-wrapper:hover .fv-sns-grid {
    background-color: var(--atelu-light); /* ★薄い背景色を維持 */
    color: var(--atelu);                 /* ★濃い文字色を維持 */
    
    /* ↓↓↓ 薄く見える原因を無効化（追加）↓↓↓ */
    opacity: 1 !important;    /* ★半透明効果を強制的に無効化 */
    filter: none !important;  /* ★フィルター効果を強制的に無効化 */
    
    /* その他エフェクト */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
    transform: translateY(-3px);
}

/* 3. カード本体 (<a> タグの中身) */
.fv-sns-grid {
	display: flex;
	flex-direction: column; /* ★ 中身を「縦積み」に */
	align-items: flex-start;
	background-color: #ffffff;
	border-radius: 13px;
  border:2px solid #DCDFE6;
	padding: 16px;
	height: 100%; /* ★ 親(<a>)の高さに合わせる */
	transition: .3s all ease;
	box-sizing: border-box;
}

/* 4. カードのタイトル部分 */
.fv-sns-title-wrap {
	display: flex;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: start;
}
.fv-sns-title-wrap .fv-sns-title {
	margin-top: 0;
}

/* 5. カードのテキスト・ボタン部分 */
.fv-sns-meta-wrap {
	display: flex;
	width: 100%;
	flex-direction: column; /* ★ 中身を「縦積み」に */
	align-items: flex-start;
	flex-grow: 1; /* ★ 残りの高さをすべて埋める */
}

/* 6. アイコン */
.fv-sns-icon {
	width: 30px;
	padding-right: 8px;
	flex-shrink: 0;
	margin-top: -3px;
}
.fv-sns-img {
	width: 100%;
	height: auto;
}

/* 7. タイトル */
.fv-sns-title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	
	/* ★ 以下の5行を追加し、タイトルの高さを2行分に固定します */
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* ★ タイトルを2行までに制限 */
	height: 37px; /* ★ 高さを固定 (line-height 1.4 * 13px * 2行 + α) */
}

/* 8. テキスト */
.fv-sns-txt {
	margin-top: 15px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;

	/* ★ 以下の5行（固定高さと行数制限）を元に戻します */
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4; /* ★ 4行で「...」にする */
	height: 72px; /* ★ 高さを固定 (line-height 1.5 * 12px * 4行 = 72px) */
}

/* 9. 詳細を見るボタン */
.fv-sns-link {
	align-items: center;
	border: 2px solid var(--black);
	border-radius: 8px;
	color: var(--black);
	display: flex;
	font-size: 12px;
	font-weight: 500;
	justify-content: space-between;
	padding: 10px;
	width: 100%;
	text-align: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	position: relative;
	margin-top: auto; /* ★ 一番下に配置 */
	background-color: #fff;
	transition: .3s all ease;
}
/* 20251118修正＋追加 */	

.fv-sns-link .arrow {
	position: absolute;
	right: 20px;
}

.fv-sns-link:hover {
	opacity: 1;
	background-color: var(--atelu);
	color: var(--atelu);
	border-color: var(--atelu);
}

.fv-sns-link:hover .arrow {
	color: var(--white);
	color: var(--atelu);
}

.section-achievements {
	position: relative;
	width: 100%;
	padding: 30px 0;
}

.section-achievements-inner {
	position: relative;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}

.achievements-box {
	position: relative;
	width: 850px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	/* justify-content: space-between; */
	/* align-items: center; */
	gap: 10px;
}

.achievements-grid-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	margin: 0;
}

.achievements-grid {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
}

.achievements-grid-img {
	width: 100%;
	height: auto;
}

.achievements-text {
	width: 100%;
	padding-left: 20px;
	;
	margin-top: 20px;
	font-size: 10px;
	color: var(--black);
	text-align: right;
	line-height: 1.4;
}

.partner-slider-container {
	padding-bottom: 60px;
}

.partner-slider-container {
	margin-top: 0px;
}

#cms-case-area {
	background-color: #f1f3f3;
	padding: 60px 0;
}

#cms-case-area .inner-intro .cms-inner-title {
	font-weight: 700;
}

.common-btn.single-btn:hover

/* .title-en {
  display: block;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: 14px;
} */
.cms-inner-text {
	line-height: 1.6;
}

.common-ttl h2 {
	font-size: 32px;
	/*   font-weight: 600; */
	line-height: 1;
	margin-top: 16px;
}

.bg-cms {
	background-color: var(--white) !important;
	color: var(--atelusub) !important;
	border: 2px solid var(--atelusub);
}

.bg-atelu-red {
	background-color: #f3d1d1 !important;
}

.color-atelu-red {
	color: var(--atelusub) !important;
}

.common-ttl .title-en.color-atelu-red:before {
	background-color: var(--atelusub) !important;
}

.ttl-discription {
	font-size: 18px;
	line-height: 1.6;
	margin-top: 20px;
}

.about-span {
	font-size: 12px;
}

.about-img {
	border-radius: 12px;
	overflow: hidden;
}

.cms-about-item-ttl span:first-child {
	background-color: transparent;
	border-radius: 0;
	color: var(--atelusub);
	display: inline;
	font-size: 16px;
	/* 	padding: 8px; */
	padding: 0;
	font-weight: 600;
	line-height: 1.6 !important;
}

.cms-about-item-ttl span:last-child {
	display: inline;
	margin-top: 0px;
}

@media (max-width: 1400px) {

	.cms-about-item-ttl span:first-child {
		font-size: 14px;
	}

}

.about-item-span {
	font-size: 10px;
	margin-top: 5px;
	line-height: 1;
}

.about-notice {
	display: inline;
	color: var(--atelu);
	font-weight: 600;
}

.cms-about-item.about-atelu {
	background-color: #f1f3f3;
	border-radius: 8px;
	color: var(--black);
	display: flex;
	flex-direction: column;
	/* 	padding: 24px; */
	padding: 20px 10px;
	text-align: center;
	width: 23%;
}

.ptb-60 {
	padding: 60px 0;
}

#cms-function-area .inner-wrapper.about-atelu {
	width: 100%;
	max-width: 100%;
}

.function-column {
	align-items: stretch;
	display: flex;
	gap: 40px;
	justify-content: space-between;
	margin-top: 40px;
	align-content: flex-start;

}

.function-column.--reverse {
	flex-direction: row-reverse;
}

.function-img-wrap {
	position: relative;
	width: 50%;
	height: auto;
}

.function-img-wrap img {
	padding: 30px;
	background-color: var(--atelu-low);
	border-radius: 8px;
}

.function-text-wrap {
	position: relative;
	width: 50%;
	height: auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	align-items: flex-start;
}

.function-metabox {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-end;
	align-items: flex-start;
}

.function-title-tag {
	font-family: "din-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	background-color: var(--atelu-low);
	color: var(--atelu);
	width: auto;
	display: inline-block;
	padding: 5px;
}

.function-title {
	font-size: 32px;
	font-weight: 600;
	margin-top: 10px;
	text-align: left;
	width: 100%;
	color: var(--atelusub);
	line-height: 1.3;
}

.function-text {
	font-size: 16px;
	font-weight: 400;
	margin-top: 20px;
	text-align: left;
	width: 100%;
	color: var(--atelusub);
	line-height: 1.6;
}

.din-font {
	font-family: "din-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.function-last-block {
	padding-top: 60px;
}

.cms-about-item.about-atelu.function-last {
	background-color: var(--white);
	border: 2px solid var(--atelu-low);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
}

.widget-wrap {
	background-color: #f1f3f3;
	border-radius: 13px;
	display: flex;
	flex-direction: column;
	padding: 0 40px;
	/*     padding: 40px; */
	text-align: center;
	width: 100%;
	margin-top: 60px;
	margin-bottom: 60px;
}

.bl_widget_items {
	margin-top: 0 !important;
}

.function-column.column-center {
	align-items: center;
	display: flex;
	justify-content: flex-start;
	margin-top: 60px;
	align-content: center;
	flex-direction: column;
	width: 100%;
}

.function-metabox.column-center {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
}

.text-center {
	text-align: center;
}

.function-border-wrap {
	position: relative;
	width: 50%;
	height: auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	max-width: 960px;
}

.function-border-box {
	border: 2px solid var(--atelu-low);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: space-between;
	align-items: center;
	border-radius: 13px;
	padding: 40px;
	gap: 5%;
}

.function-border-img-wrap {
	width: 25%;
}

.function-border-img {}

.function-border-text-wrap {
	width: 70%;
}

.function-border-text {
	font-size: 16px;
	font-weight: 400;
	margin-top: 0;
	text-align: left;
	width: 100%;
	color: var(--atelusub);
	line-height: 1.8;
}

.border-btn {
	padding: 15px 60px;
	line-height: 1.4;
	font-weight: 600;
	transition: .3s all ease;
}

.border-btn:hover {
	/* background-color: var(--black) !important; */
	/* color: #fff !important; */
	/* opacity: 1; */
}

.section-campaign {
	position: relative;
	width: 100%;
	height: auto;
	background-color: var(--atelu-low);
	/* display: flex; */
	/* flex-direction: column; */
	/* flex-wrap: wrap; */
	/* align-content: center; */
	/* justify-content: flex-start; */
	/* align-items: center; */
	margin: 0;
	padding-top: 60px;
}

.section-campaign .common-inner {
	padding-bottom: 1px;
}

.section-campaign .fv-sns-column {
	margin: 60px auto;
}

.campaign-box-wrap {
	background-color: #fff;
	border-radius: 13px;
	display: flex;
	flex-direction: column;
	padding: 40px;
	text-align: center;
	width: 100%;
	margin-top: 60px;
	margin-bottom: 60px;
}

.campaign-box-title {
	font-size: 24px;
	font-weight: 600;
	margin-top: 10px;
	text-align: center;
	width: 100%;
	color: var(--atelusub);
	line-height: 1.3;
	width: 100%;
}

.campaign-box-subtitle {
	font-size: 20px;
	font-weight: 600;
	margin-top: 60px;
	text-align: center;
	width: 100%;
	color: var(--atelusub);
	line-height: 1.3;
	width: 100%;
}

.campaign-box-text {
	font-size: 16px;
	font-weight: 400;
	margin-top: 10px;
	text-align: center;
	width: 100%;
	color: var(--atelusub);
	line-height: 1.3;
	max-width: 90%;
	margin: 40px auto 0;
}

.campaign-box-img-wrap {
	position: relative;
	width: 100%;
	height: auto;
	margin: 40px auto 0;
	text-align: center;
}

.campaign-box-img {
	width: 100%;
	height: auto;
}

.campaign-box-link {
	margin: 60px auto 0;
	align-items: center;
	background-color: var(--atelu-orange);
	border: 2px solid var(--atelu-orange);
	border-radius: 8px;
	color: var(--white);
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 12px;
	justify-content: space-between;
	padding: 14px 30px;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	width: 360px;
	max-width: 100%;
	position: relative;
	min-height: 60px;
}

.campaign-box-link:hover {
	background-color: var(--white);
	border: 2px solid var(--atelu-orange);
	color: var(--atelu-orange);
	opacity: 1;
}

.campaign-box-link .arrow {
	position: absolute;
	right: 20px;
}

.campaign-column-wrap {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	margin: 40px auto 0;
	gap: 20px;
}

.campaign-column-4-wrap {
	position: relative;
	width: calc(25% - 20px);
	height: auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
}

.campaign-4 {
	background-color: #f1f3f3;
	border-radius: 8px;
	color: var(--black);
	display: flex;
	flex-direction: column;
	padding: 24px;
	text-align: center;
	width: 100%;
}

.campaign-4-title {
	color: var(--atelusub);
	font-size: 16px;
	padding: 8px;
	font-weight: 600;
	text-align: center;
}

.campaign-4-img-wrap {
	position: relative;
	width: 50%;
	max-width: 80%;
	min-width: 120px;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin: 20px auto 0;
}

.campaign-4-img {
	width: 100%;
	height: auto;
}

.campaign-4-text {
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	margin-top: 16px;
	line-height: 1.6;
}

.img-width-60 {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.campaign-box-catch {
	font-size: 20px;
	font-weight: 600;
	margin: 60px auto 0;
	text-align: center;
	width: auto;
	color: var(--atelusub);
	line-height: 1.3;
	width: auto;
	border-bottom: 2px solid #c84e75;
	padding-bottom: 15px;
}

.campaign-autou-wrap {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	margin: 40px auto 0;
	border: 2px solid var(--atelu-low);
	border-radius: 13px;
	padding: 40px;
	text-align: center;
}

.campaign-autou-title {
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	width: 100%;
	color: var(--atelusub);
	line-height: 1.3;
	width: 100%;
}

.campaign-autou-box {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: space-evenly;
	margin: 40px auto 0;
	align-items: flex-start;
	align-items: center;
}

.campaign-autou-column01 {
	position: relative;
	/*   width: 40%; */
	width: 30%;
	height: auto;
}

.campaign-autou-p {
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	line-height: 1.6;
}

.campaign-autou-img-wrap {
	position: relative;
	width: 100%;
	max-width: 240px;
	height: auto;
	margin: 20px auto 0;
}

.campaign-autou-img {}

.campaign-autou-column02 {
	position: relative;
	/*   width: 40%; */
	width: 65%;
	height: auto;
}

.campaign-autou-desc {
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	line-height: 1.6;
}

.campaign-autou-ul {
	background-color: #f1f3f3;
	margin-top: 20px;
	padding: 20px;
	border-radius: 13px;
	text-align: left;
}

.campaign-autou-li {
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	line-height: 1.6;
}

.campaign-box-link.autou-link {
	background-color: var(--white);
	border: 2px solid var(--black);
	color: var(--black);
}

.campaign-box-link.autou-link:hover {
	background-color: var(--black);
	border: 2px solid var(--black);
	color: var(--white);
	opacity: 1;
}

.common-inner.ptb-60 {
	padding: 60px 80px;
}

.section-campaign.tiktok {
	background-color: #f1f3f3;
	padding-top: 1px;
}

.section-campaign.option {
	background-color: #fff;
	padding-top: 0;
}

.option-column-wrap {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	margin: 40px auto 60px;
	gap: 20px;
}

.option-box {
	position: relative;
	width: calc(25% - 20px);
	height: auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	border-radius: 13px;
	overflow: hidden;
}

.option-title {
	font-size: 13px;
	font-weight: 600;
	background-color: var(--atelu-low);
	color: var(--atelu);
	width: 100%;
	padding: 5px;
	padding: 16px 5px;
}

.option-img-wrap {
	background-color: #f1f3f3;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.option-img {
	position: relative;
	width: 100%;
	max-width: 70px;
	height: auto;
}

.campaign-box-img.flow-img {
	/* 	width: 80%; */
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

.section-campaign.support {
	background-color: #f1f3f3;
	padding-top: 0;
}

.section-campaign.support .campaign-box-wrap {
	background-color: transparent;
}

.campaign-box-img-wrap.support {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	flex-direction: row;
	width: 100%;
	margin: 0 auto;
}

.campaign-box-img-wrap.support.--atelu {
	justify-content: center;
}

.campaign-box-img.sup01 {
	width: 30%;
}

.campaign-box-img.sup02 {
	width: 63%;
}

.campaign-box-text-st {
	font-size: 18px;
	font-weight: 600;
	;
}

.support-column-wrap {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	margin: 40px auto 60px;
	gap: 20px;
}

.support-box {
	position: relative;
	background-color: #fff;
	;
	width: calc(20% - 20px);
	height: auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	border-radius: 13px;
	overflow: hidden;
	padding: 40px 10px;
}

.support-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--black);
	width: 100%;
}

.support-img-wrap {
	background-color: #fff;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
	padding: 30px 0 0;
}

.support-img {
	position: relative;
	width: 100%;
	max-width: 60px;
	height: auto;
}

.common-btn.single-btn.bg-atelu {
	color: #fff;
}

.product-cta-area a:last-child {
	border: 2px solid var(--atelu);
	color: var(--atelu);
}


.footer-section-list-item {
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: .03rem;
}

@media (max-width: 1600px) {
	.fv-sns-title {
		width: 100%;
	}
}

/* 20251118修正・追加 */

/* ==================================
   ★ 修正・統合後のモバイル設定
================================== */
@media (max-width: 768px) {
	#comnico-page-cms .comnico-top-header .menu-logo {
		width: 80px;
	}

	/* #comnico-page-cms .page-fv-inner {
		padding: 14vw 20px 0 !important;
	} */

	#comnico-page-cms .h1-head {
		padding-top: 45px;
		max-width: 100px;
	}

	.kv-atelu-desc {
		font-size: 15px;
		font-weight: 600;
		padding: 10px 30px;
		width: 100%;
	}

	/* ★ product-form-area の指定が2回あったため、1回に統合 */
	.product-form-area {
		bottom: 0;
		width: 48%; /* 30% と 48% があったため、広い方を採用 */
	}

	/* ★★★ モバイルの2カラム設定 ★★★ */
	.fv-sns-column {
		width: 90%;  /* 幅を90%に */
		gap: 16px;   /* 隙間を16pxに */
		margin-top: 20px;
		justify-content: space-between;
	}

	.fv-sns-grid-link-wrapper {
		width: calc(50% - 8px); /* 2カラム用の幅 (gap 16px / 2) */
	}

	.fv-sns-grid {
		/* width: calc(50% - 10px); ★古い指定を削除 */
		padding: 20px 10px;
	}
	
	/* 3. モバイルでのタイトルの折り返しを修正 */
	.fv-sns-title {
		font-size: 12px;
		font-weight: 600;
		word-break: normal;
		overflow-wrap: break-word;
	}

	/* 4. モバイルでのテキストの「...」(切り捨て)を解除 */
	.fv-sns-txt {
		display: block;
		overflow: visible;
		-webkit-line-clamp: unset;
		min-height: auto;
		
		word-break: normal;
		overflow-wrap: break-word;
	}

	.fv-sns-icon {
		padding-right: 6px;
		width: 25px;
	}

	.form-container p {
		font-size: 13px;
		font-weight: 600;
	}

	.toggle-form-btn {
		background-color: var(--black);
		color: var(--white);
		display: block;
		margin-top: 8px;
		padding: 5px;
		width: 100%;
		font-size: 12px;
	}

	.form-container {
		padding: 10px 10px;
		text-align: center;
	}

	#comnico-page-cms .page-fv-area {
		padding-bottom: 90px;
	}

	.achievements-box {
		width: 100%;
		padding: 0;
	}

	#cms-function-area .inner-wrapper.about-atelu {
		display: flex;
		gap: 40px;
		justify-content: flex-start;
		margin-top: 40px;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: space-between;
		align-items: center;
	}

/* 20251118追記 */

	#cms-function-area .inner-wrapper-01.about-atelu {
		display: flex;
		gap: 40px;
		justify-content: center; /* ← この値を "center" に変更 */
		margin-top: 40px;
		width: 100%;
	}

/* 20251118追記 */

	.cms-about-item,
	.cms-reason-item {
		width: 100% !important;
	}

	.function-column.--reverse {
		flex-direction: row;
	}

	.function-img-wrap {
		width: 100%;
	}

	.function-column {
		align-items: flex-start;
		display: flex;
		gap: 30px;
		justify-content: flex-start;
		margin-top: 30px;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.function-text-wrap {
		width: 100%;
	}

	function-title {
		font-size: 24px;
	}

	.function-border-box {
		flex-direction: column;
		padding: 20px;
		gap: 30px;
	}

	.function-border-img-wrap {
		width: 100%;
	}

	.function-border-text-wrap {
		width: 100%;
	}

	.campaign-box-text {
		font-size: 16px;
		margin-top: 10px;
		text-align: left;
		width: 100%;
		line-height: 1.6;
		max-width: 100%;
		margin: 20px 0;
	}

	.campaign-box-wrap {
		padding: 20px;
	}

	.campaign-column-4-wrap {
		width: 100%;
		margin-bottom: 20px;
	}

	.campaign-autou-wrap {
		padding: 20px;
	}

	.campaign-autou-box {
		gap: 20px;
		flex-direction: column;
	}

	.campaign-autou-column01,
	.campaign-autou-column02 {
		width: 100%;
	}

	.campaign-box-link {
		margin: 30px auto 0;
		padding: 10px;
		width: 100%;
	}

	.campaign-autou-wrap .campaign-box-link .arrow {
		right: 8px;
	}

	.option-box {
		position: relative;
		width: calc(50% - 10px);
	}

	.option-column-wrap {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		margin: 20px auto 20px;
		gap: 20px;
	}

	.common-inner.ptb-60 {
		padding: 40px 20px;
	}

	.common-ttl {
		margin-top: 20px;
	}

	.campaign-box-img.flow-img {
		width: 100%;
	}

	.campaign-box-wrap {
		padding: 20px;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 40px;
	}

	.campaign-box-img.sup01 {
		width: 47%;
	}

	.campaign-box-img.sup02 {
		width: 100%;
	}

	.support-box {
		padding: 20px 10px;
		width: 100%;
	}

	#comnico-page-cms .page-product-kv-top {
		max-width: 90%;
	}

	.fv-title h1 {
		width: 100%;
	}

	.page-fv-title {
		gap: 20px;
	}

	.section-achievements {
		padding: 40px 0;
	}

	.partner-slider-container {
		padding-bottom: 40px;
	}

	.partner-logo {
		flex-basis: var(--logo-width, 10%);
		padding: clamp(10px, 0vw, 20px) 0;
	}

	#atelu-campaign-support .campaign-box-wrap {
		padding: 0;
	}

}


#atelu-campaign-support .inner-wrapper {
	/* display: grid; */
	/*   grid-template-columns: repeat(3, 1fr); */
	/*   margin-bottom: 50px; */
	/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
	/* max-width: 70%; */
	margin: 40px auto 50px;


	/* max-width: 100%; */
	/* grid-template-columns: repeat(4, 1fr); */
}



#atelu-campaign-support .cms-support-item-sub {
	aspect-ratio: 1 / 1;
	background-color: var(--atelu);
	border-radius: 50%;
}

/* @media (max-width: 1200px) {
	#atelu-campaign-support .inner-wrapper {
		max-width: 80%;
	}
} */

/* @media (max-width: 768px) {
	#atelu-campaign-support .inner-wrapper {
		max-width: 100%;
	}
} */

@media (max-width: 430px) {

	/* #atelu-campaign-support .inner-wrapper {
		max-width: 50%;
	} */
	.achievements-text {
		padding-left: 0;
		text-align: left;
	}
}

#comnico-qa-area .title-en {
	color: var(--atelusub) !important;
}

.product-form-area.--atelu {
	top: 15%;
	width: 22%;
}

.product-form-area.--atelu .bl_contact_content {
	box-shadow: inherit;
	background-color: #dcdfe6;
	border-radius: 0;
}

.product-form-area.--atelu .module_1603264486032151 {
	background-color: #dcdfe6;
}

.achievements-box.--atelu {
	/* margin-left: 17%; */
}

/* @media (max-width: 768px) {
	.form-container {
		border-radius: 16px 0 0 16px;
	}

	.product-form-area.--atelu {
		top: 8%;
		width: 28%;
	}

	.toggle-form-btn {
		font-size: 10px;
		margin-top: 3px;
	}

	.form-container p {
		font-size: 12px;
		line-height: 1.3;
	}

	.achievements-box {
		/* padding: 0 20px; */
/*		width: 100%;
		max-width: 100%;
		/* margin-left: auto !important; */
	}

/*	#comnico-fv-area {
		padding-bottom: 40px;
	}

	.inner-intro {
		margin-top: 40px;
	}

	.ttl-discription {
		padding: 0 20px;
	}

	.widget-wrap {
		padding: 0;
	}

	.section-campaign .fv-sns-column {
		margin: 40px auto;
		/* padding: 0 20px; */
/*		padding: 0;
	}

	.option-title {
		padding: 16px 10px;
		line-height: 1.4;
	}

	#comnico-page-cms #comnico-qa-area .common-inner {
		max-width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}


} */

.common-ttl .title-en {
	color: #523c44 !important;
}

.common-ttl .title-en::before {
	background-color: #523c44 !important;
}

#comnico-contact-area .common-ttl .title-en {
	color: #fff !important;
}

#comnico-contact-area .common-ttl .title-en::before {
	background-color: #fff !important;
}

#comnico-contact-area .common-ttl .title-en.color-atelu-red {
	color: #523c44 !important;
}

#comnico-contact-area .common-ttl .title-en.color-atelu-red::before {
	background-color: #523c44 !important;
}

.contact-colum-item p {
	line-height: 1.6;
}

.hs-richtext.hs-main-font-element a {
	text-decoration: underline;
	color: #0691d7;
}

#comnico-page-cms .comnico-top-header .parent-menu-item a {
	padding: 14px 8px !important;
}

/* 20241115 */
#comnico-page-cms .comnico-top-header .parent-menu-item a:hover {
	color: var(--atelu);
}

@media screen and (max-width: 768px) {
	.comnico.megamenu .menu {
		position: fixed !important;
		top: 0 !important;
	}
}

.fv-sns-link,
.campaign-box-link.autou-link {
	border: 2px solid #523c44;
}

/*.fv-sns-link:hover {
	border-color: var(--atelu);
	color: var(--atelu);
}

/* .fv-sns-link:hover, */
/* .border-btn:hover, */
.campaign-box-link.autou-link:hover {
	background-color: var(--navy);
	color: white;
	border-color: var(--navy);
}

/* .product-cta-area a:last-child:hover {
	border: 2px solid #523c44;
	background-color: #523c44 !important;
	color: var(--white);
	opacity: 1;
} */

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

	.fv-sns-column,
	.campaign-box-wrap {
		/* width: 80%; */
		margin: 20px auto;
	}
}

/* .bl_faq_answer_text {
	line-height: 1.8;
} */


/* fv */

#comnico-page-cms .page-fv-inner {
	padding: 113px 480px 0 80px;
	/* height: 920px; */
	height: auto;
	/* min-height: 900px; */
}

#comnico-page-cms .h1-head {
	padding-top: 0 !important;
}

#comnico-page-cms .page-fv-wrapper {
	align-items: center;
	padding: 0;
	/* justify-content: center; */
	/* padding: 0 500px 0 80px; */

	width: 100%;
	display: flex;
	/* grid-template-columns: 1fr 1fr; */
	/* min-height: 590px; */
	gap: 100px;
	margin: 80px 0 80px 0;
}

#comnico-page-cms .page-fv-title span {
	/* font-size: 20px; */
	/* font-weight: 500; */
}

#comnico-page-cms .page-product h1 {
	/* font-size: 48px; */
}

#comnico-page-cms .page-fv-title {
	/* max-width: 60%; */
	width: 500px;
	flex-shrink: 0;
}

#comnico-page-cms .page-product-kv-top {
	/* width: 100%; */
	width: 55%;
	/* max-width: 500px; */
	/* align-items: start; */
}

#comnico-page-cms .page-product-kv-top img {
	width: 100%;
	/* max-width: 500px; */
}

.fv-sns-column {
	/* padding-right: 440px; */
	/* padding-left: 80px; */
	width: 100%;
}

#comnico-page-cms .cta-btn {
	display: flex;
}



/* responsive */
@media (min-width: 2000px) {
	#comnico-page-cms .page-fv-inner {
		height: auto;
	}
}


@media (max-width: 1700px) {
	#comnico-page-cms .page-product-kv-top {
		/* width: 40%; */
	}

	#comnico-page-cms .page-fv-wrapper {
		/* padding: 0 440px 0 80px; */
		gap: 40px;
		/* min-height: 470px; */
		margin-bottom: 80px;
	}
}

@media (max-width: 1400px) {
	#sns-form-area.product-form-area {
		width: 350px;
	}

	/* #comnico-page-cms .page-fv-wrapper {
		padding: 0 400px 0 40px;
	} */
	#comnico-page-cms .page-fv-inner {
		padding-right: 390px;
		padding-left: 40px;
	}

	/* #comnico-page-cms .page-product-fv-news {
		padding-right: 380px;
	} */

	#comnico-page-cms .page-fv-title {
		width: 410px;
	}

	#comnico-page-cms .page-fv-title span {
		/* font-size: 16px; */
	}

	.kv-atelu-desc {
		font-size: 16px;
	}

	#comnico-page-cms.page-product h1 {
		font-size: 30px !important;
	}
}

@media (max-width: 1200px) {

	#comnico-page-cms .page-fv-title {
		width: 360px;
	}

	.kv-atelu-desc {
		font-size: 14px;
	}

}

@media (max-width: 1024px) {

	.kv-atelu-desc {
		padding: 8px 20px;
	}

	#sns-form-area.product-form-area {
		display: none;
	}

	#comnico-page-cms .page-fv-wrapper {
		margin-bottom: 40px;
		margin-top: 40px;
	}

	#comnico-page-cms .page-fv-inner {
		padding-left: 40px;
		padding-right: 40px;
		padding-top: 80px;
		height: auto;
	}
}

@media (max-width: 770px) {
	#comnico-page-cms .page-fv-inner {
		padding: 60px 20px 0 !important;
	}

}


@media (max-width: 600px) {
	.page-product .page-fv-wrapper {
		flex-direction: column;
	}
}

@media (max-width: 430px) {
	#comnico-page-cms .page-fv-inner {
		padding-right: 20px;
		padding-left: 20px;
		/* padding-top: 100px; */
	}

	#comnico-page-cms .page-fv-title {
		max-width: 100%;
		width: 100%;
	}

	#comnico-page-cms .page-product-kv-top {
		max-width: 80%;
		width: 80%;
	}

	#comnico-page-cms .page-fv-title {
		gap: 16px;
	}
}


/* fv form */

.hs_atelu_check.hs-form-field input+span {
	font-size: 10px;
}

#sns-form-area .bl_contact_content .hs_submit input,
#sns-form-area .bl_contact_content form .hs-button.primary {
	background-color: var(--atelu-orange) !important;
}

#cms-case-area .card {
	border: 1px solid var(--darkgray);
}



/* card */

.card-content.cat-a .card-tag {
	color: var(--atelu);
}

.card:hover .card-content {
	background-color: var(--atelu-light);
	color: var(--atelu);
}

#comnico-library-area .card:hover {
	background-color: var(--atelu-light);
	color: var(--atelu);
}

/* 20251118修正・追記 */
.common-btn.single-btn:hover {
	border-color: var(--atelu-orange) !important;
	color: var(--atelu-orange) !important;
}

.common-btn-old.single-btn-old:hover {
	border-color: var(--atelu) !important;
	color: var(--atelu) !important;
}
/* 20251118修正・追記 */

.bg-cms:hover {
	background-color: var(--white) !important;
	border: 2px solid var(--atelu);
	color: var(--atelu) !important;
}

.contact-colum.--atelu {
	background-color: #F25B8D !important;
}

.bl_section_intro_description p {
	margin-top: 20px !important;
	line-height: 1.6;
}

.bl_faq_question_text,
.bl_faq_answer_text {
	line-height: 1.8;
	letter-spacing: 0.1em;
}


.common-btn.single-btn {
	min-height: 60px;
}

/* 20251118修正・追記 */
.common-btn-old.single-btn-old {	
  min-height: 60px;	
}
/* 20251118修正・追記 */

/* contact */

#comnico-contact-area .company-container {
	grid-template-columns: 1fr;
}

.company-column {
	padding: 40px;
}

.company-column .common-ttl h2 {
	font-weight: 700;
}

.contact-colum.--atelu {
	/*   background-color: var(--orange); */
	/* background-color: #ca7486; */
	min-width: 100%;
}

.contact-colum.--atelu .common-btn {
	/*   color: var(--orange); */
	color: #f25b8d;
}

/* .contact-colum.--atelu .common-btn:hover {
	background-color: var(--black);
	opacity: 1;
} */

.contact-colum-item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;

}

.contact-colum-item-text {
	font-size: 20px;
	line-height: 1.6;
}

.contact-colum-item-text_heading {
	font-size: 1.5em;
	font-weight: bold;
}

.contact-colum-item-text_list {
	font-weight: bold;
	margin-top: 20px;
	list-style: disc;
	padding-left: 1.5em;
}

.contact-colum-item-text_list li {
	font-weight: bold;
}

.contact-colum-item-text_para {
	font-weight: bold;
	margin-top: 20px;
}

@media (max-width: 1000px) {
	.contact-colum-item-text {
		font-size: 16px;
	}
}

@media (max-width: 770px) {
	.contact-colum-item-img {
		min-height: 0;
		padding: 0;
	}

	.company-column {
		padding: 20px;
	}

	.contact-colum-item {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}


@media (min-width: 601px) and (max-width: 1024px) {
	.fv-sp-cta.above-kv {
		display: block !important;
	}

	.fv-sp-cta.below-kv {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.fv-sp-cta.above-kv {
		display: none !important;
	}

	.fv-sp-cta.below-kv {
		display: block !important;
		width: 100%;
	}
}

@media screen and (max-width: 480px) {
	.bl_faq_question_text.is_active:after {
		top: 32px;
	}
}

.page-product-fv-news .title-en {
	background-color: var(--atelu);
}

/* 20251118追記 */
/* ホバー時の親要素の透明度を強制的に無効化 */
.fv-sns-grid-link-wrapper:hover {
    opacity: 1 !important;
    filter: none !important;
}

/* ホバー時にアイコンの色を反転させる (視覚的にくっきりさせるため) */
.fv-sns-grid-link-wrapper:hover .fv-sns-icon img {
    /* アイコンを黒から白へ強制反転 */
    filter: brightness(0) invert(1) !important; 
}

/* ホバー時のアイコンの色反転を無効化し、アイコンを濃い色に保つ */
.fv-sns-grid-link-wrapper:hover .fv-sns-icon img {
    /* フィルターを無効化し、元の色（黒）を保つ */
    filter: none !important; 
    
    /* ホバー時の文字色（--atelu）に合わせてアイコンを濃い色に */
    /* アイコンの色がSVGでない場合、これで黒に戻ります */
    color: var(--black) !important;
}

/* ホバー時にアイコンの親要素の文字色を調整 */
.fv-sns-grid-link-wrapper:hover .fv-sns-icon {
    /* 親要素でcolorが変更されている場合があるため、ここでリセット */
    color: var(--black) !important;
}

/* 20251118追記 */

/* -------------------------------------
    パートナープログラム
------------------------------------- */
#comnico-page-cms.partnership .page-fv-area {
  padding: 6rem 0;
  background-color: #f9e8e8;
}

#comnico-page-cms.partnership .page-fv-inner {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6.5rem;
  width: 117rem;
  margin: 0 auto;
}

#comnico-page-cms.partnership .page-fv-content {
  width: calc(100% - 69.3rem);
}

#comnico-page-cms.partnership .page-fv-img {
  width: 62.8rem;
}

#comnico-page-cms.partnership .fv-annotation,
#comnico-page-cms.partnership #value .annotation {
  font-size: 1.2rem;
  text-align: right;
}

#comnico-page-cms.partnership .fv-sub {
  margin-bottom: 4rem;
  font-size: 2.4rem !important;
  font-weight: 500;
}

#comnico-page-cms.page-product.partnership .fv-ttl h1 {
  margin: 3.5rem 0 6rem;
  font-size: 4rem !important;
  font-weight: 600;
  line-height: 1;
}

#comnico-page-cms.partnership .ps-btn {
  width: 47.8rem;
  height: 7.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--atelu);
  border: 2px solid var(--atelu);
  border-radius: 9999px;
  font-size: 2.4rem;
  font-weight: 500;
  color: #fff;
  line-height: 1;
  text-align: center;
}

#comnico-page-cms.partnership .ps-btn:hover {
  background: var(--white);
  border: 2px solid var(--atelu);
  color: var(--atelu);
  opacity: 1;
}

#comnico-page-cms.partnership .h2-ps-cmn {
  margin-bottom: 6rem;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

#comnico-page-cms.partnership .h2-ps-cmn::after {
  content: "";
  display: block;
  width: 8rem;
  height: .5rem;
  margin: 4rem auto 0;
  background: var(--atelu);
  border-radius: 9999px;
}

#comnico-page-cms.partnership #about {
  padding: 3.2rem 0 8rem;
}

#comnico-page-cms.partnership #about .about-txt {
  font-size: 2.4rem;
  text-align: center;
}

#comnico-page-cms.partnership #merit {
  background: var(--atelu);
  color: var(--white);
}

#comnico-page-cms.partnership #merit .merit-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  width: 92rem;
  margin: 0 auto;
}

#comnico-page-cms.partnership #merit .h2-ps-cmn {
  text-align: left;
}

#comnico-page-cms.partnership #merit .h2-ps-cmn::after {
  margin: 4rem 0 0;
  background: var(--white)
}

#comnico-page-cms.partnership #merit .merit-txt {
  width: calc(100% - 44rem);
}

#comnico-page-cms.partnership #merit .merit-txt .merit-sub {
  margin-bottom: 3rem;
  font-size: 2.4rem;
  font-weight: 500;
}

#comnico-page-cms.partnership #merit .merit-txt p {
  font-size: 1.8rem;
}

#comnico-page-cms.partnership #merit .merit-img {
  width: 38rem;
}

#comnico-page-cms.partnership #value .value-wrap {
  padding: 10rem 8rem 2rem;
  border-radius: 1rem;
  box-shadow: 0px 0px 50px 0px rgba(200, 78, 117, 0.2);
  background: var(--white);
}

#comnico-page-cms.partnership #value .value-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

#comnico-page-cms.partnership #value .value-item {
  width: 33.33%;
  border-right: 1px solid #BEBEBE;
  text-align: center;
  position: relative;
}

#comnico-page-cms.partnership #value .value-item:not(:first-child) {
  padding: 4rem;
}

#comnico-page-cms.partnership #value .value-item:nth-child(3n) {
  border-right: 0;
}

#comnico-page-cms.partnership #value .value-item:nth-child(n+4) {
  border-top: 1px solid #BEBEBE;
}

#comnico-page-cms.partnership #value .value-item:nth-child(4)::after,
#comnico-page-cms.partnership #value .value-item:nth-child(6)::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: var(--white);
  position: absolute;
  z-index: 1;  
}

#comnico-page-cms.partnership #value .value-item:nth-child(4)::after {
  top: -1rem;
  right: -1rem;
}

#comnico-page-cms.partnership #value .value-item:nth-child(6)::after {
  top: -1rem;
  left: -1rem;
}

#comnico-page-cms.partnership #value .h2-ps-cmn {
  text-align: left;
  line-height: 1.5;
}

#comnico-page-cms.partnership #value .h2-ps-cmn::after {
  margin: 4rem 0 0;
}

#comnico-page-cms.partnership #value .value-item img {
  width: 9rem;
}

#comnico-page-cms.partnership #value .value-item .value-txt {
  margin-top: 3rem;
  font-size: 1.8rem;
}

#comnico-page-cms.partnership #value .value-item .value-txt span {
  font-weight: 600;
  color: var(--atelu);
}

#comnico-page-cms.partnership #recommend {
  background: var(--bs-bg-pink);
  margin-top: -37rem;
  padding: 40.2rem 0 11.2rem;
  position: relative;
  z-index: -1;  
}

#comnico-page-cms.partnership #recommend .h2-ps-cmn {
  margin-bottom: 8rem;
}

#comnico-page-cms.partnership #recommend .recommend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem;
  width: 75rem;
  margin: 2.5rem auto 0;
}

#comnico-page-cms.partnership #recommend .recommend-item {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: calc(50% - 2.5rem);
  padding: 3rem;
  background: var(--white);
  border: 1px solid var(--atelu);
  border-radius: 4px;
  position: relative;
}

#comnico-page-cms.partnership #recommend .recommend-icon {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  width: 8rem;
  height: 8rem; 
  background: var(--atelu);
  border-radius: 50%;
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  position: absolute;
  top: -2.5rem;
  left: -3rem
}

#comnico-page-cms.partnership #recommend .recommend-icon .recommend-num {
  padding-top: 0.25rem;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
}

#comnico-page-cms.partnership #recommend .recommend-item img {
  width: 26rem;
}

#comnico-page-cms.partnership #recommend .recommend-item h3 {
  margin-top: 2.5rem;
  color: var(--atelu);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

#comnico-page-cms.partnership #recommend .recommend-item .recommend-txt {
  margin-top: 2rem;
  text-align: center;
}

#comnico-page-cms.partnership #case {
  display: none;
  padding: 11.2rem 0 3.2rem;
}

#comnico-page-cms.partnership #case .card-grid {
  padding: 0;
}

#comnico-page-cms.partnership #case .card-grid .card {
  width: 100%;
}

#comnico-page-cms.partnership #support {
  padding: 8rem 0 11.2rem;
}

#comnico-page-cms.partnership #support .content-width {
  width: 113rem;
}

#comnico-page-cms.partnership #support .support-list {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}

#comnico-page-cms.partnership #support .support-item {
  width: 33.33%;
  padding: 3rem 3rem 4rem;
  background: var(--white);
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 117, .15);
}

#comnico-page-cms.partnership #support .support-item h3 {
  margin-top: 3rem;
  color: var(--atelu);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.5;
}

#comnico-page-cms.partnership #support .support-item .support-txt {
  margin-top: 2rem;
}

#comnico-page-cms.partnership #cv {
  padding: 6rem 0;
  background: var(--atelu);
}

#comnico-page-cms.partnership #cv .h2-ps-cv {
  margin-bottom: 4rem;
  color: var(--white);
  font-size: 3.2rem;
  font-weight: 600;
  text-align: center;
}

#comnico-page-cms.partnership #cv .ps-btn {
  width: 48rem;
  height: 8rem;
  margin: 0 auto;
  background: var(--white);
  border: 2px solid var(--white);
  color: var(--atelu);
  font-size: 2rem;
}

#comnico-page-cms.partnership #cv .ps-btn:hover {
  opacity: 0.7;
}

#comnico-page-cms.partnership #flow {
  padding: 11.2rem 0;
  background: var(--bs-bg-pink);
}

#comnico-page-cms.partnership #flow .flow-list {
  display: flex;
  flex-direction: column;
  gap: 6.2rem;
  width: 93.2rem;
  margin: 0 auto;
}

#comnico-page-cms.partnership #flow .flow-item {
  display: flex;
  align-items: center;
  padding: 2rem 3rem;
  border: 1px solid var(--atelu);
  border-radius: 4px;
  background: var(--white);
  position: relative;
}

#comnico-page-cms.partnership #flow .flow-item::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 2rem solid transparent;
  border-left: 2rem solid transparent;
  border-top: 2rem solid var(--atelu);
  border-bottom: 0;
  position: absolute;
  bottom: -4rem;
  left: calc(50% - 2rem);
}

#comnico-page-cms.partnership #flow .flow-item:last-child::after {
  display: none;
}

#comnico-page-cms.partnership #flow .flow-main {
  width: 34.6rem;
  border-right: 1px solid #BEBEBE;
}

#comnico-page-cms.partnership #flow .flow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.9rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 9999px;
  background: var(--atelu-low);
  font-weight: 500;
  letter-spacing: 0.1em;  
}

#comnico-page-cms.partnership #flow .flow-main h3 {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.5;
}

#comnico-page-cms.partnership #flow .flow-dsc {
  padding-left: 3rem;
  width: calc(100% - 34.6rem)
}

#comnico-page-cms.partnership #faq {
  padding: 11.2rem 0 3.2rem;
}

#comnico-page-cms.partnership #faq .module_176041627921547 {
  padding: 0;
}

#comnico-page-cms.partnership #faq .bl_faq_content {
  margin: 0;
}

#comnico-page-cms.partnership #faq .bl_faq_answer_text,
#comnico-page-cms.partnership #faq .bl_faq_question_text {
  font-size: 1.6rem;
}

#comnico-page-cms.partnership #contact .hp_pageCenter {
  width: 72rem;
}

#comnico-page-cms.partnership #contact .bl_contact_content {
  box-shadow: none;
  padding: 0;
}

#comnico-page-cms.partnership #contact .bl_contact_content label,
#comnico-page-cms.partnership #contact .bl_contact_content input {
  font-size: 1.6rem
}

#comnico-page-cms.partnership #contact .bl_contact_content label span {
  font-weight: 600;
}

#comnico-page-cms.partnership #contact .bl_contact_content .hs-form-required:before {
  font-size: 1.2rem;
}

#comnico-page-cms.partnership #contact .hs_atelu_check.hs-form-field input+span {
  font-size: 1.6rem;
  font-weight: var(--bs-body-font-weight);
}

#comnico-page-cms.partnership #contact .bl_contact_content form .hs-button.large {
  font-size: 2rem;
  width: 48rem;    
  height: 8rem;
  border-radius: 9999px;
}

@media (min-width: 1441px) {
  #comnico-page-cms.partnership .page-fv-inner {
    gap: 3rem;
  }
  
  #comnico-page-cms.partnership .page-fv-content {
      width: calc(100% - 56.5rem);
  }
  
  #comnico-page-cms.partnership .page-fv-img {
    width: 50rem;
  }
}

@media (max-width: 1024px) {
  #comnico-page-cms.partnership #comnico-fv-area {
    padding: 80px 0 8rem;
  }
}

@media (max-width: 770px) {
  #comnico-page-cms.partnership #comnico-fv-area {
    padding: 70px 0 8rem;
  }
  
  #comnico-page-cms.partnership .page-fv-inner {
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  #comnico-page-cms.partnership #comnico-fv-area {
    padding: 70px 0 0;
  }
  
  #comnico-page-cms.partnership .page-fv-area {
    padding: 4rem 0 2rem;
  }
  
  #comnico-page-cms.partnership .page-fv-inner {
    flex-wrap: wrap;
    gap: 2.5rem;
    width: 100%;
  }
  
  #comnico-page-cms.partnership .page-fv-content {
    width: 90%;
  }
  
  #comnico-page-cms.partnership .page-fv-img {
    width: 32rem;
  }
  
  #comnico-page-cms.partnership .fv-annotation,
  #comnico-page-cms.partnership #value .annotation {
    font-size: 1rem;
  }
  
  #comnico-page-cms.partnership .fv-sub {
    margin: 3rem 0;
    font-size: 1.8rem !important;
  }
  
  #comnico-page-cms.page-product.partnership .fv-ttl h1 {
    margin: 3rem 0 0;
    font-size: 2.8rem !important;
  }
  
  #comnico-page-cms.partnership .ps-btn-area {
    margin-top: 4rem;
  }
  
  #comnico-page-cms.partnership .ps-btn {
    width: 28rem;
    height: 7rem;
    margin: 0 auto;
    font-size: 1.6rem;
    line-height: 1.5;
  }
  
  #comnico-page-cms.partnership #about {
    padding: 4rem 0;
  }
  
  #comnico-page-cms.partnership .h2-ps-cmn {
    margin-bottom: 4rem;
    font-size: 2.4rem;
    line-height: 1.25;
  }
  
  #comnico-page-cms.partnership .h2-ps-cmn:after {
    width: 4rem;
    height: .3rem;
    margin: 2.5rem auto 0;
  }
  
  #comnico-page-cms.partnership #about .about-txt {
    font-size: 1.4rem;
    text-align: left;
  }
  
  #comnico-page-cms.partnership #merit .merit-wrap {
    flex-wrap: wrap;
    gap: 3rem;
    width: 100%;
  }
  
  #comnico-page-cms.partnership #merit .merit-txt {
    width: 100%;
  }
  
  #comnico-page-cms.partnership #merit .merit-img {
    width: 28rem;
  }
  
  #comnico-page-cms.partnership #merit .h2-ps-cmn,
  #comnico-page-cms.partnership #value .h2-ps-cmn {
    text-align: center;
  }
  
  #comnico-page-cms.partnership #merit .h2-ps-cmn:after,
  #comnico-page-cms.partnership #value .h2-ps-cmn:after {
    margin: 2.5rem auto 0;
  }
  
  #comnico-page-cms.partnership #merit .merit-txt .merit-sub {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
  }
  
  #comnico-page-cms.partnership #merit .merit-txt p {
    font-size: 1.4rem;
  }
  
  #comnico-page-cms.partnership #value .value-wrap {
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  
  #comnico-page-cms.partnership #value .value-list {
    margin-bottom: 1rem;
  }  
  
  #comnico-page-cms.partnership #value .value-item {
    letter-spacing: -0.01em;
  }  
  
  #comnico-page-cms.partnership #value .value-item:first-child {
    width: 100%;
    border-right: 0;
  }
  
  #comnico-page-cms.partnership #value .value-item:not(:first-child) {
    width: 50%;
    padding: 2rem 1rem;
  }  
    
  #comnico-page-cms.partnership #value .value-item:nth-child(5) {
    border-right: 0;
    border-bottom: 1px solid #bebebe;
  }
    
  #comnico-page-cms.partnership #value .value-item:nth-child(6)::after {
    right: -1rem;
    left: unset;
  }
  
  #comnico-page-cms.partnership #value .value-item:last-child {
    border-right: 1px solid #bebebe;
  }  
  
  #comnico-page-cms.partnership #value .value-item .value-txt {
    font-size: 1.4rem;
    margin-top: 1.5rem;
  }
  
  #comnico-page-cms.partnership #value .value-item img {
    width: 4.2rem;
  }
  
  #comnico-page-cms.partnership #recommend {
    margin-top: 0;
    padding: 6rem 0;
    position: relative;
    z-index: unset;
  }
  
  #comnico-page-cms.partnership #recommend .h2-ps-cmn {
    margin-bottom: 4rem;
  }
  
  #comnico-page-cms.partnership #recommend .recommend-list {
    gap: 4rem;
    width: 26rem;
  }
  
  #comnico-page-cms.partnership #recommend .recommend-item {
    width: 100%;
    padding: 3rem 4rem;
  }
  
  #comnico-page-cms.partnership #recommend .recommend-icon {
    width: 6rem;
    height: 6rem;
    font-size: 1.2rem;
    letter-spacing: .1em;
  }
  
  #comnico-page-cms.partnership #recommend .recommend-icon .recommend-num {
    font-size: 2.8rem;
  }
  
  #comnico-page-cms.partnership #recommend .recommend-item img {
    width: 100%;
  }
  
  #comnico-page-cms.partnership #recommend .recommend-item h3 {
    margin-top: 2rem;
    font-size: 1.8rem;
  }
  
  #comnico-page-cms.partnership #recommend .recommend-item .recommend-txt {
    margin-top: 1.5rem;
  }
  
  #comnico-page-cms.partnership #case {
    padding: 6rem 0;
  }
  
  #comnico-page-cms.partnership #support {
    padding: 0 0 6rem;
  }  
  
  #comnico-page-cms.partnership #support .content-width {
    width: 90%;
  }
  
  #comnico-page-cms.partnership #support .support-list {
    flex-wrap: wrap;
    gap: 3rem;
    width: 28rem;
    margin: 0 auto;
  }
  
  #comnico-page-cms.partnership #support .support-item {
    width: 100%;
    padding: 3rem 2rem;
  }
  
  #comnico-page-cms.partnership #support .support-item h3 {
    font-size: 1.8rem;
  }
  
  #comnico-page-cms.partnership #support .support-item .support-txt {
    margin-top: 1.5rem;
  }

  #comnico-page-cms.partnership #cv {
    padding: 4rem 0;
  }
  
  #comnico-page-cms.partnership #cv .h2-ps-cv {
    margin-bottom: 3rem;
    font-size: 2.4rem;
  }
  
  #comnico-page-cms.partnership #cv .ps-btn-area {
    margin-top: 0;
  }
  
  #comnico-page-cms.partnership #cv .ps-btn {
    width: 28rem;
    height: 7rem;
    font-size: 1.6rem;
  }
  
  #comnico-page-cms.partnership #flow {
    padding: 6rem 0;
  }
  
  #comnico-page-cms.partnership #flow .flow-list {
    gap: 3.5rem;
    width: 100%;
  }
  
  #comnico-page-cms.partnership #flow .flow-item {
    flex-wrap: wrap;
    padding: 2rem;
  }
  
  #comnico-page-cms.partnership #flow .flow-item::after {
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid transparent;
    border-top: 1.5rem solid var(--atelu);
    bottom: -2.5rem;
    left: calc(50% - 1.5rem);
  }  
  
  #comnico-page-cms.partnership #flow .flow-main {
    width: 100%;
    padding-bottom: 2rem;
    margin-bottom: 1rem;
    border-right: 0;
    border-bottom: 1px solid #bebebe;
  }
  
  #comnico-page-cms.partnership #flow .flow-dsc {
    width: 100%;
    padding-left: 0;
    text-align: left;
  }
  
  #comnico-page-cms.partnership #flow .flow-icon {
    width: 12rem;
    height: 2.4rem;
    margin: 0 auto 1rem;
    font-size: 1.2rem;
  }
  
  #comnico-page-cms.partnership #flow .flow-main h3 {
    font-size: 1.8rem;
    text-align: center;
  }
  
  #comnico-page-cms.partnership #faq {
    padding: 6rem 0;
  }
  
  #comnico-page-cms.partnership #faq .bl_faq_answer_text,
  #comnico-page-cms.partnership #faq .bl_faq_question_text {
    font-size: 1.4rem;
  }
  
  #comnico-page-cms.partnership #contact {
    padding: 0 0 10rem;
  }
  
  #comnico-page-cms.partnership #contact .hp_pageCenter {
    width: 100%;
  }
  
  #comnico-page-cms.partnership #contact .bl_contact_content label,
  #comnico-page-cms.partnership #contact .bl_contact_content input {
    font-size: 1.4rem
  }
  
  #comnico-page-cms.partnership #contact .bl_contact_content .hs-form-required:before {
    font-size: 1rem;
  }
  
  #comnico-page-cms.partnership #contact .hs_atelu_check.hs-form-field input+span {
    font-size: 1.4rem;
  }
  
  #comnico-page-cms.partnership #contact .bl_contact_content form .hs-button.large {
    font-size: 1.6rem;
    width: 28rem;    
    height: 7rem;
  }  
  
}