@charset "UTF-8";
html {
    /* これだけでページ内の全リンクが「じわ〜」っと動くようになるぜ */
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden; /* 横方向のスクロールだけを禁止する魔法だぜ */
}
.l-wrap {
    width: 100%;
    overflow: hidden; /* ★これで「はみ出したイラストや背景」による横スクロールを強制終了させるぜ */
}
/* 惑星の見た目 */
.back{
	background-color: #47d4be;
	padding: 50px 0;
	width: 100%;
	margin: 0 auto;
}
.planet {
  animation: fuwafuwa 4s infinite ease-in-out;
}
.planet-container{
	display: flex;
}

/* 1人目（そのまま） */
.planet-container .back:nth-child(1) .planet {
  animation-delay: 0s;
}

/* 2人目（少し遅らせる） */
.planet-container .back:nth-child(2) .planet {
  animation-delay: -1.5s; /* マイナスにすると「途中から再生」されるから自然だぜ */
}

/* 3人目（もっと遅らせる） */
.planet-container .back:nth-child(3) .planet {
  animation-delay: -3s;
}
/* ふわふわ動く魔法のコード */
@keyframes fuwafuwa {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); } /* 20px上に浮く */
}

.l-local-header{
	padding: 15px 0;
}
.l-local-header__logo{
	width: 20%;
}
.l-local-header__logo img{
	width: 100%;
}

.h1-title-area{
	background-image: url("../images/h-bg-pc.png");
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 50px;
    padding: 230px 0;	
}
.h1-title{
	color: #fff;
	display: flex;
	width: 90%;
	margin: 0 auto;
	
}
.h1-title .en{
	font-size: clamp(2.5rem, 6vw + 1rem, 4.0rem);
    font-family: 'Arial Black', sans-serif;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 5px;
	display: flex;
	position: relative;
	gap: 5px;
}
.h1-title .en::before{
	content: '';
	background-repeat: no-repeat;
    background-position-y: center;
    background-size: contain;
    width: 80px;
    height: 70px;

}
.company-icon{
	position: relative;
}
.company-icon .en::before{
	background-image: url("../images/company-icon.png");
}
.work-icon .en::before{
	background-image: url("../images/work-icon.png");
}
.environment-icon .en::before{
	background-image: url("../images/environment-icon.png");
}
.recruitment-icon .en::before{
	background-image: url("../images/recruitment-icon.png");
}
.h1-title .jp {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    font-size: 1.9rem;
    font-weight: bold;
    color: #fff;
}
.h1-title .jp::before{
    content: "";
    flex-grow: 1;
    height: 2px;
    background-color: #fff;
    margin-right: 15px;
}
.main-title {
  display: block;
  color: #16a88d;
  font-family: sans-serif;
  font-weight: bold;
  position: relative;
  padding: 30px 0 30px 50px;
  z-index: 1;
  width: 530px; /* ←これがスマホで画面を突き破るぜ！ */
  max-width: 100%; /* ★これを追加して、画面幅を超えないようにする */
  margin-bottom: 100px;	
}
.sub-title{
	display: block;
	text-align: center;
	font-size: 3.5em;
	line-height: 0.8em;
}
.sub-title-icon{
	margin-bottom: 10px;
}
.sub-title .jp-2{
	font-size: 25px;
}
#service .main-title , #benefits .main-title{
  margin-left: auto;
  margin-bottom: 100px;
  padding: 30px 30px 30px 20px;
}
#service .main-title::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    width: calc(100% + 40px);
    height: 60%;
    background-color: #ffff88;
    z-index: -1;
    transform: translateY(-20%);
}
.main-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;           /* ★-20pxから0にするか、overflow: hiddenを親にかける */
  width: 95%;       /* ★100%に抑える */
  height: 120px;
  background-color: #ffff88;
  z-index: -1;
  transform: translateY(-20%);
}

/* 1行目：COMPANY PROFILE & */
.en-1 {
  display: block;
  font-size: 40px;
  line-height: 1.1;
  position: relative;   /* 念のため文字を背景より前に */
  font-family: 'Arial Black', sans-serif;
  font-weight: 900;
  line-height: 1.2;	
}
#kk-data .en-1 {
	font-size: 40px;
    font-weight: bold;
    color: #FFFFFF; /* 文字の中身は白 */
    
    /* 360度全方向に緑色の影を1px〜3pxずらしながら重ねまくる技だぜ！ */
    text-shadow: 
        2px  2px 0 #169d88,
       -2px  2px 0 #169d88,
        2px -2px 0 #169d88,
       -2px -2px 0 #169d88,
        0px  2px 0 #169d88,
        0px -2px 0 #169d88,
        2px  0px 0 #169d88,
       -2px  0px 0 #169d88;
}
/* 2行目のセット */
.title-bottom-set {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;   /* 念のため文字を背景より前に */
}

.en-2 {
  font-size: 40px;
  margin-right: 15px;
  font-family: 'Arial Black', sans-serif;
  font-weight: 900;
  line-height: 1.2;		
}

.line-with-jp {
  display: flex;
  align-items: center;
  flex-grow: 1;
  font-size: 16px;
  white-space: nowrap;
}

.line-with-jp::before {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #16a88d;
  margin-right: 15px;
}
.business-list{
	margin: 0 0 100px;
}
.business-list li{
	list-style: none;
	color: #169d88;
	line-height: 2.0em;
	position: relative;
}
.li_01::before,.li_02::before,.li_03::before{
	position: absolute;
	color: #c1c1c1;
	font-weight: bold;
	left: -30px;
}
.li_01::before{
	content: '01';
}
.li_02::before{
	content: '02';
}
.li_03::before{
	content: '03';
}
.sarvis-title{
	text-align: center;
    font-weight: bold;
    font-size: 4.5em;
    color: #c1c1c1;
	margin: 0 0 100px;
	font-family: 'Arial Black', sans-serif;
}
.left-banner {
	text-align: left;
}
.left-banner a img{
	margin-right: auto;
	margin-bottom: 100px;
	width: 60%;
}
.left-banner a img, .right-banner a img{
/* ★1. 秒数を0.8秒〜1秒くらいまで伸ばす（これで「じわっと」するぜ） */
    /* ★2. cubic-bezierをさらに極端な数値にして、後半をめちゃくちゃゆっくりにする */
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    
    backface-visibility: hidden;
    will-change: transform;
    display: block;
}
.left-banner a :hover , .right-banner a :hover{
/* ★3. 倍率をあえて少し控えめ（1.03とか）にすると、より上品に「じわっ」とする */
    transform: scale(1.04);
}
.right-banner{
	text-align: right;
}
.right-banner a img{
	margin-left: auto;
	margin-bottom: 100px;
	width: 60%;
}
.gray-bg{
	background-color: #f6f6f6;
	padding: 100px 0 200px;
	margin-top: -170px;
	position: relative
}
.yellow-bg{
	background-color: #fff998;
	padding: 100px 0;
}
.vision-box{
    background-image: url(../images/ablenet-logo-bg.png);
    background-repeat: no-repeat;
    background-size: 50%;
	background-position: right bottom;
}
.vision-icon-box{
	text-align: center;
}
.gray-bg h4{
	z-index: 2;
    position: relative;	
}
.gray-bg p{
	color: #169d88;
	line-height: 1.5em;
	z-index: 2;
    position: relative;
}
#kk-data{
	background-color: #47d4be;
	padding-top: 200px;
}
#kk-data .main-title{
	margin-top: 200px;
}
.bg-cloud{
	background-image: url("../images/bg-cloud.png");
	width: 100%;
	height: 300px;
	background-size: cover;
	background-repeat: no-repeat;
}

@media screen and (max-width: 50em) {
.h1-title-area{
	background-image: url("../images/h-bg-sp.png");
	background-size: 100%;
	margin: 90px 0;
	padding: 50px 0 110px;		
}	
.h1-title{
	display: block;
	}
.h1-title .jp {
    font-size: 1.5rem;
}
.h1-title .en::before{
    width: 65px;
    height: 55px;
}	
}
/* ==========================================
   1. 土台・リセット（ここがないとズレるぜ）
   ========================================== */
html, body, div, span, h1, ul, li, a, img, nav, section, button, i {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box; /* 崩れ防止の守護神 */
	font-family: 'Zen Maru Gothic', sans-serif;
}

body {
    line-height: 1.1;
    letter-spacing: 0.05em;
    color: #333;
}

a { text-decoration: none; color: inherit; }
li { list-style: none; }

/* アイコン用の設定（Material Iconsなど） */
.c-icon {
    font-family: 'Material Icons'; /* フォント読み込みが必要だぜ */
    font-style: normal;
    vertical-align: middle;
}

/* ==========================================
   2. ヘッダーの外枠とレイアウト
   ========================================== */
.l-header {
    width: 100%;
    background-color: #ffee9e;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    border-bottom: solid 1px #d9dbd0;
    transition: 0.5s ease;
	padding: 10px 0px 20px;
}

.l-local-header {
    width: 100%; 
    line-height: 1.5rem;
    padding: 10px 20px 0;
    position: relative;
    transition: 0.25s ease;
}
.l-local-header-nav{
	float: right;
}
/* ロゴ周り */
.l-local-header-about {
    float: left;
    height: 100%;
    margin: 10px 50px 0 0;
}

.l-local-header__logo {
    width: 250px;
    height: 100%;
    float: left;
}

.l-local-header__logo img {
    width: 100%;
    height: 40px;
    vertical-align: middle;
}
.l-local-header__logo .saiyou{
	font-size: 12px;
	color: #fff;
	font-weight: bold;
	background-color: #169d88;
	display: block;
	text-align: center;
	margin-top: 3px;
}
/* ==========================================
   3. ナビゲーションとホバーエフェクト
   ========================================= */
.l-local-header-nav {
    float: right;
	margin-top: 10px;
}

.l-local-header-nav-item_vps {
    display: inline-block;
    letter-spacing: 0.05em;
    margin-right: 32px;
    font-weight: 900;
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
	
}
.l-local-header-nav-list{
	background-color: #fff;
	padding: 20px 20px 20px 50px;
	border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;	
}
.l-local-header-nav-item_vps a{
	color: #169d88;
}

/* マウスを乗せた時の丸い背景（黄色） */
.l-local-header-nav-item_vps::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background-color: #ffff7f; 
    border-radius: 50%;
    z-index: -1;
    transform: translate(-50%, -50%) scale(0, 0);
    transition: 0.25s ease;
}

.l-local-header-nav-item_vps:hover::after {
    transform: translate(-50%, -50%) scale(1, 1);
}

/* ==========================================
   4. メガメニュー（ドロップダウン）
   ========================================== */
.l-header-mega {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 50px; /* 隠れている時は少し上 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background-color: #fff; /* ★背景色を復活 */
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
    width: 220px;
    padding: 0;
    max-height: 0;
    /* overflow: hidden;  ← ★これを削除！ツノが見えるようにするぜ */
    transition: all 0.4s cubic-bezier(1, 0, 0.46, 0.64);
    border: solid 3px #169d88;
    border-radius: 10px;
    box-sizing: border-box;
}

/* ツノの外枠（緑の三角形） */
.l-header-mega::before {
    content: "";
    position: absolute;
    top: -30px; /* メニューの上にはみ出させる */
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 27px solid #169d88;
}

/* ツノの内側（白） */
.l-header-mega::after {
    content: "";
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 25px solid #fff;
}

/* 文字の入れ物（aタグ）の余計な高さをカットする */
.l-local-header-nav-item_vps a {
	display: inline-flex;
    align-items: center;
    vertical-align: top; /* ★上揃えにして下を空ける */
    padding: 0;
    height: 1.5rem;      /* ★文字の高さ（line-height）に合わせる */
    line-height: 1.5rem;
    color: #169d88;
	font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 700;
}

/* --- 表示される時の設定 --- */
.l-local-header-nav-item_vps a:hover + .l-header-mega,
.l-header-mega:hover {
    opacity: 1;
    visibility: visible;
    max-height: 500px; /* ★9999pxだとアニメーションが速すぎてパッと出ちゃうから、現実的な数字にするぜ */
    top: 60px; /* ちょうどいい位置に降りてくる */
}

/* メニュー自体にマウスが乗っている間も表示をキープ */
.l-header-mega:hover {
    opacity: 1;
    max-height: 9999px;
    z-index: 10;
    top: 60px;
    visibility: visible;
}

.l-header-mega-item {
    margin: 20px 20px 15px;
	position: relative;
}
.l-header-mega-item a {
    color: #169d88;
    font-size: 0.875rem;
    font-weight: 900;
}
.l-header-mega-item::before{
	content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 2px solid #169d88;;
    border-right: 2px solid #169d88;;
    transform: rotate(45deg);
    right: 10px;
    top: 25%;
}
.l-header-mega-item:hover a {
    color: #f26100; /* オレンジに変わるぜ */
}

/* --- 中身のメニュー（背景を白く保つため） --- */
.l-header-mega-menu {
    background-color: #fff;
    border-radius: 7px; /* 枠線の内側に合わせる */
    overflow: hidden; /* ★中身のリストが枠からはみ出さないようにこっちに設定 */
}

.heder-contact-btn{
	background-color: #169d88;
    padding: 10px 30px;
    border-radius: 100px;
}
.heder-contact-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    position: relative;
    width: 100%;
    text-decoration: none;
    gap: 10px;
    margin: 0px auto;
	color: #fff;
}
.heder-contact-btn ::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("../images/heder-contact-icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 7px;
}
.heder-contact-btn ::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-left: auto;
}
 .heder-entry-btn a{
	color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    gap: 10px;
    position: relative;
    width: 100%;
    margin: 0 auto;	 
}
.heder-entry-btn{
	background-color: #ffb430;
    color: #fff;
    padding: 10px 30px 10px 40px;
    border-radius: 100px;	
}
.heder-entry-btn ::after {
    background-image: url("../images/blank-icon-white.png");
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
}
/* ==========================================
   5. 右側の特殊ボタン（ログイン・申し込み）
   ========================================== */
/* ログインボタン */
.login {
    position: absolute;
    right: 150px;
    top: 20px;
}

.login-button {
    font-weight: bold;
    border: solid 2px #333;
    border-radius: 100px;
    background-color: #FFF;
    width: 120px;
    padding: 10px 0;
    text-align: center;
    display: block;
    transition: 0.3s;
}

.login-button:hover {
    background-color: #BFEF29;
    border-color: transparent;
}

/* お申し込みボタン（丸いやつ） */
.l-header-apply {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-color: #333;
    border-radius: 50%;
    color: #fff;
    z-index: 1;
    transition: 0.5s ease;
}

.l-header-apply__icon {
    color: #f26100;
    font-size: 1rem;
}

/* お申し込みボタンのホバーでオレンジになる背景 */
.l-header-apply::before {
    content: "";
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    background-color: #f26100;
    opacity: 0;
    border-radius: 50px;
    transform: scale(0.8, 0.8);
    transition: 0.3s ease-out;
    z-index: -1;
}

.l-header-apply:hover::before {
    opacity: 1;
    transform: scale(1, 1);
}

/* ==========================================
   6. スマホ用（レスポンシブ・トグル）
   ========================================== */
.l-header-toggle {
    position: fixed;
    top: 22px;
    right: 10vw;
    display: none; /* デフォルトは隠す */
}

@media screen and (max-width: 1290px) {
    .l-header-toggle { display: inline-block; }
    .l-local-header { width: 75vw; height: 60px; padding: 0 10px; display: inline-block;}
    .l-local-header__logo { width: 120px; }
    .l-local-header-nav, .l-header-apply { display: none; }
    
    .login { right: 80px; top: 13px; }
    .login-button { width: 90px; }
}
/* ハンバーガーメニュー*/

.l-nav-sp{
	display: none;
}
@media screen and (max-width: 1290px) {
.l-nav-sp{
	display: inline-block;
}	
}
.sp-menu-title{
	font-size: 30px;
	font-weight: bold;
	color: #169d88;
}
.menu-wrapper {
  position: relative;
}

.menu-icon {
  width: 40px;
  height: 30px;
  position: fixed; /* ← fixedにして常に左上固定 */
  top: 28px;
  right: 20px;
  cursor: pointer;
  z-index: 3;
  display: inline-block;
}

.menu-icon span {
  display: block;
  height: 4px;
  margin: 6px 0;
  background: #169d88;
  border-radius: 2px;
  transition: 0.4s;
}

/* ハンバーガーがXに変形 */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* オーバーレイ背景 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
  z-index: 1;
}

#menu-toggle:checked ~ .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* メニュー本体（左から出す） */
.menu {
  position: fixed;
  top: 0;
  right: -320px; /* ← 初期位置を右 */
  width: 320px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.2);
  transition: left 0.4s ease;
  z-index: 2;
	max-height: 100vh;      /* 画面の高さ（100vh）を最大にする */
    overflow-y: auto;      /* 中身がはみ出したらスクロールを出す */
    -webkit-overflow-scrolling: touch; /* iPhoneでスクロールをヌルヌルさせる魔法 */	
}

#menu-toggle:checked ~ .menu {
  right: 0; /* ← 開いたときは右0へ */
}

.menu .menu-box {
  list-style: none;
  padding: 60px 20px 0px;
}

.menu  .l-local-header-nav-item-sp {
  margin: 20px 0;
  display: block;
  align-items: center;
  border-bottom: solid 1px #30535c;
  padding-bottom: 10px;	
  position: relative;	
}
.l-local-header-nav-item-sp a{
	color: #30535c;
}
.company-icon-sp::before {
    background-image: url("../images/company-icon-yellow.png");
}
.work-icon-sp::before {
    background-image: url("../images/work-icon-yellow.png");
}
.environment-icon-sp::before {
    background-image: url("../images/environment-icon-yellow.png");
}
.recruitment-icon-sp::before {
    background-image: url("../images/recruitment-icon-yellow.png");
}

.menu a {
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.menu a:hover {
  color: #007bff;
}
.l-nav-sp-item{
	color: #30535c;
	line-height: 1.7em;
	position: relative;
	padding-left: 20px;
}
.l-nav-sp-item::before{
	content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 1px solid #30535c;
    border-right: 1px solid #30535c;
    transform: rotate(45deg);
    left: 0;
    top: 25%;
}
/* --- 1. チェックボックス本体は画面から消す --- */
.accordion-check {
  display: none;
}

/* --- 2. レイアウト調整（labelを親いっぱいにする） --- */
.accordion-label {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ★左寄せ */
  width: 100%;
  cursor: pointer;
  font-weight: bold;
}

/* --- 3. メニューを最初は隠す（アニメーション用） --- */
.l-nav-sp-list {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease; 
}

/* --- 4. 【重要】チェックが入ったらメニューを出す --- */
.accordion-check:checked ~ .l-nav-sp-list {
  max-height: 500px; /* 十分な高さを指定 */
  opacity: 1;
  margin-top: 10px;
  padding-bottom: 10px;
}

/* --- 5. 【重要】チェックが入ったらアイコンをマイナスにする --- */
.accordion-check:checked + .accordion-label .accordion-icon i {
  transform: translate(-50%, -50%) rotate(90deg); /* 縦線を倒す */
}

/* --- アイコン自体のCSS（さっきのやつを流用） --- */
/* 黄色のアイコン（::before）の調整 */
.accordion-label::before {
  content: "";
  display: inline-block;
  width: 40px; /* ★サイズを戻したぜ */
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 15px;
  flex-shrink: 0; /* アイコンが潰れないように */
}

/* 各アイコンの画像指定先をラベルに変更 */
.company-icon-sp .accordion-label::before { background-image: url("../images/company-icon-yellow.png"); }
.work-icon-sp .accordion-label::before { background-image: url("../images/work-icon-yellow.png"); }
.environment-icon-sp .accordion-label::before { background-image: url("../images/environment-icon-yellow.png"); }
.recruitment-icon-sp .accordion-label::before { background-image: url("../images/recruitment-icon-yellow.png"); }

/* プラス・マイナスアイコンを右端に飛ばす */
.accordion-icon {
  margin-left: auto; /* ★これで右端に寄るぜ！ */
  position: relative;
  width: 26px;
  height: 26px;
  border: 2px solid #556b71;
  border-radius: 6px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.accordion-icon::after, .accordion-icon i {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #556b71;
  transition: 0.3s;
}
.accordion-icon::after { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.accordion-icon i { width: 2px; height: 14px; transform: translate(-50%, -50%); }



/*====================================================================
slick 決定版
====================================================================*/
.pc{
	display: block;
}
.sp{
	display: none;
}
.fade-slider {
    width: 100%;
    margin: 0 auto;
    position: relative;
	z-index: 1; /* スライダーを一番下の層にする */	
}

/* スライダー全体の枠 */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    touch-action: pan-y;
}

/* スライドが表示されるエリア */
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* 各スライド（フェード時はここで重なりを制御） */
.slick-slide {
    display: none; /* 最初は非表示 */
    float: left;
    height: 100%;
    min-height: 1px;
}

.slick-initialized .slick-slide {
    display: block; /* 初期化されたら表示 */
}

.slick-slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* ドット（下のポチポチ） */
.slick-dots {
    position: absolute;
    bottom: 100px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
	z-index: 9999;
}
.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}
.slick-dots li button {
    font-size: 0;
    width: 12px;
    height: 12px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.slick-dots li.slick-active button {
    background: #169d88; /* アクティブなドットの色 */
}
#company-profile,#history,#history,#history,#job,#schedule,#interview,#office,#surrounding-information,#requirement,#portrait,#faq,#kk-data{
	padding-top: 150px;
    margin-top: -150px;
}
@media screen and (max-width: 53em)
{
.pc{
	display: none;
}
.sp{
	display: block;
	}
}

/* メッセージエリア　*/
.message-area{
  background-color: #47d4be;
  z-index: 999;
	overflow: hidden;

  /* ★ここから修正：波と逆V字を表現するマスク設定 */
  /* インラインSVGを使って、波と下の尖った形を定義するぜ */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C250,-15 750,75 1000,30 L1000,450 L500,500 L0,450 Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C250,-15 750,75 1000,30 L1000,450 L500,500 L0,450 Z' /%3E%3C/svg%3E");
  
  /* mask-sizeで波の高さを制御する（100%は横、2番目が高さ） */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
position: relative;
    z-index: 1;
    /* 波線の分だけ上に余白を作る（数値は調整してな！） */
    padding: 150px 0;
    margin-top: -90px;
}
.message-area h2{
	font-size: 100px;
	color: #fff;
	z-index: 12;
}
.message-area p{
	color: #fff;
	font-weight: bold;
	line-height: 1.5em;
	width: 95%;
    margin: 0 auto;
	font-size: 20px;
	font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 400;
}
.lead-text{
	font-size: 20px;
	width: 100%;
	margin: 100px auto;
	text-align: center;
	color: #169d88;
	line-height: 1.5em;
}
.lead-text_02{
	font-size: 20px;
}
.run-img-box{
	text-align: center;
}

.message-content{
	position: relative;
	z-index: 10;
}
/* 親要素（緑のセクション） */
.message-section {
    position: relative; /* イラストの基準点にするぜ */
   /* 画面外から来る雲がはみ出ないように！ */
    /* ...以前のclip-pathなどの設定... */
}

/* イラスト全体の共通設定 */
.message-illustrations img {
    position: absolute;
    pointer-events: none; /* イラストが文字選択の邪魔をしないように */
	z-index: 11;
}

/* --- 各イラストの初期位置（よごごの理想の場所に！） --- */

/* 例：左の雲（通常位置） */
.illus-char-dog{
	left: 13%;
    bottom: 30%;
}
.illus-char-ufo{
	/* 幅を「最小150px、推奨20vw、最大400px」にする */
    width: clamp(150px, 20vw, 200px);
   
    /* 位置も「最小5%、推奨13%、最大20%」みたいに制限できる */
    right: clamp(5%, 0%, 20%);
	bottom: clamp(5%, 32%, 10%);	
}
.illus-char-paper{
	left: 25%;
    bottom: 17%;
}
.illus-cloud-l1 {
    top: 10%;
    left: 5%;
    width: 200px;
}

.illus-cloud-r1 {
    /* 幅を「最小150px、推奨20vw、最大400px」にする */
    width: clamp(150px, 20vw, 400px);
    
    /* 位置も「最小5%、推奨13%、最大20%」みたいに制限できる */
    left: clamp(0%, 0%, 20%);
}
.illus-cloud-r2{
    /* 幅を「最小150px、推奨20vw、最大400px」にする */
    width: clamp(150px, 20vw, 400px);
    
    /* 位置も「最小5%、推奨13%、最大20%」みたいに制限できる */
    right: clamp(0%, 0%, 20%);
}
.illus-cloud-r3{
    /* 幅を「最小150px、推奨20vw、最大400px」にする */
    width: clamp(100px, 20vw, 300px);
    
    /* 位置も「最小5%、推奨13%、最大20%」みたいに制限できる */
    left: clamp(5%, 6%, 20%);
	bottom: clamp(5%, 19%, 20%);
}
.illus-cloud-r4{
    /* 幅を「最小150px、推奨20vw、最大400px」にする */
    width: clamp(110px, 20vw, 300px);
    
    /* 位置も「最小5%、推奨13%、最大20%」みたいに制限できる */
    right: clamp(5%, 0%, 20%);
	bottom: clamp(5%, 32%, 25%);	
}
.rocket-area{
	margin-top: 0;
	z-index: 10;
	position: relative;
}
/* 例：ロケット（通常位置） */
.illus-char-rocket {
	right: 23%;
    top: -990px;
    z-index: 20;
    position: absolute;
}
/* ふわふわアニメーションの定義 */
@keyframes fuwafuwa {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); } /* 20px上に浮くぜ */
}

/* キャラクターに適用 */
.illus-char-dog,
.illus-char-rocket,
.illus-char-ufo,
.illus-char-paper{
    animation: fuwafuwa 4s ease-in-out infinite; /* 4秒かけて無限に繰り返す */
	filter: drop-shadow(0 10px 15px rgba(0,0.1,0,0.1));
}

/* 時間差をつけて自然にするぜ */
.illus-char-dog    { animation-delay: 0s; width: 150px;}
.illus-char-rocket { animation-delay: 1s; width: 200px;}
.illus-char-ufo    { animation-delay: 2s;}
.illus-char-paper    { animation-delay: 3s; width: 100px;}



.scrol-link a{
	color: #fff;
	font-size: 18px;
	margin-top: 50px;
	display: block;
}
/* 矢印の親（位置を調整するぜ） */
.scroll-arrow {
    display: inline-block;
    position: relative;
    width: 20px;  /* 矢印の横幅 */
    height: 30px; /* 矢印エリアの高さ */
    margin-top: 10px; /* 文字との隙間 */
}

/* 2本の矢印に共通の設定（L字を作って回す！） */
.scroll-arrow::before,
.scroll-arrow::after {
    content: "";
    position: absolute;
    left: 0;
    width: 14px;  /* L字の長さ */
    height: 14px; /* L字の長さ */
    border-bottom: 2px solid #fff; /* ★矢印の線（白） */
    border-right: 2px solid #fff;  /* ★矢印の線（白） */
    
    /* これでL字を45度回して、下向きの矢印にするぜ */
    transform: rotate(45deg); 
}

/* ★1本目（上側）の位置調整 */
.scroll-arrow::before {
    top: 0;
}

/* ★2本目（下側）の位置調整 */
.scroll-arrow::after {
    top: 8px; /* 1本目から8px下げて重ねる */
}
/* 1. アニメーションの内容を決める（ふわっと消えて、ふわっと出る） */
@keyframes flash {
  0% { opacity: 1; }   /* 最初はハッキリ */
  50% { opacity: 0.2; } /* 途中で薄くなる */
  100% { opacity: 1; }  /* またハッキリ戻る */
}

/* 2. 矢印にそのアニメーションを適用する */
.scrol-link {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 30px;
    margin-top: 10px;
    animation: flash 2.5s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); } /* 5pxだけ下に下がる */
}

.scroll-arrow {
    /* rotate(45deg) は矢印の形を作るのに使ってるから、
       もしさっきの「L字回転」方式なら、ここも調整が必要だぜ！ */
    animation: bounce 1.2s infinite ease-in-out;
}
/* ::before（1本目）と ::after（2本目）に別々にアニメーションをかける */
.scroll-arrow::before {
    animation: flash 1s infinite;
}
.scroll-arrow::after {
    animation: flash 1s infinite 0.5s; /* 0.5秒遅らせる！ */
}

@media screen and (max-width: 500px) {
.message-area h2 {
	font-size: 3.0rem;
	}
.environment .en, .recruitment .en {
        font-size: 1.5rem;
    }	
@media screen and (max-width: 50em) {
.illus-char-dog    { animation-delay: 0s; width: 100px; left: 3%; bottom: 14%;}
.illus-char-rocket { animation-delay: 1s; width: 120px; right: 13%; top: -780px;}
.illus-char-ufo    { animation-delay: 2s;}
.illus-char-paper    { animation-delay: 3s; width: 80px; left: 15%; bottom: 9%;}	
	}	
/*.illus-cloud-r1 , .illus-cloud-r2 {
    width: 45%;
}
.illus-cloud-r1{
	left: -12%;
}*/
/*.illus-cloud-r2{
	right: -12%;
	top: 18%;
}
.illus-cloud-r3 {
    left: -7%;
    bottom: 26%;
}
.illus-cloud-r4 {
    right: 0%;
    bottom: 20%;
}*/
/*.illus-char-paper {
    left: 22%;
    bottom: 12%;
}
.illus-char-ufo {
    right: 2%;
    bottom: 25%;
}
.illus-char-dog {
    left: 0%;
    bottom: 17%;
}
.illus-char-rocket {
    right: 18%;
    top: -830px;
}	
.illus-cloud-r3 , .illus-cloud-r4 {
    width: 30%;
}	
.illus-char-dog , .illus-char-ufo , .illus-char-paper , .illus-char-rocket {
    width: 25%;
}*/	
}





/* メインコンテンツ*/
.main-contents-area{
	max-width: 1500px;
	margin: 0 auto;
	scroll-margin-top: 100px;
}

.zure-text {
    position: relative;
    font-size: 80px;
    color: transparent;           /* 表の文字は透明（線だけにする） */
    -webkit-text-stroke: 2px #169d88;
    z-index: 1;
}
.zure-text::after {
    content: attr(data-text);      /* HTMLのdata-textの中身を表示 */
    position: absolute;
    top: 5px;                      /* ★5px下にズラす */
    left: 5px;                     /* ★5px右にズラす */
    color: #47d4be;                /* 塗りの色 */
    -webkit-text-stroke: 0;        /* 塗りの方には線をつけない */
    z-index: -1;                   /* 線の下に潜り込ませる */
}
.main-contents-area .company{
	background-image: url("../images/company-icon-yellow.png");
	background-repeat: no-repeat;
	background-position-y: center;
	background-size: contain;
}
.main-contents-area .work{
	background-image: url("../images/work-icon-yellow.png");
	background-repeat: no-repeat;
	background-position-y: center;
	padding: 10px 0 0 110px;
	width: fit-content;
	background-size: contain;
}

.main-contents-area .environment{
	background-image: url("../images/environment-icon-yellow.png");
	background-repeat: no-repeat;
	background-position-y: center;
	width: fit-content;
    background-size: contain;	
}
.main-contents-area .recruitment{
	background-image: url("../images/recruitment-icon-yellow.png");
	background-repeat: no-repeat;
	background-position-y: center;
	width: fit-content;
    background-size: contain;	
}
.flex-area , .flex-area_02{
	width: 100%;
	margin: 0 auto 100px;
	clear: both;
	align-items: center;
    justify-content: center;
    display: flex;
}
.no-flex-area{
	width: 100%;
	margin: 0 auto 100px;
	text-align: center;
}
.main-contents-area .no-flex-area .main-contents-img{
	width: 100%;
	position: relative;
}
#office{
	margin: -150px auto 100px;
	background-image: url("../images/office-bg.svg");
	background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
	padding: 150px 0 50px;
}
#office .flex-area , #surrounding-information .flex-area{
	margin: 0 auto;
}
#surrounding-information .sub-title {
    font-family: 'Zen Maru Gothic', sans-serif;
}
#benefits{
	margin: 0 auto 100px;
}
#office p{
	color: #169d88;
	font-size: 20px;
    line-height: 1.5em;	
}
.main-contents-area .no-flex-area .main-contents-img::before{
	content: '';
	background-image: url("../images/space-dog_02.png");
	background-repeat: no-repeat;
	position: absolute;
	top: -150px;
    right: 28px;
    width: 130px;
    height: 170px;
}
@media screen and (max-width: 50em) {
.main-contents-area .no-flex-area .main-contents-img::before{
	background-image: none;
	}}
.no-flex-area h2{
	width: 49%;
}
.left-box{
	width: 50%;
	position: relative;
	margin: 20px;
}
.left-box_02{
	width: 50%;
	position: relative;
	margin: 0 0 0 110px;
}
.main-contents-img{
	width: 80%;
	margin: 0 auto;
}
.main-contents-img img{
	width: 100%;
}
.right-box{
	width: 40%;
	margin: 40px 0 40px 40px;
}
.right-box_02{
	width: 39%;
	margin: 40px 40px 40px 0;
}
.right-box p , .right-box_02 p{
	font-size: 20px;
	color: #169d88;
	line-height: 1.5em;
	margin-bottom: 100px;
	font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 400;
}
.more-btn-area{
	text-align: right;
}
.more-btn{
	position: relative;
	width: 200px;
	display: inline-block;
	text-align: center;
}
.more-btn a::before{
	content: '';
	position: absolute;
	background-color: #fff;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	right: 10px;
}
.more-btn a::after{
	content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-top: 2px solid #169d88;
    border-right: 2px solid #169d88;
    transform: rotate(45deg);
    right: 17px;
    top: 40%;
}
.more-btn a{
	display: block;
	color: #169d88;
	font-weight: bold;
    font-size: 18px;
	background-color: #ffb430;
	padding: 10px;
	border-radius: 100px;
	transition: background-color 0.3s ease;
}
.more-btn :hover{
	background-color: #47d4be;
	padding: 10px;
	border-radius: 100px;	
	color: #fff;
	
}
.clear{
	clear: both;
}


/* アニメーションの定義：0度から360度まで回るぜ */
@keyframes rotate-right {
    0% {
        transform: rotate(0deg); /* スタートは0度 */
    }
    100% {
        transform: rotate(360deg); /* 1周して360度 */
    }
}
@keyframes rotate-left {
    0% {
        transform: rotate(0deg); /* スタートは0度 */
    }
    100% {
        transform: rotate(-360deg); /* 1周して360度 */
    }
}

/* 回したいイラストに適用 */
.illus-gear_01{
    /* ★ここが超重要！ */
    position: absolute;      /* 配置はabsoluteで自由な場所に */
    
    /* 中心を軸にして回す魔法！
      これがないと、左上角を軸にして回っちゃったりするぜ 
    */
    transform-origin: center; 

    /* アニメーションの発動！ */
    animation: rotate-right 10s linear infinite; /* 歯車だから10秒くらいでゆっくり回すとリアルだぜ */
}

/* 回したいイラストに適用 */
.illus-gear_02{
    /* ★ここが超重要！ */
    position: absolute;      /* 配置はabsoluteで自由な場所に */
    
    /* 中心を軸にして回す魔法！
      これがないと、左上角を軸にして回っちゃったりするぜ 
    */
    transform-origin: center; 

    /* アニメーションの発動！ */
    animation: rotate-left 10s linear infinite; /* 歯車だから10秒くらいでゆっくり回すとリアルだぜ */
}
.illus-gear_01{
	bottom: 3%;
    left: -2%;
	width: 23%;
}
.illus-gear_02{
	top: 0%;
    right: 0%;
    width: 25%;
}
.illus-gear_01 img , .illus-gear_02 img{
	width: 100%;
}


h2 {
  display: inline-flex;
  align-items: center; /* 縦方向の真ん中揃え */
  position: relative;
  font-family: 'Arial Black', sans-serif; /* 太めのフォント */
  color: #1eb287; /* 絶妙なエメラルドグリーン */
  padding: 10px 0;
	text-align: left;
font-weight: bold;
	position: relative;
}
h2.company , h2 .work , h2 .environment,h2 .recruitment h2 {
    display: flex;
    flex-direction: column; /* 縦に並べる（これで右に飛ばない！） */
    align-items: flex-start; /* 左端に揃える */
    padding: 0 0 10px 110px;
    position: relative;
    width: fit-content; /* 中身の幅に合わせる */
}
.work{
	display: block;
	padding: 0 0 10px 110px;
}
.environment{
	display: block;
	padding: 20px 0 10px 110px;
}
.recruitment{
	display: block;
	padding: 20px 0 10px 110px;
}
/* 上段のCOMPANY */
.en {
    font-size: clamp(2.5rem, 8vw + 1rem, 3.5rem);
	font-family: 'Arial Black', sans-serif;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 5px; /* 下段との隙間 */
}
.environment .en{
	font-size: 3.5rem;
}

/* 下段のエリア（線 ＋ 企業を知る） */
.jp {
    display: flex;
    align-items: center;
    width: 100%; /* これで親の幅いっぱいに広がる */
    
    /* absoluteは消すぜ！これがあると線が計算できなくなるんだ */
    position: relative; 
    
    font-size: 1.9rem;
    font-weight: bold;
    color: #1eb287;
	font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 500;
}
.work .jp{
	width: 100%;
}
.environment .en{
	font-size: clamp(2.5rem, 8vw + 1rem, 2.3rem);
}

/* 左側の細いライン */
.jp::before {
    content: "";
    flex-grow: 1; /* ★これで余った左側のスペースを全部「線」にする！ */
    height: 2px;
    background-color: #1eb287;
    margin-right: 15px; /* 文字との間の余白 */
}
#job{
	margin: 100px 0 200px;
}
#job p{
	font-size: 20px;
	color: #169d88;
	line-height: 1.5em;
}
.schedule-section {
    padding: 60px 0;
    background-color: #fff; /* 背景は白か、薄いグレーがおすすめ */
}

.schedule-container {
    max-width: 800px;
    margin: 0 auto;
}

.schedule-item {
    display: flex;
    align-items: center; /* 縦方向を中央揃えにするならこれ */
    position: relative;
    border-radius: 10px;
    margin-bottom: 20px;
	padding: 20px;
}

/* 時間の部分 */
.schedule-time {
    width: 120px;
    font-size: 25px;
    color: #16a88d;
    flex-shrink: 0;
    padding: 60px 10px 60px 0;
    text-align: center;
    border-right: dotted;
	font-family: 'Arial Black', sans-serif;
    font-weight: 900;
}
/* 奇数番目の「中身」を黄色に */
.schedule-item:nth-child(odd){
    background-color: #fffaab;
}

/* 偶数番目の「中身」を水色に */
.schedule-item:nth-child(even) {
    background-color: #b4fdf2;
}

.schedule-item:not(:first-of-type)::before {
    content: '';
    position: absolute;
    top: -20px; /* 自分の箱の20px上から */
    left: 75px;
    display: block;
    height: 20px; /* 隙間のmargin-bottomと同じ高さにする */
    width: 8px;
    background: #169d88;
    z-index: 1; /* 箱より後ろに一応下げておくぜ */
}
/* 縦線を引くエリア（沿革の時の技だぜ！） */
.schedule-line-area {
    width: 0;
    display: flex;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}


/* 内容の部分 */
.schedule-content {
    flex-grow: 1;
    z-index: 2;
    /* transitionを入れると、もしホバーとかさせた時にメロいぜ */
    transition: all 0.3s ease;
	margin-left: 20px;
}
.schedule-title {
    font-size: 18px;
    font-weight: bold;
    color: #16a88d;
    margin: 0 0 8px 0;
}

.schedule-text {
    font-size: 15px;
    line-height: 1.6;
    color: #16a88d;
    margin: 0;
}
#interview{
	margin-bottom: 100px;
}
.profile-area{
	display: flex;
    margin-bottom: 50px;	
}
.l-img{
	width: 40%;
}
.l-img img{
	width: 100%;
}
.profile-box{
    width: 50%;
    margin: 0 auto;
}
.profile-box h4{
	color: #c1c1c1;
	font-family: 'Arial Black', sans-serif;
	font-size: 2.0em;
}
.profile-box p{
	color: #169d88;
	font-size: 20px;
	line-height: 1.5em;
}
.profile-box .name{
	font-size: 2.0em;
	font-weight: bold;
	border-bottom: solid 1px;
	margin: 10px 0;
	padding-bottom: 5px;
}

/* インタビュー全体を囲む dl にカウンターをセット */
dl {
  counter-reset: question-count; /* カウンターをリセット */
}

.interview-box {
  position: relative; /* Qラベルの配置の基準にする */
  margin-bottom: 60px;
}

/* Qラベルの見た目（dtの前に出すぜ） */
.interview-box .question {
  background-color: #169d88;	
  position: relative;
  padding: 20px 20px 20px 90px; /* Qのラベルが入るスキマを空ける */
  font-size: 25px;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: center;
  min-height: 50px;
  margin-bottom: 40px;
  border-radius: 10px;
}

.interview-box .question::before {
  /* カウンターを1ずつ増やす */
  counter-increment: question-count;
  /* 「Q」＋「数字」を表示 */
  content: "Q" counter(question-count);
  
  /* 見た目の装飾（画像に合わせて調整してな！） */
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 40px;
  background-color: #ffffff; /* よごご好みのイエロー */
  color: #16a88d;
  border-radius: 20px; /* 角丸でポップに */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-weight: 900;
  font-size: 18px;
}
.interview-box .answer{
	display: flex;
	margin: 0 auto 50px;
    justify-content: center;
    align-items: center;	
}
.icon-area img{
	width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
}
.balloon {
    position: relative;
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 10px;
    width: 90%;
    border: solid 2px #169d88;

}
.balloon::before {
    content: '';
    position: absolute;
    left: -10px;
    border: 10px solid transparent;
    border-right-color: #169d88;
    border-left: none;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}
.balloon::after {
    content: '';
    position: absolute;
    left: -7px;
    border: 10px solid transparent;
    border-right-color: #FFFFFF;
    border-left: none;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}
.balloon-text{
	font-size: 20px;
	line-height: 1.5em;
}
.orange{
	color: #ff6600;
	font-weight: bold;
}
.large-text{
	font-size: 30px;
}
#surrounding-information .main-area_02 .flex-area .right-box img{
	width: 100%;
    margin: 20px 0;
}
#surrounding-information{
	margin: 100px auto;
}
.surrounding{
	margin: 0 auto 100px;
	border-collapse: separate; /* 境界線を分離するモードにするぜ */
  	border-spacing: 0 15px;     /* 横のスキマを0、縦のスキマを15pxにする */	
	background-image: url("../images/footprints_2.png");
	background-repeat: no-repeat;
	background-position: right bottom;
}
.surrounding th{
	background-color: #169d88;
	padding: 10px;
	border-radius: 100px;
	color: #fff;
	text-align: center;
	margin-bottom: 10px;
}
.surrounding td{
	padding: 10px 20px;
}
.access {
	display: flex;
	grid-gap: 10px;
    width: 100%;
    margin: 0 auto;
    border-radius: 15px; /* ★よごごのサイトに合わせて角を丸くするとポップでメロい！ */
    overflow: hidden;    /* これを入れないと角丸からマップがはみ出ちゃうぜ */
    box-shadow: 0 8px 24px rgba(0,0,0,0.08); /* ほんのり上品な影 */
	background-color: #169d88;
	padding: 30px;
}

.address{
	width: 48%;
	color: #fff;
	font-size: 20px;
	line-height: 1.5em;
	margin-bottom: 0;
}
.station-img{
	width: 24%;
	
}
.station-img img{
	width: 100%;
}
.access-map{
	width: 25%;
}
/* 中のiframe（マップ本体）を箱にピッタリ合わせる */
.access-map iframe{
    width: 100% !important; 
	height: 200px;
}
.benefits-list{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;	
}
.benefits-item{
	flex-basis: 30%;
	margin: 20px auto;
	text-align: center;
	font-size: 18px;
	line-height: 1.5em;
}
.benefits-item p{
	color: #00ada9;
	text-align: left;
	font-size: 18px;
}
.requirement-box{
	width: 100%;
	margin: 100px auto 20px;
}
.requirement-box dt{
	background-color: #169d88;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	padding: 10px 0;
	text-align: center;
}
.requirement-box dd{
	font-size: 18px;
	line-height: 1.5em;
	padding: 20px;
	border: solid 1px #169d88;
	margin: 0;
	color: #169d88;
}
#portrait{
	margin: 100px auto;
}
#faq .sub-title{
	position: relative;
}
#faq .sub-title::after{
	position: absolute;
	content: '';
	width: 100px;
	height: 100px;
	background-image: url("../images/astronaut_02.png");
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 20px;
}
#faq .question {
    display: flex;
    align-items: center;
    padding: 15px 50px 15px 15px;
    cursor: pointer;
    position: relative;
    word-break: break-all;
    font-weight: bold;
    color: #169d88;
    text-align: left;
    font-size: 18px;
    line-height: 1.5em;
	border-bottom: solid 1px #169d88;
}
#faq .question::before {
	content: '';
    width: 20px;
    height: 20px;
	background-image: url("../images/Q-icon.png");
	background-size: contain;
	background-repeat: no-repeat;
    padding: 10px;
    margin-right: 10px;
    justify-content: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
#faq .question::after {
    content: "";
    position: absolute;
    top: 35%;
    right: 20px;
    width: 20px;
    height: 20px;
    border-right: 3px solid #169d88;
    border-bottom: 3px solid #169d88;
    box-sizing: border-box;
    transform: rotate(45deg);
    transition: top 0.4s ease-out, transform 0.4s ease-out;	
}
#faq .answer {
    color: #169d88;
    text-align: left;
    position: relative;
    display: flex;
    align-items: baseline;
    font-size: 18px;
    line-height: 1.5em;
    padding: 15px;
	margin: 0 0 30px;
	display: none; /* ★これが足りなかったぜ！ */
    overflow: hidden;
	align-items: center;
}
#faq .answer::before{
	content: '';
    width: 20px;
    height: 20px;
	background-image: url("../images/A-icon.png");
	background-size: contain;
	background-repeat: no-repeat;
    padding: 10px;
    margin-right: 10px;
    justify-content: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
#faq .is-open .answer {
    display: flex!important;
}

#faq  .is-open .question::after {
   transform: translateY(-50%) rotate(220deg);
}

@media screen and (max-width: 1500px) {
.main-contents-area {
	max-width: 90%;
	}
}
@media screen and (max-width: 900px) {
	
.flex-area , .flex-area_02{
	display: flex;
    flex-direction: column; /* 普通の縦並び */
}	
.left-box,.right-box,.left-box_02,.right-box_02{
	width: 90%;
	margin: 0 auto 0;
	
	}
.right-box p, .right-box_02 p {
    margin-bottom: 40px;
}

  .right-box_02 {
    order: 2;
  }

  .left-box_02 {
    order: 1;
  }	
.main-contents-area .company, .main-contents-area .work,.main-contents-area .environment,.main-contents-area .recruitment{
    background-size: 70px;
	padding: 10px 0 0 65px;
}
.en {
    font-size: 2.0rem;
}
.jp {
    font-size: 1.2rem;
}
.environment .en , .recruitment .en{
    font-size: 1.5rem;
}
	
.no-flex-area {
    width: 90%;
    margin: 0 auto 100px;
    text-align: left;
}
.more-btn {
    width: 150px;
}

	
}




/*その他のコンテンツ*/
.more-contents-area{
	background-color: #f6f6f6;
	background-image: url("../images/basis-bg.png");
	background-size: 50%;
}
.more-contents-area h2{
	text-align: center;
	display: block;
	font-size: 50px;
}
.more-contents-title span{
	position: relative;
}
.more-contents-title span::before{
	content: '';
    background-image: url(../images/alien-02.png);
    background-repeat: no-repeat;
    background-size: 60%;
    position: absolute;
    width: 130px;
    height: 140px;
    left: -70%;
    top: -40%;
}
.contents-btn-box{
	max-width: 1200px; /* widthじゃなくmax-widthにするのがレスポンシブのコツ！ */
    width: 100%;
    margin: 0 auto;
	padding: 10px 0 100px;
}
.contents-btn-box .flex-box{
	display: flex;
    flex-wrap: wrap;    /* ★入りきらなくなったら次の行へ！ */
    justify-content: center; /* 中央寄せ */
    list-style: none;
    padding: 0;
	width: 95%;
	margin: 0 auto;
}
.contents-btn{
	background-color: #fff469;
    padding: 30px 15px 15px;
    border-radius: 30px;
    width: calc(33.333% - 30px); /* 3列：余白(margin:15px)を引いた計算 */
    margin: 15px;
    border-bottom: 10px solid #c5b04d;
    transition: 0.2s;
    position: relative;
    box-sizing: border-box; /* パディングを含めた幅計算にするぜ */
	text-align: center;
}
.contents-btn:hover{
	border-bottom: none;
	margin-top: 30px;
}
.contents-btn a{
	display: block;
}
.contents-btn img{
	width: 50%;
	margin: 0 auto 10px;
}
.contents-btn p{
	font-size: 25px;
	font-weight: bold;
	color: #169d88;
}
.triangle {
    width: 30px;  /* 三角形の底辺の長さ */
    height: 30px; /* 三角形の高さ */
    background-color: #169d88; /* さっきの緑色にするぜ */
    
    /* 左下、右下、右上の3点を結んで切り抜く魔法！ */
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
	position: absolute;
	bottom: 15px;
	right: 15px;
}
/* --- タブレット・スマホ（2列にする魔法！） --- */
@media screen and (max-width: 900px) { /* 画面幅が900px以下の時 */
    .contents-btn {
        width: calc(50% - 30px); /* ★50%にすれば、自動で2列に並ぶぜ！ */
    }
}
/* --- スマホ（1列にする場合） --- */
@media screen and (max-width: 550px) {
    .contents-btn {
        width: calc(50% - 30px); /* 1列：100%にする */
    }
	.triangle {
    width: 15px;
    height: 15px;		
}
	.contents-btn img {
    width: 80%;
    margin: 0 auto;
}
.contents-btn {
    padding: 20px 20px 15px;
    width: calc(54% - 30px);
    margin: 5px;
}
.more-contents-area h2 {
    text-align: center;
    display: block;
    font-size: 2.5rem;
}
	
}




/*↓footer*/
footer{
	background-color: #47d4be;
}
.bg-server{
	height: 155px;
	background-image: url("../images/server-line.png");
	background-repeat: repeat-x;
}
.btn-area{
	display: flex;
}
.btn-area_2{
	display: flex;
    width: 50%;
    margin: 0 auto 100px;
}
.recruitment-btn{
	font-weight: bold;
	color: #fff;
	font-size: 30px;
	width: 45%;
	position: relative;
}
.recruitment-btn a{
	display: block;
	background-color: #2d5a88;
	padding: 20px 0;
	border-radius: 10px;
}
.recruitment-btn::before{
	content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    right: 50px;
    top: 45%;
}
.entry-btn{
	font-weight: bold;
	color: #fff;
	font-size: 30px;
	width: 45%;
	position: relative;
}
.entry-btn a {
	display: block;
	background-color: #ffb430;
	padding: 40px 0;
	border-radius: 10px;
}
.entry-btn::before{
  content: "";
  display: inline-block;
  width: 30px;  /* 画像と同じサイズにするだけ */
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 15px;
  background-image: url("../images/blank-icon-white.png");
  position: absolute;
  right: 40px;
  top: 32%;
	
}
.menu .entry-btn{
	font-weight: bold;
	color: #fff;
	font-size: 30px;
	width: 45%;
	position: relative;
}
.menu .entry-btn a {
	display: block;
	background-color: #ffb430;
	padding: 25px 0;
	border-radius: 10px;
}
.menu .entry-btn::before{
  content: "";
  display: inline-block;
  width: 20px;  /* 画像と同じサイズにするだけ */
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 15px;
  background-image: url("../images/blank-icon-white.png");
  position: absolute;
  right: 40px;
  top: 32%;
	
}
.recruitment-btn a {
    display: block;
    background-color: #2d5a88;
    padding: 20px 0;
    border-radius: 10px;
    padding: 40px 0;
}
.footer-nav{
	width: 95%;
	margin: 0 auto;
}
.footer-list-box{
	width: 20%;
    float: left;
	margin-right: 5%;
}
.footer-list{
	margin-top: 20px;
}
.footer-list li{
	font-size: 20px;
	color: #30535c;
	text-align: 1.5rem;
	margin-bottom: 10px;
	position: relative;
	padding-left: 20px;
	font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 400;
}
.footer-list li::before{
	content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 1px solid #30535c;
    border-right: 1px solid #30535c;
    transform: rotate(45deg);
    left: 0;
    top: 25%;
}
.footer-list-title{
	font-size: 30px;
	font-weight: bold;
	color: #30535c;
	display: flex;
  	align-items: center; 
	border-bottom: solid 1px #30535c;
	padding-bottom: 5px;
}
.footer-list-title a{
	font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 700;
}
.footer-list-title::before{
  content: "";
  display: inline-block;
  width: 40px;  /* 画像と同じサイズにするだけ */
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 15px;
}
.company-icon::before{
 background-image:url("../images/company-icon.png");	
}
.work-icon::before{
 background-image:url("../images/work-icon.png");	
}
.environment-icon::before{
 background-image:url("../images/environment-icon.png");	
}
.recruitment-icon::before{
 background-image:url("../images/recruitment-icon.png");	
}
#pageTop{
		position: fixed;
  right: 10px;  /* 右端からの距離 */
  bottom: 30px; /* 下端からの距離 */
  z-index: 9998;
  width: 150px;
  text-align: center;	
}
#pageTop a{

}
#pageTop a img{
	width: 100%;
	filter: drop-shadow(0 10px 15px rgba(0,0.1,0,0.1));
}
.btn-area{
	text-align: center;
	padding-top: 0;
	display: flex;
    gap: 50px;
    justify-content: center;
    margin: 60px auto;
	align-items: center;
}
.contact-btn , .corporate-btn{
	background-color: #fff;
    width: 50%;
    padding: 20px;
    color: #30535c;
    font-weight: bold;
    border-radius: 100px;
    font-size: 20px;
    text-align: center;
    position: relative;
    margin: 10px;
}
.contact-btn a {
    display: flex;             /* ★横並びにする魔法 */
    align-items: center;      /* 上下の中央揃え */
    justify-content: center;  /* 左右の中央揃え */
    text-decoration: none;
    color: inherit;
    gap: 10px;               /* ★文字とアイコンの「隙間」を固定！ */
    position: relative;
    width: 50%;
    margin: 0 auto;
	line-height: 1.5em;
	
}
.corporate-btn a {
    display: flex;             /* ★横並びにする魔法 */
    align-items: center;      /* 上下の中央揃え */
    justify-content: center;  /* 左右の中央揃え */
    text-decoration: none;
    color: inherit;
    gap: 5px;               /* ★文字とアイコンの「隙間」を固定！ */
    position: relative;
    width: 60%;
    margin: 0 auto;
	
}
.corporate-btn {
	padding: 20px 0px 20px 20px;
}
.contact-btn {
	padding: 20px 0px 20px 30px;
}
.menu .contact-btn a, .menu .corporate-btn a {
	position: relative;
	font-size: 9px;
	line-height: 1.5em;
}
.contact-btn ::before {
    content: "";
    display: inline-block;
    width: 20px;   /* アイコンのサイズ */
    height: 20px;
    background-image: url("../images/contact-icon.png");
    background-size: contain;
    background-repeat: no-repeat;
	margin-top: 7px;
}
.contact-btn ::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #30535c;
    border-right: 2px solid #30535c;
    transform: rotate(45deg);
    margin-left: auto; /* ★これを入れると矢印だけ右端に踏ん張ってくれる */
}
.corporate-btn ::after{
  background-image: url("../images/blank-icon-green.png");
    content: "";
    display: inline-block;
    width: 15px;   /* アイコンのサイズ */
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;	
}
.copyright{
	background-color: #30535c;
	padding: 10px 0;
	text-align: center;
	color: #fff;
	font-size: 12px;
	margin-top: 20px;
}
#history{
	margin: 100px auto;
}
.history-graph{
	position: relative;
}
.history-graph::after{
	content: '';
	background-image:url("../images/footprints.png");
	background-repeat: no-repeat;
	position: absolute;
    bottom: 10px;
    right: 0;
    width: 140px;
    height: 260px;
    background-size: contain;
}

.history-item {
	display: flex;
    align-items: flex-start;
    position: relative; /* ★重要：ここを基準にする */
    /* アイテム同士の余白はmarginじゃなくpaddingで調整するのがコツ */
    padding-bottom: 40px;
}
.history-item::before {
    content: "";
    position: absolute;
    /* ドットの真ん中の位置（左から20pxくらいの場所）に線を固定 */
    left: 119px; /* .history-date(100px) + 余白 を考慮して微調整してな */
    top: 0;
    bottom: 0;   /* ★これで親要素の高さ分、100%線が引かれる！ */
    width: 2px;
    background-color: #16a88d;
    z-index: 1;
}
/* 年月の幅を固定 */
.history-date {
  width: 100px;
  font-size: 14px;
  color: #16a88d;
  flex-shrink: 0;         /* 画面が狭くなっても潰れないように */
  padding-top: 4px;       /* ○の高さに合わせて微調整 */
}

.history-dot-area {
    width: 40px;
    display: flex;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    z-index: 2; /* 線より前に出す */
}

/* ○のスタイル */
.dot {
  width: 12px;
  height: 12px;
  background-color: #16a88d;
  border-radius: 50%;
  z-index: 2;
}

/* 黄色の大きな○はクラスで分ける */
.dot.large {
  width: 18px;          /* 丸の大きさ（よごごの好みで調整してな） */
  height: 18px;
  background-color: #ffff88; /* 中の黄色 */
  
  /* ★ここが「縁」の正体！ */
  border: 3px solid #16a88d; /* 太さと色を指定するぜ */
  
  border-radius: 50%;   /* これで正円にする */
  box-sizing: border-box; /* 縁の太さをサイズに含める魔法 */
  
  z-index: 2;           /* 線より前に出す */
  position: relative;
}

/* 最初のアイテムの「ドットより上」の線を消す */
.history-item:first-child::before {
    top: 15px; /* ドットの高さに合わせる */
}

/* 最後のアイテムは線を引かない、もしくはドットで止める */
.history-item:last-child::before {
    height: 15px; /* ドットの位置で止める */
    bottom: auto;
}

/* テキスト部分 */
.history-content {
  flex-grow: 1;           /* 残りの幅を全部使う */
  padding: 0 0 10px 10px;
}

.history-content .title {
  font-weight: bold;
  color: #16a88d;
  margin: 0;
  font-size: 20px;	
}
.sub-text{
	margin: 0;
	color: #16a88d;
}
#history,#company-profile{
	margin: 100px 0;
}

@media screen and (max-width: 53em)
{
.bg-server {
    background-size: 200%;
	height: 80px;
}
#pageTop {
    width: 70px;
}
.main-title {
    padding: 30px 0 30px 20px;
    width: 290px;
}
#surrounding-information .sub-title {
    display: block;
    text-align: center;
    font-size: 2.2em;
    line-height: 1.2em;
}	
.en-1 {
    font-size: 30px;
}
#job-description h2 .en-1 , #job-description h2 .en-2 , #requirement .en-1 , #requirement .en-2 {
	font-size: 40px;
}
#job-description .main-title::before , #requirement .main-title::before{
	width: 115%;
}
#office {
	background-size: cover;
	padding: 0;
}	
#office .en-1 , #benefits .en-1{
        font-size: 30px;
    }	
	#office .main-title {
		margin-top: 170px;
	}	
.en-2 {
    font-size: 30px;
}
.line-with-jp {
    display: flex;
    align-items: center;
    flex-grow: 1;
    font-size: 13px;
    white-space: nowrap;
}	
.btn-area {
    display: block;
	}
.recruitment-btn {
    width: 95%;
    margin: 50px auto 30px;
	font-size: 25px;
}
.entry-btn {
     width: 95%;
     font-size: 25px;
     margin: 30px auto 30px;
}	
.recruitment-btn a {
    display: block;
    background-color: #2d5a88;
    border-radius: 10px;
}
.recruitment-btn::before {
    top: 38%;
}	

/*.entry-btn a {
    display: block;
    background-color: #ffb430;
    padding: 25px 0;
    border-radius: 10px;
	text-align: center;
}*/
.entry-btn::before {
    width: 20px;
    height: 20px;
    right: 30px;
    top: 32%;
}	
.footer-list-box {
    width: 95%;
    float: none;
    margin: 0 auto 30px;
}
.footer-list-title {
	font-size: 25px;
}	
	
.btn-area_2 {
    display: flex;
    width: 95%;
    margin: 0 auto;
}	


.corporate-btn ::before {
    width: 12px;
    height: 12px;
    position: absolute;
    right: -15px;
	margin: 0;
}
.corporate-btn ::after {
    width: 15px;
    height: 15px;
}
.menu .corporate-btn ::after {
    width: 15px;
    height: 17px;
}
.history-graph::after {
    content: '';
    background-image: url(../images/footprints.png);
    background-repeat: no-repeat;
    position: absolute;
    bottom: -240px;
    right: 30%;
    width: 80px;
    height: 270px;
    background-size: contain;
}
.sarvis-title {
    text-align: center;
    font-weight: bold;
    font-size: 2em;
    color: #c1c1c1;
    margin: 0 0 100px;
}
.left-banner a img {
    margin-right: auto;
    margin-bottom: 50px;
    width: 80%;
}	
.right-banner a img {
    margin-left: auto;
    margin-bottom: 50px;
    width: 80%;
}

.vision-icon-box img{
	width: 30%;
}
.run-img-box img{
	width: 80%;
}
#interview .sub-title , #schedule .sub-title{
    font-size: 3.0em;
}
.interview-box .question{
	font-size: 20px;
}	
.sub-title-icon img{
	width: 40%;
}	
.profile-area {
    display: block;
}
.l-img , .profile-box{
    width: 100%;
	margin: 0 auto;
}	
.interview-box .answer {
    display: block;
}
.icon-area img {
    margin: 0 0 20px 0;
}	
.balloon{
	width: 100%;
}
.balloon::before {
        /* 1. PC用の設定をしっかりリセット */
        border-right-color: transparent; /* 右の色を消す */
        border-left: 10px solid transparent; /* 消されていた左のボーダーを復活！ */
        transform: none; /* 縦中央揃えをリセット */
        
        /* 2. スマホ用（上向き）の設定 */
        border-bottom-color: #169d88; /* 下側に緑を入れて上を向かせる */
        border-top: none; /* 上のボーダーは不要 */
        
        /* 3. 位置を「左」から「真上の真ん中」へ */
        top: -10px; 
        left: 35px; /* アイコンの中心（50px付近）に合わせてな！ */
    }	
/* --- 内側の白い背景用の角 --- */
    .balloon::after {
        /* 1. PC用の設定をしっかりリセット */
        border-right-color: transparent;
        border-left: 10px solid transparent; /* 復活！ */
        transform: none;
        
        /* 2. スマホ用（上向き）の設定 */
        border-bottom-color: #FFFFFF; /* 中身と同じ白 */
        border-top: none;
        
        /* 3. 位置を「真上」へ（beforeより2px下に下げるのが枠線を綺麗に見せるコツ） */
        top: -8px; 
        left: 35px; /* beforeと同じ横位置 */
    }	
#office .flex-area{
	margin-bottom: 30px;
}	
#office .left-box_02{
	order: 2;
}
#office .right-box_02{
	order: 1;
}	
#surrounding-information .lead-text {
    font-size: 18px;
    margin: 50px auto;
}	
#surrounding-information .flex-area .left-box img{
	width: 100%;
}	
.access{
	display: block;
}	
.access-map{
	width: 100%;
}	
.address , .surrounding , .station-img{
	width: 100%;
    margin-bottom: 20px;
    background-size: 20%;
}	
.benefits-item {
	flex-basis: 45%;
}
.benefits-item img{
	width: 100%;
}	
}










.icon{
	height: 50px;
	width: auto;
	margin: 10px 0;
}
h4{
	font-weight: bold;
	text-align: left;
	font-size: 20px;
    margin: 15px auto;
	color: #169d88;
}
p{
	color: #169d88;
    line-height: 1.5em;
}

header section{
	margin: 0;
}
section{
	width: 100%;
	margin: 0 auto;
	text-align: left;
}
.link-deco{
	color: blue;
}
.mv-area{
	width: 100%;
	margin: 100px auto 0;
	background-image: url("img/202512/plaid-pattern.png");
	padding: 0;
}
.mv-area section{
	padding: 20px 0;
}
.mv{
    text-align: center;
	
}
.sub-mv{
	background: #B89E5A;
background: -webkit-linear-gradient(left, rgba(184, 158, 90, 1) 0%, rgba(242, 218, 154, 1) 48%, rgba(184, 158, 90, 1) 100%);
background: -o-linear-gradient(left, rgba(184, 158, 90, 1) 0%, rgba(242, 218, 154, 1) 48%, rgba(184, 158, 90, 1) 100%);
background: linear-gradient(to right, rgba(184, 158, 90, 1) 0%, rgba(242, 218, 154, 1) 48%, rgba(184, 158, 90, 1) 100%);
	text-align: center;
	font-size: 30px;
	padding: 30px;
	font-weight: bold;
	
}
.sub-mv .red{
	color: #bd1c1c;
	font-size: 30px;
}
.sub-mv .emphasis{
	color: #bd1c1c;
	font-size: 50px;
}
.pc{
	display: block;
}
.sp{
	display: none;
}

.icon-sp{
	display: none;
}
.mv .pc img{
	max-width: 100%;
}

.breadcrumbs {
    position: relative;
    top: 80px;
    display: flex;
    padding: 10px 0 10px 20px;
    background-color: #efefef;
    font-weight: bold;
    line-height: 1.1;
}

.lead-text .red{
	color: #bd1c1c;
	font-size: 25px;
	font-weight: bold;
	line-height: 1.5em;
}
#vps_merit{
	display: inline-block;
}
#vps_merit li .box{
	background-color: #fff;
	border-radius: 40px;
	padding: 70px 50px;
}
#vps_merit li .box .title{
	font-size: 25px;
	font-weight: bold;
	color: #18c8ce;
	margin: 10px;
}
#vps_merit li .box img{
	width: 50%;
	margin: 50px 0;
}

#ablenet_merit{
	width: 85%;
	background-color: #fff;
	clear: both;
	padding: 50px 0 100px;
}
#ablenet_merit .element-box{
	width: 1200px;
	margin: 0 auto;
}
#ablenet_merit ul{
	display: inline-flex;
	text-align: center;
	
}
#ablenet_merit ul li{
	width: 300px;
	margin: 0 auto 30px;
}
#ablenet_merit ul li img{
	width: 70%;
	margin: 10px;
}
#ablenet_merit ul li p{
	font-size: 15px;
	width: 250px;
    margin: 0 auto;
	line-height: 1.5em;
}
.q_area{
	background-color: #fff;
	border-radius: 40px;
	margin: 0 0 50px;
}



table {
	width: 100%;
    border-collapse: separate;  /* 表の線と線の間を空ける */
    border-spacing:  5px;       /* 表の線と線の間の幅 */
	margin: 0 auto;
}

th,td {
	font-weight: bold;
	font-size: 20px;
	color: #169d88;
	text-align: left;
	padding: 10px 0;
}

th {
	line-height: 1.5em;
	vertical-align: middle;
}

td {
   
}
td span{
	margin: 0 60px;
}
#setting{
	background-color: #fff;
	width: 100%;
}#setting .element-box{
	width: 1000px;
	margin: 0 auto;
}

#setting p{
	text-align: left;
	margin: 10px 0 50px;
}
#apply{
	margin: 100px auto 0;
}

a.btn-border {
  	border: 4px solid #1e1e1e;
    border-radius: 0;
    background-color: #3de5eb;
    -webkit-box-shadow: 6px 6px 0 #1e1e1e;
    box-shadow: 0px 6px 0 #1e1e1e;
    width: 500px;
    display: inline-block;
    padding: 25px;
    border-radius: 100px;
	font-weight: bold;
	font-size: 30px;
	margin: 10px 0 100px;
}

a.btn-border:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
  transform: translateY(5px);
}

.l-footer-sitemap , .l-global-footer{
	width: auto;
}
.p-vps-bg--light{
	background-color: #fff;
}
.main{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.main-area_02{
	width: 1200px;
	margin: 0 auto;
}
.contents-area{
	text-align: center;
	width: 100%;
	margin: 0;
	background-color: #ededed;
	padding: 30px 0 ;

}
.contents-area h2{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 45px;
}
.contents-area .contents{
	width: 100%;
}

.contents-area .contents a {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
    border-radius: 100px;
    width: 290px;
    margin: 10px;
    background-color: #bd1c1c;
}

.contents-area .contents a li{
    display: inline-block;
    color: #fff;
    font-weight: bold;
}

.contents-area .contents a:hover{
	opacity: 0.8;
}

h3 {
	font-size: 25px;
	font-weight: bold;
	text-align: left;
    margin: 0 auto 20px;
	color: #169d88;
	padding: 10px 20px;
	display: inline-block;
	position: relative;
}
h3::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 80%;
    transform: translateY(-50%);
    background-color: #169d88;
    border-radius: 4px;
}
.left-box p{
	font-size: 18px;
	line-height: 1.5em;
	margin: 20px auto;
	padding-left: 10px;
}
.left-box ul li{
	text-align: left;
	font-size: 18px;
	line-height: 1.5em;
	margin: 10px 0 10px 15px;;
}
.left-box ol li{
	text-align: left;
	font-size: 18px;
	line-height: 1.5em;
	margin: 10px 0 10px 30px;;
}
ol {
	text-align: left;
	margin: 0 auto;
	font-size: 20px;
    line-height: 1.5em;
}
ol li{
	list-style: auto;
}
ol li a p{
	background-color: #ff7741;
	padding: 15px;
	width: 300px;
	font-size: 25px;
	font-weight: bold;
	border: solid 3px #000;
	border-radius: 100px;
	text-align: center;
	margin: 15px auto;
}



.plan_list {
    width: 20%;
    margin: 0 auto 30px;
    border: solid 2px #bf8622;
    background-color: #bf8622;
    border-radius: 15px;
	height: auto;
}
.plan_name {
    background-color: #bf8622;
    font-weight: bold;
    text-align: center;
    font-size: 25px;
    padding: 15px;
    border-radius: 15px;
	color: #fff;
}
.plan_list dt {
    font-weight: normal; 
    text-align: center;
    padding: 5px;
    background-color: #f6f6f6;
}
.plan_list dd {
    text-align: center;
    padding: 25px;
    background-color: #ffffff;
    font-weight: bold;
}
.plan_list .red-text{
	font-size: 30px;
	color: #e73b3b;
}
.red-text small{
	font-size: 20px;
	color: #e73b3b;
}
.memory-size{
	font-size: 23px;
	color: #333333;
	margin: 0;
	display: block;
}
.memory-size small{
	font-size: 20px;
	color: #333333;
}
.application-btn {
    font-weight: bold;
    font-size: 20px;
    margin: 20px;
}
.application-btn a{
	color: #fff;
	display: block;
	position: relative;
}
.arrow-icon::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    right: 0px;
    margin-top: 4px;
}
.arrow-icon_2::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid #781212;
    border-right: 2px solid #781212;
    transform: rotate(45deg);
    right: 40px;
    top: 40%;
}
.arrow-icon_3::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    right: 35px;
	top: 27px;
}
#application-form{
	background-image: url("img/202512/plaid-pattern.png");
	width: 100%;
}
.form-box{
	width: 1200px;
    margin: 0 auto;
    text-align: left;
}
.form-box h2{
	color: #fff;
	border: none;
	text-align: center;
}
.send_btn{
	position: relative;
	width: 500px;
	margin: 0 auto;
}
.send_btn input{
	width: 100%;
	font-size: 30px;
	font-weight: bold;
	position: relative;
	border-radius: 100px;
	border: solid 4px #781212;
	background: #781212;
background: linear-gradient(180deg,rgba(238, 205, 140, 1) 44%, rgba(212, 175, 75, 1) 66%, rgba(212, 175, 75, 1) 100%);
	color: #781212;
	padding: 15px;
}
.btn , .btn_2{
	width: 500px;
	margin: 0 auto;
	position: relative;
}
.btn a{
	width: 100%;
	font-size: 25px;
	font-weight: bold;
	position: relative;
	border-radius: 100px;
	background: #781212;
	color: #fff;
	padding: 20px 0;
	display: inline-block;
}
.btn_2 a{
	width: 98%;
	font-size: 25px;
	font-weight: bold;
	position: relative;
	border-radius: 100px;
	background: #781212;
	color: #fff;
	padding: 20px 0;
	display: inline-block;
}

textarea , input{
	width: 100%;
}
.note{
	width: 90%;
	margin: 0 auto;
	color: #fff;
}
@media screen and (max-width: 1700px){
.plan_list dd {
    font-size: 25px;
    }	
.plan_list dt {
    font-size: 18px;
    }	
}
@media screen and (max-width: 1500px){
.btn-area_2 {
    display: flex;
    width: 70%;
    margin: 0 auto 100px;
	}
}
@media screen and (max-width: 1290px){
.entry-btn a {
    display: block;
    background-color: #ffb430;
    border-radius: 10px;
	text-align: center;
}
.footer-list li {
	font-size: 16px;
}
.footer-list li::before {
    width: 8px;
    height: 8px;
}
.menu .entry-btn {
	margin: 30px auto;
	width: 90%;
	}	
.entry-btn {
	font-size: 25px;
}
.btn-area_2 {
    width: 95%;
    }
.corporate-btn a{
	width: 80%;	
}
.contact-btn, .corporate-btn {
    background-color: #fff;
    width: calc(50% - 0);
    padding: 20px;
    color: #30535c;
    font-weight: bold;
    border-radius: 100px;
    font-size: 11px;
    ext-align: center;
    margin: 2px;
    position: relative;
    border: solid;
}
.corporate-btn {
	padding: 10px 0px 10px 0px;
	}
.contact-btn {
	padding: 10px 0px 10px 8px;
	}	
.contact-btn a, .corporate-btn a {
	position: relative;
}
.contact-btn ::before {
    width: 15px;
    height: 12px;
    position: absolute;
    left: -15px;
    margin: 0;
}
.contact-btn ::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 1px solid #30535c;
    border-right: 1px solid #30535c;
    transform: rotate(45deg);
    right: -10px;
    top: 24%;
}
/* 3本線自体の絶対配置（position: absolute）をやめて、横並びのパーツにするぜ */
    .openbtn {
        position: relative; /* absolute から relative に変更！ */
        right: auto;        /* PC用の right: 5%; をリセット */
        top: auto;          /* PC用の top: 35px; をリセット */
        /* ボタンとの高さを合わせるために、上下のマージンを少し調整するぜ */
        margin-top: 5px; 
    }	
.btn-area_3 {
        display: flex;       /* ★魔法の横並び設定！ */
        align-items: center; /* 縦方向の真ん中を揃える */
        
        position: absolute;  /* 1つの大きな箱として右上に固定するぜ */
        right: 4%;           /* 画面の右端から 4% の位置に配置 */
        top: 25px;           /* 上からの位置（ヘッダーの高さに合わせて微調整してな！） */
        
        /* PC用の余計な設定をリセット */
        float: none;
        width: auto;
    }
    /* ボタンの中身のリンク（ENTRYボタン自体）の設定 */
    .btn-area_3 a {
        width: 110px;        /* スマホ・タブレットで見やすい少しコンパクトなサイズに */
        height: 45px;
        line-height: 45px;
        font-size: 12px;
        margin-right: 55px;  /* ★これが3本線との間のスキマ（20px）になるぜ！ */
        margin-top: 0;
		background-color: #ffb430;
        border-radius: 100px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        padding: 0 20px 0 10px;
		position: relative;
    }
	.btn-area_3 a::before{
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 15px;
        background-image: url(../images/blank-icon-white.png);
        position: absolute;
        right: 0;
        top: 33%;
	}	
}
@media screen and (max-width: 1280px){
.l-local-header-nav {
    margin: 10px auto 0;
    width: 100%;
	}
.mv-area {
    margin: 100px auto 0;
}	
}

@media screen and (max-width: 1200px){
.mv-area{
	    margin: 80px auto 0;	
}
section{
	width: 100%;
}
.main-area_02 {
    width: 95%;
    margin: 0 auto;
}	
#ablenet_merit .element-box {
    width: 100%;
    margin: 0 auto;
}	
#ablenet_merit ul {
    flex-wrap: wrap;
    text-align: center;
}
#ablenet_merit ul li {
    width: 50%;
    margin: 40px auto 30px;
}
#ablenet_merit ul li p {
    font-size: 30px;
    width: 90%;
    margin: 0 auto 80px;
}
#ablenet_merit ul li img {
    width: 50%;
    margin: 10px;
}
.q_area {
    background-color: #fff;
    border-radius: 40px;
    margin: 0 auto 50px;
    width: 90%;
}
#setting .element-box {
    width: 90%;
    margin: 0 auto;
}
.plan_list {
	width: 45%;
}	
.form-box {
	width: 100%;
}

}
@media screen and (max-width: 969px){
.mv {
    margin-top: 110px;
}
}
@media screen and (max-width: 768px){
.mv {
    margin-top: 60px;
}
.footer-nav {
    width: 95%;
	margin-bottom: 150px;
}	
}
@media screen and (max-width: 53em)
{
.main{
	width: 100%;
    margin: 0 auto;	
}
.main-area_02 {
	width: 95%;
	}
.history-graph{
	width: 90%;
	margin: 0 auto;
}	
.main p{
	font-size: 16px;
	}
.main p b{
	font-size: 18px;
	}
.mv-area {
	margin: 90px auto 0;
}
img {
    width: auto;
}	
.l-global-footer__logo img {
   height: 35px;
   vertical-align: middle;; 
}
.l-global-footer_sp {
   padding: 10vw;
    }	
.breadcrumbs{
	top: 60px;
}
.mv-area {
    padding: 0;
}	
h2{
	font-size: 25px;
	line-height: 1.3;
	padding: 20px;
	}
h3{
	line-height: 1.3;
	margin: 10px 0;
	font-size: 20px;
	}	
ol li {
    font-size: 16px;
}
section{
	width: 100%;
	margin: 0 auto;
}
.mv-area section{
	padding: 20px 0!important;
}	
.pc{
	display: none;
}
.sp{
	display: block;
	width: 100%;
}
#vps_merit li .box .title {
	font-size: 22px;
	}	
#ablenet_merit .element-box {
    width: 100%;
    margin: 0 auto;
}
#ablenet_merit ul li p {
    font-size: 15px;
    width: 90%;
    margin: 0 auto 50px;
}
#ablenet_merit ul li img {
        width: 70%;
        margin: 10px;
    }	

table {
    width: 95%;
    border-collapse: separate;
    border-spacing: 5px;
    margin: 0 auto;
}	
th, td {
    padding: 10px 5px;
    font-weight: bold;
    font-size: 14px;
	line-height: 1.5em;
}
#setting .element-box {
    width: 90%;
    margin: 0 auto;
}
#apply {
     margin: 0 auto; 
}	
#apply img{
	width: 90%;
}
#apply .btn-border{
	width: 90%;
	padding: 20px 5px;
	font-size: 20px;
}	


.contents-area{
	margin: 0 auto;
}
.contents-area h2{
	width: 100%;
}
.contents-area .contents a li {
    font-size: 16px;
	line-height: 1.5em;
}
.contents-area .contents a {
    font-size: 16px;
    width: 80%;
}	
#vps_merit li {
    width: 90%;
}
#vps_merit li .box {
    padding: 40px 30px;
}		
			
#faq p{
	margin: 0 auto;
	}

ol li a p {
    width: 80%;
}
.box p{
	font-size: 16px;
}
	
#faq p{
	font-size: 16px;
	line-height: 1.5em;
}
.sub-mv {
	font-size: 20px;
}	
.plan_list dd {
    font-size: 20px;
    }
.plan_list dd small{
	font-size: 16px;
}	
.send_btn , .btn , .btn_2{
	width: 100%;
}
.send_btn input{
	font-size: 20px;
}
.btn a , .btn_2 a{
	font-size: 20px;
	line-height: 1.5em;
}	
.arrow-icon::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    right: -5px;
    margin-top: 7px;
}	
.arrow-icon_2::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-top: 2px solid #781212;
    border-right: 2px solid #781212;
    transform: rotate(45deg);
    right: 30px;
}
.arrow-icon_3::after{
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    right: 30px;
    margin-top: 20px;
}	
	}
@media screen and (max-width: 320px){
th, td {
    padding: 10px 2px;
    font-size: 10px;
}	
	}