@charset "utf-8";
@-ms-viewport {
	width: device-width;
}
/*---------------------------------------
チェック
---------------------------------------*/
/*
*{
	border:1px solid #FF0000;
}
*/
/*---------------------------------------
clearfix
---------------------------------------*/
.clearfix {
	*zoom: 1;
}
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
	line-height: 0;
}
.clearfix:after {
	clear: both;
}

/*---------------------------------------
全体
---------------------------------------*/
html {
  overflow-y: scroll;
}
body {
	margin: 0;
	padding: 0;
	font-family: YakuHanJP, 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-feature-settings: "palt";
	font-weight: 400;
	background: #ffffff;
	position: relative;
	width: 100%;
	/*
	overflow-x: hidden;
	overflow-y: auto;
	*/
}
main {
	width: 100%;
	box-sizing: border-box;
	scrollbar-width: none;       /* Firefox */
	-ms-overflow-style: none;    /* IE, Edge */
}
main::-webkit-scrollbar {
	display: none;               /* Chrome, Safari */
}
.main_inner {
	width: 95%;
	margin: 0 auto;
	padding: 1em 0;
}
.common_wrap {
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
	background: url(../img/pat/pat_dotted_01.png) repeat center / 100%,linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(51, 45, 31, 1) 50%, rgba(0, 0, 0, 1) 100%);
	
}
textarea:focus {
	outline: none;
}

a.a_link{
	text-decoration: underline;
}

/*---------------------------------------
TOPへ戻る
---------------------------------------*/ 
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
    z-index: 1;
}

#page-top a {
    background: var(--blue);
    text-decoration: none;
    color: #fff;
    width: 40px;
	height:40px;
    padding: 10px 0 14px 0;
    text-align: center;
    display: block;
    font-weight: 900;
	border-radius: 50%;
}

/*---------------------------------------
文字定義
---------------------------------------*/ 
:root {
	--navy: #253650;
	--orange: #ee5c28;
	--blue:#42b1d3;
	--lightglay:#f7f8fb;
	--green:#00b900;
}

:root {
  --font_serif: 'Noto Serif JP', serif;
  --font_poppins: 'Poppins', sans-serif;
  --font_sans: YakuHanJP, 'Noto Sans JP', '游ゴシック体', YuGothic,
               '游ゴシック', 'Yu Gothic', 'メイリオ',
               'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  --font_hand: 'Nothing You Could Do', cursive;
}

span.bold{
	font-weight: bold;
}
span.orange{
	color: var(--orange);
}
span.blue{
	color: var(--blue);
}
span.green{
	color: var(--green);
}
span.under_line{
	text-decoration: underline;
}

/*---------------------------------------
img定義
---------------------------------------*/
a img {
	display: inline;
}

/*---------------------------------------
文字の装飾
---------------------------------------*/
.glow_text_01 {
	text-shadow: 0 0 5px #570c7a, 0 0 10px #570c7a, 0 0 15px #570c7a, 0 0 20px #570c7a;
}
.glow_text_02 {
	text-shadow: 0 0 5px #b53909, 0 0 10px #b53909, 0 0 15px #b53909, 0 0 20px #b53909;
}
.red {
	color: #cb181d;
}
.yellow {
	color: #ffd800;
}
.navy {
	color: #210c5f;
}
.bold {
	font-weight: bold;
}
.gold {
	color: #deb22c;
}
/*グラデーション文字（紫系）*/
.grad_text_purple {
	font-weight: bold;
	background: linear-gradient(90deg, #d14ebf, #b26fdb);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/*グラデーション文字（ピンク系）*/
.grad_text_pink {
	font-weight: bold;
	background: linear-gradient(90deg, #ff187f, #b652d4);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.text_center{
	text-align: center;
}

/*---------------------------------------
hover
---------------------------------------*/
a img:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/*---------------------------------------
キービジュアル
---------------------------------------*/
.kv_area {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.kv_area .pc img{
	width: 100%;
}
.kv_area .sp{
	background: #DCF2FF;
	background: linear-gradient(0deg,rgba(220, 242, 255, 1) 0%, rgba(240, 248, 255, 1) 100%);
	padding: 1em 0;
	text-align: center;
}
.kv_area .sp h1 img{
	width: 100%;
}
.kv_area .sp ul{
	display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5em;
    width: 95%;
    margin: 0.5em auto 1.5em auto;
}
.kv_area .sp ul li{
	width:calc(100% / 3);
}
.kv_area .sp ul li img{
	width: 100%;
}
.kv_area .sp a img{
	width: 80%;
}

/*---------------------------------------
共通箇所
---------------------------------------*/
/*コンテンツ幅*/
.content_wrapper{
	max-width:780px;
	margin: 0 auto;
}

/*セクションタイトル*/
h3.common_sec_title{
	padding: 1em 0;
	box-shadow:
    0 -6px 12px rgba(0,0,0,0.06),  /* 上 */
    0  6px 12px rgba(0,0,0,0.08);  /* 下 */
	margin-bottom: 1.5em;
}
h3.common_sec_title img{
	width: 70%;
	margin: 0 auto;
}
h3.common_sec_title p{
	text-align: center;
	color: #ffffff;
}
h3.common_sec_title.blue{
	background:var(--blue);
}
h3.common_sec_title.navy{
	background:var(--navy);
}

@media (max-width: 780px) {
	h3.common_sec_title{
	padding: 0.7em 0;
	margin-bottom: 1em;
}
	h3.common_sec_title img{
	width: 100%;
}
}

/*レスポンシブ*/
@media (max-width: 780px) {
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
}
@media (min-width: 780px) {
	.pc{
		display: block;
	}
	.sp{
		display: none;
	}
}


/*---------------------------------------
登録エリア
---------------------------------------*/
.entry{
	text-align: center;
}
.entry.pc{
	padding: 3em 0;
}
.entry.pc a img{
	width: 60%;
}

/*---------------------------------------
 出現アニメーション
---------------------------------------*/
.reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity .7s ease,
    transform .7s ease;
  transition-delay: var(--animate-delay, 0ms); /* JSの data-delay と連携 */
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.reveal.is-inview {
  opacity: 1;
  transform: none;
}

/* 動きが苦手な環境に配慮 */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/*---------------------------------------
各セクション
---------------------------------------*/
/*悩み＆解決*/
.solution{
	background: var(--navy);
	padding: 4em 0;
}
.solution img{
	width: 70%;
	margin: 0 auto;
}

@media (max-width: 780px) {
	.solution{
	padding: 3em 0;
}
.solution img{
	width: 90%;
}
}

/*ファクタリングとは？*/
.about{
	background: #DCF2FF;
	background: linear-gradient(0deg,rgba(220, 242, 255, 1) 0%, rgba(240, 248, 255, 1) 100%);
	padding-bottom: 4em;
}
.about h2 img{
	width: 75%;
	margin: 0 auto;
}
.about_detail{
	width: 80%;
	margin: 1.5em auto 2em auto;
	padding: 2em;
	background: #ffffff;
	border-radius: 10px;
	box-shadow:0 1px 3px rgba(0, 0, 0, 0.08),0 4px 14px rgba(0, 0, 0, 0.06);
}
.about_detail img{
	width: 100%;
	margin: 2em auto;
}
.about_detail p{
	width: 100%;
	line-height: 2em;
	font-size: 1.1em;
	color: var(--navy);
}

@media (max-width: 780px) {
	.about{
	padding-bottom: 2em;
}
	.about h2 img{
	width: 100%;
}
	.about_detail{
	width: 90%;
	margin: 1em auto 2em auto;
	padding: 1em 1em 2em 1em;
}
	.about_detail p{
	width: 100%;
	line-height: 1.8em;
	font-size: 1em;
}
}

/*ファクタリングの種類*/
.type{
	background: var(--lightglay);
}
.type_detail{
	padding: 2em;
}
.type_detail ul{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap:1em;
	width: 100%;
}
.type_detail ul li img{
	width: 100%;
}
.type_detail img.reason{
	width: 90%;
	margin: 2em auto;
}

@media (max-width: 780px) {
	.type_detail{
	padding: 2em 0.5em;
}
	.type_detail ul{
	display: block;
	width: 100%;
}
	.type_detail ul li img{
		width: 80%;
		margin: 0 auto 3em auto;
	}
	.type_detail img.reason{
	width: 100%;
	margin: 2em auto;
}
}

/*ファクタリングの3つのポイント*/
.point{
	background: #DCF2FF;
	background: url(../img/content/building_bg.png) no-repeat center bottom / 100%,linear-gradient(0deg,rgba(220, 242, 255, 1) 0%, rgba(240, 248, 255, 1) 100%);
}
.point_detail{
	padding: 2em 1em 3em 1em;
}
.point_detail p{
	width: 100%;
	line-height: 2em;
	font-size: 1.1em;
	color: var(--navy);
	text-align: center;
}
.point_detail ul{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap:0.5em;
	width: 100%;
	margin: 2em auto 0 auto;
}
.point_detail ul li img{
	width: 100%;
}

@media (max-width: 780px) {
	.point_detail p{
	line-height: 2em;
	font-size: 1em;
}
	.point_detail ul{
	display: block;
	width: 100%;
}
.point_detail ul li img{
	width: 90%;
	margin: 0 auto 3em auto;
}
}

/* 他社との比較 */
.comparison{
	background: var(--lightglay);
}
.comparison_detail{
	padding: 2em 1em 3em 1em;
}
.comparison_detail p{
	width: 100%;
	line-height: 2em;
	font-size: 1.1em;
	color: var(--navy);
	text-align: center;
}

@media (max-width: 780px) {
	.comparison_detail p{
	line-height: 2em;
	font-size: 1em;
}
}

/* 他社との比較表 */
.comparison_table{
	width: 98%;
	margin: 3em auto 0.5em auto;
	border: 1px solid #253650;
	border-collapse: collapse;
	text-align: center;
	color: #253650;
	font-weight: bold;
	font-size: 93%;
}
.table_bg_blue{
	background: #42b1d3!important;
	color: #ffffff!important;
	text-align: center!important;
}
td, th {
	padding: 1em 0.3em!important;
	border: 1px solid #253650;
}
.table_scroll{
	overflow-x: scroll;
	overflow: auto;
	width: 98%;
	font-size: 90%;
	margin: 0 auto;
	    margin: 0 auto 2em auto;
}
.table_scroll::-webkit-scrollbar {
  height: 8px;
}
.table_scroll::-webkit-scrollbar-track {
  background-color: #ffffff;
	border-radius: 8px;
}
.table_scroll::-webkit-scrollbar-thumb {
  background-color: #42b1d3;
  border-radius: 8px;
}
table.table_company {
    table-layout: fixed;
    white-space: pre-wrap;
	border-collapse: separate;
}

table.table_company td {
    white-space: pre-wrap;
	width: 110px;
}
.table_fixed_01 {
    position: sticky;
    left: 0;
	z-index: 1;
}
td.table_highlights{
	background: #fff5da;
}
td.table_document{
	text-align: left;
	font-size: 0.5em;	
	font-weight: normal;
	vertical-align: top;
	padding: 1em 1em!important;
}

/*ファクタリングのご利用方法*/
.use{
	background: #DCF2FF;
	background:linear-gradient(0deg,rgba(220, 242, 255, 1) 0%, rgba(240, 248, 255, 1) 100%);
}
.use_detail{
	padding: 2em 1em 3em 1em;
}
.use_detail p{
	width: 100%;
	line-height: 2em;
	font-size: 1.1em;
	color: var(--navy);
	text-align: center;
}
.use_detail ul{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap:1em;
	width: 100%;
	margin: 2em auto 0 auto;
}
.use_detail ul li img{
	width: 100%;
}

@media (max-width: 780px) {
	.use_detail p{
	line-height: 2em;
	font-size: 1em;
}
	.use_detail ul{
	display: block;
	width: 100%;
}
.use_detail ul li img{
	width: 85%;
	margin: 0 auto 3em auto;
}
}

/*利用者の声*/
.voice{
	background: url(../img/content/building_bg.png) no-repeat center bottom / 100%,#f7f8fb;
}
.voice_detail{
	padding: 2em 1em 3em 1em;
	color: var(--navy);
}
.voice_detail p{
	width: 100%;
	line-height: 2em;
	font-size: 1.1em;
	text-align: center;
}
.voice_set{
	width: 80%;
	margin: 3em auto 0 auto;
}
.voice_set_prof{
	display: flex;
	align-items: center;
	gap:0.5em;
}
.voice_set_prof img{
	width: 25%;
}
.voice_set_prof p{
	text-align: left;
	font-weight: bold;
	font-size: 1em;
	width: 75%;
}
.voice_set_text{
	margin: 1.5em auto 2em auto;
	padding: 2em;
	background: #ffffff;
	border-radius: 10px;
	box-shadow:0 1px 3px rgba(0, 0, 0, 0.08),0 4px 14px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index:1;
}
.voice_set_text h4{
	font-size: 1.3em;
	margin-bottom: 1em;
}
.voice_set_text p{
	text-align: left;
	font-size: 1em;
	line-height: 2em;
}

.background-marker {
  display: inline-block;
  position: relative;
}
.background-marker::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #ffe178;
	z-index: -1;
}

@media (max-width: 780px) {
	.voice_set{
	width: 95%;
	margin: 2em auto 0 auto;
}
	.voice_detail p{
	line-height: 2em;
	font-size: 1em;
}
	.voice_set_prof{
	display: block;
	width: 100%;
}
	.voice_set_prof img{
	width: 55%;
		margin: 0 auto 0.5em auto;
}
	.voice_set_prof p{
	text-align: center;
	font-size: 0.8em;
	width: 100%;
}
	.voice_set_text{
	padding: 2em 1em; 
}
	.voice_set_text h4{
	font-size: 1.1em;
}
.voice_set_text p{
	font-size: 0.9em;
}
}

/*よくある質問*/
.faq{
	background: #ffffff;
	padding: 4em 0;
	color: var(--navy);
}
.faq_detail h3{
	text-align: center;
	font-weight: normal;
	margin-bottom: 2em;
	letter-spacing: 0.2em;
	font-size:1.5em;
}
.faq_set{
	margin: 0 auto 2em auto;
	padding-bottom: 2em;
	border-bottom: 1px solid #9a9a9a;
	width: 80%;
}
.faq_set dl{
	display: flex;
	align-items: center;
	gap:0.7em;
}
.faq_set dl:first-child{
	margin-bottom: 1em;
}
.faq_set dl dt{
	width: 5%;
}
.faq_set dl dt img{
	width: 100%;
}
.faq_set dl dd{
	width: 95%;
	margin: 0;
	line-height: 1.7em;
}

@media (max-width: 780px) {
	.faq_set{
	width: 90%;
		font-size: 0.9em;
}
	.faq_set dl{
	gap:0.5em;
}
	.faq_set dl dt{
	width: 8%;
}
}

/*footer*/
footer{
	background: var(--navy);
	color: #b5b5b5;
	text-align: center;
	padding: 2em 0 1.5em 0;
	font-size: 0.8em;
}
footer nav ul{
	margin-bottom: 2em;
}
footer nav ul li{
	line-height: 2em;
}
footer p{
	font-size: 0.7em;
}

/*---------------------------------------
ページ下部固定の登録ボタン
---------------------------------------*/ 
/* 固定登録ボタン（ページ下部固定） */
.fixed-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(66,177,211,0.9); /* #42b1d3 半透明 */
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 12px rgba(0,0,0,.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}

.fixed-cta__inner{
  width: min(100%, var(--container, 780px));
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixed-cta__btn{
  display: inline-block;
  line-height: 0;
}

.fixed-cta__btn img{
  display: block;
  max-width: 65%;
  height: auto;
	margin: 0 auto;
}

/* 表示状態（JSで .show を付与） */
.fixed-cta.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fixed-cta{
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
}

@media (max-width: 780px) {
	.fixed-cta__btn img{
  max-width: 95%;
}
}

/*---------------------------------------
その他ページ
---------------------------------------*/
.common_text{
	padding: 1em 2em 4em 2em;
}
.common_text p{
	color: var(--navy);
	font-size: 0.9em;
	line-height: 1.7em;
}
@media (max-width: 780px) {
	.common_text{
	padding: 1em 1.5em 4em 1.5em;
}
}

/*---------------------------------------
登録完了ページ
---------------------------------------*/
.completed_title{
	text-align: center;
	margin-bottom: 2em;
}
.completed_title img{
	width: 60px;
	margin: 0 auto 1em auto;
}
.completed_title h4{
	color: var(--blue);
	font-size: 1.5em;
	margin-bottom: 1em;
}
.completed_title p{
	line-height: 2em;
}
.completed_btn{
	text-align: center;
	margin-bottom: 2em;
}
.completed_btn img{
	width: 230px;
	margin: 0 auto 1em auto;
}
.completed_btn p{
	line-height: 2em;
	font-size: 1em;
}
.entry_line{
	text-align: center;
}
.entry_line a img{
	width: 60%;
}

@media (max-width: 780px) {
	.completed_title{
	margin-bottom: 1.5em;
}
	.completed_title img{
	width: 50px;
	margin: 0 auto 0.7em auto;
}
	.completed_title h4{
	font-size: 1.2em;
		margin-bottom: 0.5em;
}
	.completed_btn{
	margin-bottom: 1.5em;
}
	.completed_btn img{
	width: 150px;
}
	.entry_line a img{
	width: 95%;
}
}

/*---------------------------------------
アニメーション関係
---------------------------------------*/ 
/* 登録ボタン */
/* Zoom Repeat Animation */
@keyframes zoomRepeat {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1, 1.1);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.animated_zoomRepeat {
    animation: zoomRepeat 1.3s ease-in-out infinite;
}

