@charset "UTF-8";

/*---------------------------------
  Google Fonts
---------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');

.NotoSans { font-family: 'Noto Sans JP', sans-serif; }
.NotoSerif { font-family: 'Noto Serif JP', serif; }
.ShipporiMincho { font-family: 'Shippori Mincho', serif; }
.MPLUSRounded1c { font-family: 'M PLUS Rounded 1c', sans-serif; }
.BIZ-UDPGothic { font-family: "BIZ UDPGothic", sans-serif; }


/*---------------------------------
  表示・非表示（PC / TB / SP）
---------------------------------*/
.pconly {
	display: block;
}
.tbonly {
	display: block;
}
.sponly {
	display: none !important;
}
.pcnone {
	display: none;
}
@media screen and (max-width: 768px) {
.pconly {
	display: none !important;
}
.tbonly {
	display: none !important;
}
.sponly {
	display: block;
}
.pcnone {
	display: inline-block;
}
.spnone {
	display: none;
}
}

/*---------------------------------
  html/bodyの設定
---------------------------------*/
html {
	font-size: 62.5%; /* 62.5%は10px */
	font-family: 'Noto Sans JP', sans-serif;
    font-feature-settings: "palt";
}
body {
    max-width: 100vw;
	color: #000000;
	background: #f6f2e6;
	overflow-x: hidden;
	word-wrap: break-word;
}
body{ --body-bg: #f6f2e6 } /* ← body背景色に合わせる */
@media screen and (max-width: 768px) {
html {
	font-size: 62.5%; /* 62.5%は10px */
	font-family: 'Noto Sans JP', sans-serif;
    font-feature-settings: "palt";
}
body {
    max-width: 100vw;
	color: #000000;
	background: #f6f2e6;
	overflow-x: hidden;
	word-wrap: break-word;
}
}

/*---------------------------------
  リンク無効
---------------------------------*/
.pointereventsnone {    
   pointer-events: none;
}

/*---------------------------------
  画像
---------------------------------*/
img {
	width:100%;
	height:auto;
}
#maincontentswrap01 img {
   vertical-align:bottom;
   pointer-events: none;
}
#maincontentswrap01 a img {
	border-style:none;
}
#maincontentswrap01 img {
	width:100%;
	height:auto;
	image-rendering: auto;
}
#maincontentswrap01 img[src$=".svg"] {
    width: 100%;
}


/*---------------------------------
  テキストリンク
---------------------------------*/
a:link {
	color: #299ad1;
	text-decoration: underline;
	transition: 1.0s;
}
a:visited {
	color: #299ad1;
	text-decoration: underline;
	transition: 1.0s;
}
a:active {
    color: #299ad1;
	text-decoration: underline;
    opacity: 1;
    transition: 1.0s;
}
a:hover {
    color: #299ad1;
	text-decoration: underline;
    opacity: 0.8;
    transition: 1.0s;
}

/*---------------------------------
  画像リンク
---------------------------------*/
a img {
	display: block;
}
a:link img {
	display: block;
	opacity: 1.0;
	transition: all 0.8s ease;
}
a:visited img {
	opacity: 1.0;
	transition: all 0.8s ease;
}
a:hover img {
	opacity: 0.8;
	transition: all 0.8s ease;
}
a:active img {
	opacity: 0.8;
	transition: all 0.8s ease;
}


/*---------------------------------
  フォントサイズ
---------------------------------*/
.fontsize-14 {
    font-size: 1.4rem;
}
.fontsize-16 {
    font-size: 1.6rem;
}
.fontsize-18 {
    font-size: 1.8rem;
}
.fontsize-20 {
    font-size: 2.0rem;
}
.fontsize-22 {
    font-size: 2.2rem;
}
.fontsize-26 {
    font-size: 2.6rem;
}
.fontsize-28 {
    font-size: 2.8rem;
}
.fontsize-30 {
    font-size: 3.0rem;
}
.fontsize-38 {
    font-size: 3.8rem;
}
@media screen and (max-width: 768px) {
.fontsize-14 {
    font-size: 2.4vw; /* 750px基準で18px */
}
.fontsize-16 {
    font-size: 2.666666666666667vw; /* 750px基準で20px */
}
.fontsize-18 {
    font-size: 2.933333333333333vw; /* 750px基準で22px */
}
.fontsize-20 {
    font-size: 3.2vw; /* 750px基準で24px */
}
.fontsize-22 {
    font-size: 3.4666666666666663vw; /* 750px基準で26px */
}
.fontsize-26 {
    font-size: 4vw; /* 750px基準で30px */
}
.fontsize-28 {
    font-size: 4.266666666666667vw; /* 750px基準で32px */
}
.fontsize-30 {
    font-size: 4.533333333333333vw; /* 750px基準で34px */
}
.fontsize-38 {
    font-size: 5.6000000000000005vw; /* 750px基準で42px */
}
}


/*---------------------------------
  上付き文字
---------------------------------*/
.sup01 {
    font-size: 0.5em;
	vertical-align: middle;
    line-height: 160%;
}


/*---------------------------------
  フォントカラー
---------------------------------*/
.font-white01 { color: #ffffff; }
.font-blue01 { color: #009cff; }
.font-blue02 { color: #1c6ec2; }
.font-black01 { color: #000000; }
.font-red01 { color: #c83b39; }
.font-yellow01 { color: #fff338; }
.font-green01 { color: #009c37; }
.font-green02 { color: #6ac000; }
.font-orange01 { color: #ff7300; }


/*---------------------------------
  フォント太さ指定
---------------------------------*/
.font-thin100 {
    font-weight: 100;
}
.font-extralight200 {
    font-weight: 200;
}
.font-light300 {
    font-weight: 300;
}
.font-regular400 {
    font-weight: 400;
}
.font-medium500 {
    font-weight: 500;
}
.font-semibold600 {
    font-weight: 600;
}
.font-bold700 {
    font-weight: 700;
}
.font-extrabold800 {
    font-weight: 800;
}
.font-black900 {
    font-weight: 900;
}


/*---------------------------------
  テキスト頭揃え
---------------------------------*/
.indent01-01 {
	text-indent: -1em;
	padding: 0 0 0 1em;
}
.indent01-05 {
	text-indent: -1.5em;
	padding: 0 0 0 1.5em;
}
.indent02-05 {
	text-indent: -2.5em;
	padding: 0 0 0 2.5em;
}
.indent03-01 {
	text-indent: -3em;
	padding: 0 0 0 3em;
}

/*---------------------------------
  文字間調整用
---------------------------------*/
.letterspace01 {
	letter-spacing: -0.02em;
}

/*---------------------------------
  行間調整用
---------------------------------*/
.block {
    display: block;
}
.lineheight120 {
    line-height: 120% !important;
}
.lineheight140 {
    line-height: 140% !important;
}
.lineheight160 {
    line-height: 160% !important;
}
.lineheight200 {
    line-height: 200% !important;
}

/*---------------------------------
  行間調整用
---------------------------------*/
.underpadding10px {
    padding: 0 0 10px;
}

/*---------------------------------
  テキスト位置
---------------------------------*/
.textleft {
	text-align: left !important;
}
.textcenter {
	text-align: center !important;
}
.textright {
	text-align: right !important;
}

/*---------------------------------
  アンダーライン
---------------------------------*/
.underline01 {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 10px;
}

/*---------------------------------
  改行設定
---------------------------------*/
.break:before {
	content: "\A";
	white-space: pre;
}
.pcno-break:before {
	content: "";
	white-space: pre;
}
.spno-break:before {
	content: "\A";
	white-space: pre;
}
@media screen and (max-width: 768px) {
.break:before {
	content: "\A";
	white-space: pre;
}
.pcno-break:before {
	content: "\A";
	white-space: pre;
}
.spno-break:before {
	content: "";
	white-space: pre;
}
}


/*---------------------------------
  ページ内リンク位置設定
---------------------------------*/
#link01,
#link02,
#link03,
#link04,
#link05 {
	padding: 20px 0 0;
	margin: -20px 0 0;
}

/*---------------------------------
  ローディング無し：ページ出現だけ演出
---------------------------------*/
#wrapper{
  opacity: 0;
}

body.appear #wrapper{
  animation: PageAnimeAppear .6s ease forwards;
  opacity: 0;
}

@keyframes PageAnimeAppear{
  from { opacity: 0; }
  to   { opacity: 1; }
}


/*---------------------------------
  メインビジュアル
---------------------------------*/
#mainvisualwrap01 {
    width: 100%;
    position: relative;
}
/* 画像h1対策 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
#mainvisualwrap01 {
    width: 100%;
    position: relative;
}
/* 画像h1対策 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
}


/*---------------------------------
  メインコンテンツ
---------------------------------*/
#maincontentswrap01 {
	width: 100%;
    max-width: 1000px !important;
    margin: 0 auto;
    font-size: 1.7500000000000002vw; /* 1600px基準でfont-size: 28px; */
    line-height: 160%;
    position: relative;
}
@media screen and (max-width: 768px) {
#maincontentswrap01 {
	width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
    font-size: 3.733333333333334vw; /* 750px基準で28px */
    line-height: 160%;
    position: relative;
}
}


/*---------------------------------
  キャンペーンコンテンツボックス（共通）
---------------------------------*/
.campaignwrap01 {
    width: 76.625vw; /* 1600px基準でwidth: 1226px; */
    max-width: 80% !important;
    margin: 0 auto;
	padding: 0 0 4.1875vw; /* 1600px基準でpadding: 0 0 67px; */
    position: relative;
}
.campaignwrap02 {
    width: 76.625vw; /* 1600px基準でwidth: 1226px; */
    max-width: 80% !important;
    margin: 0 auto;
	padding: 0 0 4.1875vw; /* 1600px基準でpadding: 0 0 67px; */
    position: relative;
}
.campaignbtnwrap01 {
    width: 59vw; /* 1600px基準でwidth: 944px; */
    max-width: 80% !important;
    margin: 0 auto;
	padding: 2.3125vw 0 0; /* 1600px基準でpadding: 37px 0 0; */
}
@media screen and (max-width: 768px) {
.campaignwrap01 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
	padding: 6vw 0 13.5vw; /* 375px基準でpadding: 24px 0 54px; */
    position: relative;
}
.campaignwrap02 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
	padding: 0 0 13.5vw; /* 375px基準でpadding: 0 0 54px; */
    position: relative;
}
.campaignbtnwrap01 {
    width: 85.33333333333334vw; /* 375px基準でwidth: 320px; */
    max-width: 100% !important;
    margin: 0 auto;
	padding: 2.666666666666667vw 0 0; /* 375px基準でpadding: 10px 0 0; */
}
}


/* =========================================================
   V字セクション（SVG方式）※端末差の線を潰す最終（上線対策込み）
   + SPだけ角度を10%ゆるく（395→388）
========================================================= */

html, body { overflow-x: hidden; }

:root{
  --page-bg: #f5f3e8; /* body背景と同じ想定 */
}

/* フルブリード（100vw） */
.contentswrap01{
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;           /* clip未対応も考慮してhiddenで統一 */
  background: var(--page-bg); /* 透明事故防止 */
}

/* V字の“抜け”で見える色は次の背景色 */
.vcut{
  position: relative;
  overflow: hidden;
  padding-bottom: var(--vcut-h, 90px);
  background: var(--next-bg, var(--page-bg));
}

/* ★セクション同士の継ぎ目は「次のセクションを少し上に被せる」方式 */
.vcut + .vcut{
  margin-top: -2px;
}

/* ★上に出る線（前セクションのにじみ/重なり）を物理的に隠す */
.vcut::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  background: var(--bg, var(--next-bg, var(--page-bg)));
}

/* 中身は常に前面 */
.vcut .reasonwrap01{
  position: relative;
  z-index: 2;
}

/* SVG：左右＋下だけ「pxで」確実にはみ出させる（上には出さない） */
.vcut-svg{
  position: absolute;
  top: 0;                    /* ★上にはみ出させない */
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);  /* 下方向に余裕を持たせる */
  display: block;
  z-index: 1;
  pointer-events: none;

  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 2/3段目の“面”はCSS変数で塗る */
.vcut-shape--color{
  fill: var(--bg, var(--page-bg));
}

/* 白V字ボーダー：少し太らせてアンチエイリアス隙間を塗り潰す */
.vcut-stroke{
  fill: none;
  stroke: #fff;
  stroke-width: calc(var(--vline-w, 12px) + 1px);
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* =========================================================
   1段目（problem-bg01）だけ：PC/SP切替（背景）
========================================================= */
.problem-bg01 .vcut-bg--sp{ display:none; }
@media (max-width: 768px){
  .problem-bg01 .vcut-bg--pc{ display:none; }
  .problem-bg01 .vcut-bg--sp{ display:block; }
}

/* =========================================================
   2〜3段目 & 白線：PC/SP切替（角度切替用）
========================================================= */
/* PCデフォルト */
.vcut-shape--sp,
.vcut-stroke--sp { display: none; }

/* SPで切替 */
@media (max-width: 768px){
  .vcut-shape--pc,
  .vcut-stroke--pc { display: none; }

  .vcut-shape--sp,
  .vcut-stroke--sp { display: block; }
}

/* =========================================================
   セクション個別設定（色の連鎖）
========================================================= */
.problem-bg01{
  --vcut-h: 90px;
  --vline-w: 12px;
  --next-bg: #545855;
}
.gray-bg02{
  --bg: #545855;
  --next-bg: #2f3438;
  --vcut-h: 90px;
  --vline-w: 12px;
}
.gray-bg03{
  --bg: #2f3438;
  --next-bg: var(--page-bg);
  --vcut-h: 90px;
  --vline-w: 10px;
}

/* =========================================================
   SP調整
========================================================= */
@media (max-width: 768px){
  .problem-bg01,
  .gray-bg02,
  .gray-bg03{
    --vcut-h: 50px;
    --vline-w: 8px;
    margin: 0 0 -50px;
  }
}

/* =========================================================
   SPだけ：100vw の丸め誤差（右1pxチラ見え）対策
   calc(50% - 50vw) をやめて transform 方式に切替
========================================================= */
@media (max-width: 768px){
  .contentswrap01{
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }
}

/*---------------------------------
  理由コンテンツボックス
---------------------------------*/
.reasonwrap01 {
    width: 76.625vw; /* 1600px基準でwidth: 1400px; */
    max-width: 80% !important;
    margin: 0 auto;
	padding: 0 0 6.25vw; /* 1600px基準でpadding: 0 0 100px; */
    position: relative;
}
.reasonwrap02 {
    width: 91.25vw; /* 1600px基準でwidth: 1400px; */
    max-width: 80% !important;
    margin: 0 auto;
	padding: 0 0 6.25vw; /* 1600px基準でpadding: 0 0 100px; */
    position: relative;
}
.reasonwrap03 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
    position: relative;
}
.reasonwrap04 {
    width: 75vw; /* 1600px基準でwidth: 1200px; */
    max-width: 80% !important;
    margin: 0 auto;
	padding: 0 0 8.75vw; /* 1600px基準でpadding: 0 0 140px; */
    position: relative;
}
@media screen and (max-width: 768px) {
.reasonwrap01 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
	padding: 0 0 34.66666666666667vw; /* 375px基準でpadding: 0 0 130px; */
    position: relative;
}
.reasonwrap02 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
	padding: 0 0 9.333333333333334vw; /* 375px基準でpadding: 0 0 35px; */
    position: relative;
}
.reasonwrap03 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
    position: relative;
}
.reasonwrap04 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
	padding: 0 0 9.333333333333334vw; /* 375px基準でpadding: 0 0 35px; */
    position: relative;
}
}


/*---------------------------------
  インスタ紹介コンテンツボックス
---------------------------------*/
.instawrap01 {
    width: 79.25vw; /* 1600px基準でwidth: 1268px; */
    max-width: 80% !important;
    margin: 0 auto;
    padding: 7.625vw 0 0; /* 1600px基準でpadding: 122px 0 0; */
    position: relative;
}
@media screen and (max-width: 768px) {
.instawrap01 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 8.799999999999999vw 0 0; /* 375px基準でpadding: 33px 0 0; */
    position: relative;
}
}


/*---------------------------------
  メリットボックス
---------------------------------*/
.meritwrap01 {
    width: 75.3125vw; /* 1600px基準でwidth: 1205px; */
    max-width: 80% !important;
    margin: 0 auto;
    padding: 4.125vw 0 4.5vw; /* 1600px基準でpadding: 66px 0 72px; */
    position: relative;
}
@media screen and (max-width: 768px) {
.meritwrap01 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 5.333333333333334vw 0; /* 375px基準でpadding: 20px 0; */
    position: relative;
}
}


/*---------------------------------
  フローボックス
---------------------------------*/
.flowwrap01 {
    width: 56.25vw; /* 1600px基準でwidth: 900px; */
    max-width: 80% !important;
    margin: 0 auto;
    padding: 7.625vw 0 4.25vw; /* 1600px基準でpadding: 122px 0 68px; */
    position: relative;
}
@media screen and (max-width: 768px) {
.flowwrap01 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 5.333333333333334vw 0 3.2vw; /* 375px基準でpadding: 20px 0 12px; */
    position: relative;
}
}


/*---------------------------------
  Q&Aボックス
---------------------------------*/
.qawrap01 {
    width: 75.3125vw; /* 1600px基準でwidth: 1205px; */
    max-width: 80% !important;
    margin: 0 auto;
    position: relative;
}
.qawrap02 {
    width: 75.3125vw; /* 1600px基準でwidth: 1205px; */
    max-width: 80% !important;
    margin: 0 auto;
    padding: 0 0 4.5vw; /* 1600px基準でpadding: 0 0 72px; */
    position: relative;
}
.qainner01 {
    width: 100%;
    display: block;
    margin: 0 0 2.857142857142857vw; /* 1600px基準でmargin: 0 0 40px; */
}
.qainner01:last-child {
    margin: 0;
}
ul.q01 {
    width: 100%;
    display: table;
}
ul.q01 li {
    display: table-cell;
}
ul.q01 li:nth-child(1) {
    width: 3.125vw; /* 1600px基準でwidth: 50px; */
    font-size: 2.375vw; /* 1600px基準でfont-size: 38px; */
    font-weight: 700;
    text-align: center;
    padding: 0 0 0.4em;
}
ul.q01 li:nth-child(2) {
    width: calc(100% - 3.125vw);
    font-size: 1.8124999999999998vw; /* 1600px基準でfont-size: 29px; */
    font-weight: 700;
}
ul.a01 {
    width: 100%;
    display: table;
}
ul.a01 li {
    display: table-cell;
}
ul.a01 li:nth-child(1) {
    width: 3.125vw; /* 1600px基準でwidth: 50px; */
    font-size: 2.125vw; /* 1600px基準でfont-size: 34px; */
    font-weight: 700;
    text-align: center;
    color: #71bdde;
}
ul.a01 li:nth-child(2) {
    width: calc(100% - 3.125vw);
    font-size: 1.7500000000000002vw; /* 1600px基準でfont-size: 28px; */
    font-weight: 400;
}
@media screen and (max-width: 768px) {
.qawrap01 {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
    position: relative;
}
.qawrap02 {
    width: 85.33333333333334vw; /* 375px基準でwidth: 320px; */
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0 0 5.333333333333334vw; /* 375px基準でpadding: 0 0 20px; */
    position: relative;
}
.qainner01 {
    width: 100%;
    display: block;
    margin: 0 0 5.333333333333334vw; /* 375px基準でmargin: 0 0 20px; */
}
.qainner01:last-child {
    margin: 0;
}
ul.q01 {
    width: 100%;
    display: table;
}
ul.q01 li {
    display: table-cell;
}
ul.q01 li:nth-child(1) {
    width: 8vw; /* 375px基準でwidth: 30px; */
    font-size: 4.266666666666667vw; /* 375px基準でfont-size: 16px; */
    font-weight: 700;
    text-align: center;
    padding: 0 0 0.2em;
}
ul.q01 li:nth-child(2) {
    width: calc(100% - 8vw);
    font-size: 3.2vw; /* 1600px基準でfont-size:12px; */
    font-weight: 700;
}
ul.a01 {
    width: 100%;
    display: table;
}
ul.a01 li {
    display: table-cell;
}
ul.a01 li:nth-child(1) {
    width: 8vw; /* 375px基準でwidth: 30px; */
    font-size: 4.266666666666667vw; /* 375px基準でfont-size: 16px; */
    font-weight: 700;
    text-align: center;
    color: #71bdde;
}
ul.a01 li:nth-child(2) {
    width: calc(100% - 8vw);
    font-size: 3.2vw; /* 375px基準でfont-size:12px; */
    font-weight: 400;
}
}


/*---------------------------------
  会社概要ボックス
---------------------------------*/
.companywrap01 {
    width: 75.3125vw; /* 1600px基準でwidth: 1205px; */
    max-width: 80% !important;
    margin: 0 auto;
    position: relative;
    font-size: 2.75vw; /* 1600px基準でfont-size: 44px; */
    font-weight: 700;
    text-align: center;
    padding: 7.5vw 0 4.0625vw; /* 1600px基準でpadding: 120px 0 65px; */
}
.companywrap02 {
    width: 75.3125vw; /* 1600px基準でwidth: 1205px; */
    max-width: 80% !important;
    margin: 0 auto;
    padding: 0 0 4.5vw; /* 1600px基準でpadding: 0 0 72px; */
    position: relative;
    font-size: 1.5625vw; /* 1600px基準でfont-size: 25px; */
}
ul.companydetail01 {
    width: 100%;
    display: table;
    border-bottom: 2px solid #000000;
    margin: 0 0 1em;
}
ul.companydetail01 li {
    width: calc(100% - 9em);
    display: table-cell;
    padding: 0 0.5em 1em 0;
}
ul.companydetail01 li:nth-child(1) {
    width: 9em;
    padding: 0 0 1em 0.5em;
}
@media screen and (max-width: 768px) {
.companywrap01 {
    width: 85.33333333333334vw; /* 375px基準でwidth: 320px; */
    max-width: 100% !important;
    margin: 0 auto;
    position: relative;
    font-size: 4.8vw; /* 375px基準でfont-size:18px; */
    font-weight: 700;
    text-align: center;
    padding: 5.333333333333334vw 0; /* 375px基準でpadding: 20px 0; */
}
.companywrap02 {
    width: 85.33333333333334vw; /* 375px基準でwidth: 320px; */
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0 0 5.333333333333334vw; /* 375px基準でpadding: 0 0 20px; */
    position: relative;
    font-size: 3.2vw; /* 375px基準でfont-size:12px; */
}
ul.companydetail01 {
    width: 100%;
    display: table;
    border-bottom: 2px solid #000000;
    margin: 0 0 1em;
}
ul.companydetail01 li {
    width: calc(100% - 6em);
    display: table-cell;
    padding: 0 0.5em 1em;
}
ul.companydetail01 li:nth-child(1) {
    width: 6em;
    padding: 0 0 1em 0.5em;
}
}


/*---------------------------------
  フローティングバナー
---------------------------------*/
.floating-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  background: rgba(255,255,255,0.8);
  padding: 12px 0;

  /* 初期状態（非表示） */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;

  transition: opacity .2s ease, transform .2s ease;
}

/* 表示状態 */
.floating-cta.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ボタン */
.floating-cta__btn{
  width: 21.875vw; /* 1600px基準で 756px */
  margin: 0 auto;
  display: block;
  text-align: center;
  padding: 14px 0;

  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/*---------------------------------
  SP
---------------------------------*/
@media screen and (max-width: 768px){
  .floating-cta{
    padding: 5px 0;
  }

  .floating-cta__btn{
    width: 85.33333333333334vw; /* 375px基準でwidth: 320px; */
    /* width: 60%; */
    padding: 5px 0;
  }
}

/*---------------------------------
  下固定CTA分の余白（必要な場合のみ有効化）
---------------------------------*/
/*
body.has-floating-cta{
  padding-bottom: 84px;
}
*/


/*---------------------------------
  コンテンツ（共通）
---------------------------------*/
.contentswrap01 {
	width: 100%;
    position: relative;
}
.contentswrap01 img {
	display: block;
	width: 100%;
	height: auto;
}
.contentswrap02 {
	width: 100%;
    margin: 0 0 3.5000000000000004vw; /* 1600px基準でmargin: 0 0 56px; */
    position: relative;
}
.contentswrap02 img {
	display: block;
	width: 100%;
	height: auto;
}
@media screen and (max-width: 768px) {
.contentswrap01 {
	width: 100%;
    position: relative;
}
.contentswrap01 img {
	display: block;
	width: 100%;
	height: auto;
}
.contentswrap02 {
	width: 100%;
    margin: 0 0 4vw; /* 375px基準でmargin: 0 0 15px; */
    position: relative;
}
.contentswrap02 img {
	display: block;
	width: 100%;
	height: auto;
}
}


/*---------------------------------
  コンテンツBG
---------------------------------*/
.yellowbg01 {
    background: #fcf872;
}
.yellowbg02 {
    background: #ffe968;
}
.whitebg01 {
    background: #ffffff;
}
@media screen and (max-width: 768px) {
.yellowbg01 {
    background: #fcf872;
}
.yellowbg02 {
    background: #ffe968;
}
.whitebg01 {
    background: #ffffff;
}
}


/*---------------------------------
  フッター（公式サイトを流量）
---------------------------------*/
footer {
    position: sticky;
    top: 100vh;
    border-top-left-radius: 6rem;
    border-top-right-radius: 6rem;
    padding-block: 10.6rem 5.8rem;
    background-color: #000;
    color: #fff;
}

footer>.inner {
    display: grid;
    grid-template-areas:
        "nav management"
        "copy copy";
    margin-inline: auto;
    max-width: 98.2rem;
    padding: 0 0 100px;
}

footer nav {
    grid-area: nav;
}

footer .nav-list01 {
    display: flex;
    gap: 6.2rem;
    font-size: 1.6rem;
    font-weight: 700;
}

footer .nav-list01 a {
    display: block;
    padding-bottom: 0.4em;
    background-image: linear-gradient(#fbe741, #fbe741);
    background-size: 0 2px;
    background-position: bottom right;
    background-repeat: no-repeat;
    transition: background-size 0.3s;
    color: #ffffff;
    text-decoration: none;
}

@media (any-hover: hover) {
    footer .nav-list01 a:hover {
        opacity: initial;
        background-size: 100% 2px;
        background-position: bottom left;
    }
}

footer .nav-list02 {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 3.6rem;
    margin-top: 6rem;
    max-width: 43.4rem;
    font-size: 1.2rem;
}

footer .nav-list02>li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #ffffff;
    text-decoration: none;
}

footer .nav-list02>li a::after {
    content: "";
    display: block;
    width: 0.8ic;
    aspect-ratio: 72/40;
    mask: url(../img/icon-arrow.svg) no-repeat center / contain;
    background-color: #fbe741;
    rotate: -90deg;
}

footer .management {
    justify-self: flex-end;
    grid-area: management;
}

footer .wellscan-logo {
    width: 10.8rem;
}

footer .company-name {
    margin-top: 1.6rem;
    font-size: 1.2rem;
}

footer .sns {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 2.8rem;
}

footer .sns>p {
    font-size: 1.2rem;
}

footer .sns-list {
    display: flex;
    gap: 2rem;
}

footer .sns-list a {
    display: grid;
    place-items: center;
    width: 3.6rem;
    aspect-ratio: 1;
    background-color: #fff;
    border-radius: 50%;
}

footer .sns-list img {
    width: 50%;
}

footer .copy {
    grid-area: copy;
    margin-top: 6.5rem;
    text-align: center;
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    footer {
        padding-block: 11rem 6.2rem;
    }

    footer>.inner {
        grid-template-areas:
            "nav"
            "management"
            "copy";
        max-width: 27.8rem;
    }

    footer .nav-list01 {
        flex-direction: column;
        gap: 3.4rem;
        font-size: 2.4rem;
    }

    footer .nav-list01>li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    footer .nav-list01>li a::after {
        content: "";
        display: block;
        width: 0.8ic;
        aspect-ratio: 72/40;
        mask: url(../img/icon-arrow.svg) no-repeat center / contain;
        background-color: #fbe741;
        rotate: -90deg;
    }

    footer .nav-list02 {
        flex-direction: column;
        gap: 2rem;
        margin-top: 6rem;
        font-size: 1.4rem;
    }

    footer .nav-list02>li a::after {
        content: none;
    }

    footer .nav-list02>li a::before {
        content: "-";
    }

    footer .management {
        justify-self: initial;
        display: flex;
        flex-direction: column;
        margin-top: 9rem;
    }

    footer .company-name {
        font-size: 1rem;
    }

    footer .sns {
        align-items: center;
        gap: 4rem;
        margin-top: 2.8rem;
    }

    footer .sns>p {
        font-size: 1.2rem;
    }

    footer .sns-list {
        gap: 1.2rem;
    }

    footer .copy {
        margin-top: 3.8rem;
        font-size: 1rem;
    }
}