@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=Manrope:wght@400;600;700&display=swap');

/* ====↓共通部分↓==== */
html {
	font-size: 100%;
}

body {
    font-family:'BIZ UDGothic', 'Manrope', sans-serif;
    color: #050505;
	background: #FFFEFC;
}

a {text-decoration: none;}
li {list-style: none;}
textarea {resize: none;}
img {
    max-width: 100%;
    vertical-align: bottom;}
.pc-show {display: block;}
.sp-show {display: none;}
section {margin-bottom: 9.92vw;}

.sec-overview {
	text-align: center;
	font-size: 2.3vw;
	margin-bottom: 1.9vw;
}

.sec-description {
	text-align: center;
	font-size: 1.3vw;
	line-height: 2.2vw;
	color: rgb(0, 0, 0, 0.6);
	margin-bottom: 4.96vw
}

.sec-ttl {
	font-size: 1.6vw;
}

.sec-txt {
	font-size: 1.32vw;
	line-height: 1.72vw;
	color: rgb(0, 0, 0, 0.6);
}

.en {font-weight: 600;}

.button {
	background: #EB5757;
	color: #FFF;
	border-radius: 32px;
}

.sec-img {
	margin: 0 auto;
}


/* ====↑共通部分↑==== */


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			ヘッダー	
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.header-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9.92vw;
    min-width: 135px;
    height: 2.98vw;
    min-height: 35px;
    font-size: 1.06vw;
    font-weight: 600;
    margin: 0 auto 0 0;
}

.header {
    width: 100%;
    z-index: 1;
    position: fixed;
	transition: height .5s ease;
}

.header-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 84px;
    justify-content: space-between;
    overflow: hidden;
}

.header-logo {
	width: 9.06vw;
	min-width: 120px;
}

.js-header {
	transition: margin .4s ease;
}

.js-header-scrolled {
	background-color: #618CFF;
	transition: margin .4s ease;
}

.button:hover{
	opacity: 0.8;
	transition: all .1s ease;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			メインビュー	
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.mv-container {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-bottom: 13.2vw;
}

.main-view {
	margin-bottom: 5vw;
}

.mv-left-message {
	margin-bottom: 60px;
}

.mv-message-copy {
	font-size: 3.16vw;
  	font-weight: 700;	
	margin-bottom: 22px;
	line-height: 4.7vw;
}

.mv-message-subcopy {
	display: inline-block;
	color: rgb(0, 0, 0, 0.6);
	font-size: 1.24vw;
	line-height: 2.5vw;
	margin-left: 5px;
	line-height: 2.3vw;
}


.mv-illustration {
	display: flex;
    margin: 0 12% 0 auto;
    align-items: center;
    justify-content: center;
}

.mv-illustration img {
	width: 22.4vw;
	height: auto;
}

.mv-button {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 18vw;
    min-width: 200px;
    height: 4.1vw;
    min-height: 50px;
	font-size: 16px;
	font-weight: 600;
	margin: 0 auto 0 0;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			解決できる課題
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

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

.problem-item {
	width: 33%;
	text-align: center;
}

.sec-ttl_problem {
	margin-bottom: 1.98vw;
}

.problem-img {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.98vw;
	height: 10.9vw;
}

.sec-img_coder {
	width: 7.80vw;
}

.sec-img_option {
	width: 20.17vw;
}

.sec-img_improvement {
	width: 12.76vw;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			特徴
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.feature-items {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	row-gap: 4.96vw;
}

.feature-item {
	text-align: center;
	width: 50%;
}

.feature-item-reverse {
	flex-direction: row-reverse;
}

.sec-ttl_feature {
	margin-bottom: 1.98vw;
}

.sec-txt_feature {
	margin-bottom: 1.98vw;
}

.sec-img_price {
	width: 12.83vw;
}

.sec-img_quality {
	width: 13.82vw;
}

.sec-img_task {
	width: 11.14vw;
}

.sec-img_modify {
	width: 16.40vw;
}


.feature-item-illustration {
	height: auto;
}



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			強み
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.strength {
	text-align: center;
}

.sec-img_strength_table {
	width: 59.52vw;
	min-width: 650px;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			料金
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.price {
	text-align: center;
}

.sec-img_price_table {
	width: 59.52vw;
	min-width: 650px;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			ご利用の流れ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

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

.sec-img_service-flow {
	width: 59.52vw;
    min-width: 650px;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			会社情報
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.company-sec-overview {
	text-align: center;
	margin-bottom: 4.96vw;
}

.company-info-text-inner {
	max-width: 59.52vw;
	min-width: 650px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}


.company-info-item {
    font-size: 1.2vw;
    margin-bottom: 2.12vw;
}

.company-info-heading {
	font-family: 'Manrope';
    font-size: 1.06vw;
    margin-bottom: 0.66vw;
	color: rgb(0, 0, 0, 0.6);
}

.company-info-item > dd {
	font-size: 1.32vw;
	font-family: 'Manrope';
    margin-bottom: 0.3vw;
}

.company-info-logo {
	width: 18vw;
}

.no-margin {
	margin-bottom: 0;
}
/* ----- 会社情報 ----- */


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			メインコンテンツ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.body-main {
    width: 100%;
	padding-top: 12vw;
}

.main-content {
	width: 100%
}

.main-content-inner {
	width: 80vw;
	margin: 0 auto;
}

.intro {
	margin-bottom: 10vw;
}

.img-main-top {
	width: 80%;
	height: auto;
	margin: 5vw auto;
	/* margin-top: 5vw; */
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			フォーム
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.form-container {
	width: 80vw;
	background-color: #F8F5F1;
	border-radius: 15px;
	margin: 0 auto 13.23vw auto;
}

.inquiry-form {
	padding: 4.96vw 0;
	transition-property: all;
    /* transition-duration: 3s; */
    transition-timing-function: linear;
}

.inquiry-form-inner {
	width: 52.9vw;
	min-width: 575px;
	margin: 35px auto;
}

.form-label {
	font-family: 'Manrope';
	font-size: 1.32vw;
	font-weight: 700;
	margin-bottom: 0.35vw;
}

.input-container {
	margin-bottom: 1.32vw;
	position: relative;
}

.selection {
	position :relative;
	font-size: 14px;
}

.select-arrow {
    display: inline-block;
    width: 7px;
    height: auto;
    position: absolute;
    top: 62%;
	transform: rotate(-90deg);
    right: 15px;
	opacity: 0.5;
}

.input-container option:disabled {
	color: #B7B7B7;
}

.option-bl {
	color: black !important;
}

.selection::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%) rotate(90deg);
	width: 12px;
	height: 12px;
	background-color: red;
	background-size: contain;
	background-repeat: no-repeat;
}

.input-box {
	font-family: 'Manrope';
	width: 100%;
	height: 56px;
	padding: 5px 10px;
	border: 1px solid #E6E6E6;
	background-color: #fff;
	border-radius: 8px;
}

.input-box::placeholder {
	font-family: 'Manrope';
	color: rgb(160, 160, 160);
	font-size: 0.9rem;
	line-height: 120%;
}

.contact-area {
	font-family: 'Manrope';
	padding: 15px 10px;
	height: 13.23vw;
	min-height: 150px;
}

.form-button {
	display: block;
	text-align: center;
	width: 17.5vw;
	min-width: 225px;
	height: 4.10vw;
	min-height: 52px;
  	margin: 1.98vw auto 0 auto;
}

.form-required {
	font-size: 0.4rem;
	font-weight: 700;
	color: #ff295b;
	vertical-align: top;
	margin: 2px;
}

.error-text {
	font-family: 'Manrope';
	color: #ff295b;
	font-size: 0.75rem;
	margin: 10px auto;
}



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
			フッター
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.footer {
	width: 100%;
}

.footer-container {
	width: 80vw;
	height: 100%;
	margin: 0 auto;
	padding: 0 0 1.98vw 0;
}

.footer-inner {
	width: 100%;
	height: 100%;
	padding: 2.97vw 0 0 0;
	border-top: 1px solid rgb(0, 0, 0, 0.1);
}

.footer-main {
	height: 100%;
	display: flex;
	justify-content: space-between;
}

.sec-img_logo {
	width: 6.75vw;
}

.footer-menu-items {
	text-align: right;
}

.footer-menu-item {
	margin-bottom: 0.661vw;
	font-size: 0.93vw;
	color: rgb(0, 0, 0, 0.6);
}

.footer-links-item {
	margin-bottom: 0.661vw;
}

.footer-links-item > a {
	font-size: 0.99vw;
	color: #201429;
}

/* ----- フッター ----- */


/* ==============応募ページ================== */

.header-right a {
	transition: all 0.5s;
}

.header-right a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -25px;
	transform: translateY(-50%);
	width: 11.62px;
	height: 11.62px;
	background-image: url('/img/arrow.png');
	background-size: contain;
	background-repeat: no-repeat;
}

.inquiry-page-container {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	padding: 200px 0 150px 0;
}

.inquery-form-button {
	display: block;
	text-align: center;
	width: 275px;
	height: 48px;
  	margin: 0 auto;
}

.input-box-page {
	font-family: 'Manrope';
	width: 100%;
	height: 45px;
	margin-top: 5px;
	padding: 10px;
	border: 1px solid #E6E6E6;
	border-radius: 8px;
}

.input-box-page::placeholder {
	font-family: 'Manrope';
	color: rgb(160, 160, 160);
	font-size: 0.9rem;
	line-height: 120%;
}

/* ==============応募ページ================== */

/* --- KOODA: 問い合わせリンク版のセンタリング調整 --- */
.form-container .inquiry-form { 
  width: 100%;
}

.form-container .inquiry-form-inner{
  max-width: 720px;        /* セクションの横幅 */
  margin: 0 auto;          /* 中央寄せ */
  padding: 40px 24px;      /* 余白 */
  display: flex;           
  flex-direction: column;  /* 縦並び */
  align-items: center;     /* 横方向の中央寄せ */
  justify-content: center; /* 縦方向の中央寄せ（高さがある時）*/
  text-align: center;      /* テキスト中央 */
}

#form-height{               /* セクションが低くなった時に間延び防止 */
  min-height: 360px;        /* 好みで 320–420px に調整可 */
}

.form-button.button{        /* ボタンが左寄りになるのを防ぐ */
  display: inline-block;
}
.form-container .sec-description{
  margin: 12px 0 20px;      /* 見出し下の余白を安定 */
}

/* スマホ調整 */
@media (max-width: 768px){
  #form-height{ min-height: 260px; }
  .form-container .inquiry-form-inner{ padding: 28px 16px; }
}

/* --- KOODA: フォームブロックの左右ズレ修正（強制上書き） --- */
.form-container{
  display: flex;                 /* 中身ごと中央に寄せる */
  justify-content: center;
}

.form-container .inquiry-form{
  width: 100% !important;
}

.form-container .inquiry-form-inner{
  width: 100% !important;        /* 52.9vw を打ち消す */
  max-width: 720px !important;   /* 実際の横幅はここで制限 */
  min-width: 0 !important;       /* 575pxの最小幅を打ち消す */
  margin: 0 auto !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;           /* 横方向の中央寄せ */
  justify-content: center;       /* 高さがあるときの中央寄せ */
  text-align: center;
}

#form-height{                    /* 高さ調整は好みで */
  min-height: 360px !important;
}

.form-button.button{
  display: inline-block !important;
  margin: 12px auto 0 auto !important;
}

@media (max-width: 768px){
  .form-container{
    padding-left: 0; padding-right: 0;
  }
  .form-container .inquiry-form-inner{
    padding: 28px 16px !important;
    max-width: 640px !important;
  }
}

/* --- KOODA: フォームの上下センタリングを厳密に揃える --- */
.form-container .inquiry-form{
  display: flex;
  align-items: center;          /* 垂直中央 */
  justify-content: center;      /* 水平中央 */
  padding: 48px 0;              /* 上下を対称パディングに */
}

#form-height{
  min-height: 0 !important;     /* 既存の min-height があれば打ち消し */
}

.form-container .inquiry-form-inner{
  margin: 0 auto !important;    /* 35px の上下マージンを打消し */
  width: 100% !important;
  max-width: 720px !important;
  min-width: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                     /* 余白は gap で安定管理 */
  text-align: center;
}

/* 見出し・説明の余白をやや控えめに（視覚中央を取りやすくする） */
#form .company-sec-overview{ margin: 0 !important; }
#form .sec-description{ margin: 10px 0 18px !important; }

/* ボタンも厳密に中央位置へ */
.form-button.button{
  display: inline-block !important;
  margin: 10px auto 0 auto !important;
}

/* スマホ */
@media (max-width: 768px){
  .form-container .inquiry-form{ padding: 36px 0; }
  .form-container .inquiry-form-inner{ gap: 12px; max-width: 640px !important; }
}

/* --- KOODA: お問い合わせブロックのページ下余白を調整 --- */
.form-container{ margin: 0 auto 5vw auto !important; }  /* 13.23vw → 5vw くらいに */
.footer-inner{ padding-top: 1.5vw !important; }        /* 余白を少しだけ細く（任意） */

/* --- KOODA: 上下位置の最終調整（カードを画面中央に近づける） --- */
.form-container{
  margin: 4vw auto 4vw auto !important; /* 上下の余白を均等に（必要なら3〜5vwに微調整） */
}

.form-container .inquiry-form{
  padding: 32px 0 !important; /* 内側の高さを少し控えめにして中央バランスをとる */
}

.form-container .inquiry-form-inner{
  gap: 12px !important;
}

@media (max-width: 768px){
  .form-container{ margin: 8vw auto 6vw auto !important; }
  .form-container .inquiry-form{ padding: 28px 0 !important; }
}

/* ボタン内テキストの“わずかな上ずり”を解消して完全中央に */
.form-button.button{
  display: inline-flex !important;     
  align-items: center !important;      
  justify-content: center !important;  
  line-height: 1 !important;           
  height: 52px !important;             
  padding: 0 24px !important;          
  letter-spacing: .02em;               
}

/* SP: 「お問い合わせフォームへ」を必ず1行にする */
.form-button.button{
  display: inline-flex !important;     /* 中央寄せ維持 */
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;              /* 既存の幅指定(17.5vw等)を無効化 */
  min-width: max-content !important;   /* テキスト幅に合わせて広げる */
  white-space: nowrap !important;      /* 改行させない */
  word-break: keep-all !important;     /* CJKの途中改行も防止 */
  line-height: 1 !important;
  height: 52px !important;
  padding: 0 24px !important;
}

/* 画面が狭い端末では文字サイズだけ控えめにしてはみ出し防止 */
@media (max-width: 430px){
  .form-button.button{
    font-size: clamp(14px, 4.3vw, 16px);  /* 自動で少し縮む */
    padding: 0 18px !important;           /* 内側余白も少しだけ削減 */
  }
}

/* 見出しと説明の余白を微調整（視覚中心を取りやすく） */
#form .company-sec-overview{ margin: 0 0 8px !important; }
#form .sec-description{ margin: 8px 0 16px !important; }

/* SP: 「お問い合わせはMOBSELL公式フォームよりお願いいたします。」を1行に固定 */
#form .sec-description{
  white-space: nowrap !important;     /* 改行を禁止 */
  word-break: keep-all !important;    /* 日本語の途中改行も防止 */
  display: inline-block !important;   /* インライン扱いにして自然な折返し制御 */
  text-align: center !important;      /* 中央揃えを維持 */
}

/* 狭い画面では文字サイズを少しだけ自動調整 */
@media (max-width: 430px){
  #form .sec-description{
    font-size: clamp(13px, 3.7vw, 15px);  /* 自動で少し縮む */
  }
}

/* SP: 説明文を必ず1行に（フォーム説明） */
@media (max-width: 768px){
  .form-container .inquiry-form-inner .sec-description{
    white-space: nowrap !important;       /* 改行禁止 */
    word-break: keep-all !important;      /* 日本語の途中折返しも禁止 */
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;          /* どうしても入らない時は… */
    text-overflow: ellipsis !important;   /* …末尾を省略（[…]） */
    margin: 8px 0 16px !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;  /* 画面に合わせて少し縮む */
    letter-spacing: 0 !important;
  }
}

/* さらに狭い端末用の微調整（必要なら） */
@media (max-width: 390px){
  .form-container .inquiry-form-inner .sec-description{
    font-size: 3.4vw !important;
  }
}
@media (max-width: 360px){
  .form-container .inquiry-form-inner .sec-description{
    font-size: 3.2vw !important;
  }
}

/* スマホで説明文を1行に固定 */
@media (max-width: 768px){
  .sec-description{
    white-space: nowrap !important;     /* 改行を禁止 */
    word-break: keep-all !important;    /* 日本語の途中改行も防止 */
    display: inline-block !important;   /* 中央寄せ維持 */
    text-align: center !important;      /* 中央揃え */
    margin: 8px 0 16px !important;      /* 余白を安定 */
    font-size: clamp(13px, 3.6vw, 15px) !important; /* 自動調整 */
  }
}