@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: 'PTSans'; /* 自分で決めるフォントの名前（自由につけてOK） */
  src: url('/assets/fonts/PTSans.ttc') format('ttc'); /* 拡張子がwoff2の場合 */
  font-weight: bold; /* このフォントファイルの太さ（通常ならnormal、太字用ならboldや700など） */
  font-style: normal;  /* スタイル（通常ならnormal、斜体ならitalic） */
  font-display: swap;  /* 【重要】フォント読み込み中もテキストを表示させてレイアウト崩れを防ぐ */
}

body {
	line-height: 160%;
	font-family: “PT Sans”, "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	color: #333333;
  line-height: 180%;
	-webkit-font-smoothing: antialiased;
	-webkit-print-color-adjust: exact;
}

.inner-width {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 8px;
}

a {
	text-decoration: none;
}

/*--- 線から塗り（共通設定） ---*/

.btn05{
    /*線の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    color: #333;
    padding: 10px 20px;
    background:#eee;
    text-decoration: none;
    outline: none;
    /*アニメーションの指定*/
    transition: all .3s;
    transition-delay: .7s;/*0.7秒遅れてアニメーション*/
}

/*hoverした際の、ボタンの背景とテキスト色の変更*/
.btn05:hover{
	background:#333;
	color: #fff !important;
}

/*線の設定*/
.btn05 span{
    display: block;
}

/*横線の設定*/
.btn05::before,
.btn05::after{
    content:"";
    /*絶対配置で線の位置を決める*/   
    position: absolute;
    /*線の形状*/   
    width: 0;
    height: 1px;
    background: #333;
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}

/*縦線の設定*/
.btn05 span::before,
.btn05 span::after{
    content:"";
    /*絶対配置で線の位置を決める*/   
    position: absolute;
    /*線の形状*/
    width:1px;
    height:0;
    background: #333;
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}

/*hoverした際、線が縦横100%伸びる*/
.btn05:hover::before,
.btn05:hover::after{
    width: 100%;
}
.btn05:hover span::before,
.btn05:hover span::after{
    height: 100%;
}

/*== 左上と右下から枠線が伸びて塗に */

/*横線が0.2秒送れて出現*/

.bordercircle1::before{
    right: 0;
    top: 0;
    transition-delay: 0.2s;
}
.bordercircle1::after{
    left: 0;
    bottom: 0;
    transition-delay: 0.2s;
}

/*縦線が出現*/
.bordercircle1 span::before{
    left: 0;
    top: 0;
}
.bordercircle1 span::after{
    right: 0;
    bottom: 0;
}

ol,li {
	list-style-type: none;
}

h1 {
	font-size: 32px;
  color: #11223c;
  margin-bottom: 16px;
}

h2 {
	font-size: 24px;
  color: #11223c;
  margin-bottom: 16px;
}

h3 {
	font-size: 20px;
  color: #11223c;
  margin-bottom: 16px;
}

h4 {
	font-size: 16px;
  color: #11223c;
  font-weight: bold;
}

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

span.bold {
font-weight: bold;
}

span.border-bottom {
  border-bottom: 4px solid #1123dd;
  padding-bottom: 4px;
}

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

img {
	width: 100%;
}

.cf {
  zoom: 1;
}

.cf:after {
  content: '';
  display: table;
  clear: both;
}

*:focus {
	outline: none;
}

.tb {
	display: none !important;
}

.sp {
	display: none !important;
}

.fl-r {
	float:right;
}

.fl-l {
	float:left;
}

.columns {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 48px;
    justify-content: start;
}

.item-2 {
	width: calc(50% - 10px);
	margin: 5px;
}

.item-3 {
	width: calc(33.333333% - 10px);
	margin: 5px;
}

.item-4 {
	width: calc(25% - 10px);
	margin: 5px;
}

.font-8 {
	font-size: 8px;
}

.font-32 {
	font-size: 16px;
}

.kome {
	font-size: 12px;
	vertical-align: super;
}

#wrap {
	width: 100%;
	overflow: visible;;
}


/**
** header ********************
**/
header {
	margin-bottom: 32px;
	z-index: 3;
	width: 100%;
	background: rgba(255,255,255,.9);
	position: fixed;
	top: 0;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

header #head-logo {
  margin:0 16px ;
  max-width: 240px;
}

header ul {
  /* display: flex; */
  align-items: center;
}

header ul li {
  margin: 0 16px;
  margin: 24px 16px 0;
}

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
	top:0;
  right: -120%;
	width:100%;
  height: 100vh;/*ナビの高さ*/
	background: rgba(255, 255, 255, .9);
  /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
  text-align: center;
}

#g-nav li#menu-logo {
    max-width: 320px;
}

#g-nav li a{
	color: #11223c;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

#anchor-1,
#anchor-2,
#anchor-3,
#anchor-4,
#anchor-5 {
  padding-top: 100px;
  margin-top: -100px;

}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position: fixed;
  z-index: 9999;
  top: 24px;
  right: -22px;
  cursor: pointer;
  width: 100px;
  height: 50px;
}
	
/*×に変化*/	
.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
	background-color: #11223c;
  width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:8px;	
}

.openbtn span:nth-of-type(2) {
	top:20px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

#header-inner {
    padding: 16px 0 0;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
}

#header-inner h1 img {
	max-width: 176px;
}

/* ヒーローヘッダー全体を画面いっぱいに */
.hero-header,
.swiper {
  width: 100% !important;
  height: calc(60vh - 90px) !important; /* 画面全体の高さからヘッダーの幅を引く */
  margin-top: 90px; /* 💡ここを追記（実際のヘッダーの高さに合わせて微調整してください） */
  margin-bottom: 40px;
}

/* スライドの高さも親要素（100vh）にぴったり合わせる */
.swiper-slide {
  position: relative;
  width: 100% !important;
  height: 100% !important; /* これで100vhいっぱいに広がります */
  overflow: hidden;
}

/* 背景動画（または背景画像）の設定 */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important; /* スライド（100vh）いっぱいに広げる */
  z-index: 1;
  
  /* 💡【重要】もしdiv自体に背景画像が設定されている場合は、これで全体に広げます */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* videoタグ、またはimgタグが中にあった場合でも強制的に100%にする */
.video-background video,
.video-background img,
.swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 動画の上に黒い透過レイヤーを重ねて文字を見やすくする */
.video-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2; /* 動画（z-index: 1）より上に重ねる */
}

/* 前面テキストの位置調整 */
.slide-content {
  position: absolute;
  top: 50%; /* これで100vh画面のちょうど中央にきます */
  left: 10%; 
  transform: translateY(-50%);
  z-index: 10; /* 最前面に表示 */
  color: #fff;
}

/* ---------------------------------
   ★ここから文字のアニメーション設定
--------------------------------- */
.slide-title {
  color: #ffffff;
}

/* 初期状態：文字を少し下に下げて、透明にしておく */
.slide-title,
.slide-text {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s, transform 1s;
}

/* タイトルと説明文の出現タイミングをずらす（ディレイ設定） */
.slide-text {
  transition-delay: 0.3s;
}

/* Swiperがアクティブになった時 */
.swiper-slide-active .slide-title,
.swiper-slide-active .slide-text {
  opacity: 1;
  transform: translateY(0);
}


/**
** footer ********************
**/
footer {
	background-color: #12223c;
	padding: 24px 0;
	position: relative;
}

footer #foot-logo {
	display: block;
	max-width: 160px;
	margin: 0 auto;
	margin-bottom: 4px;
}

footer h2 {
	font-size: 12px;
	text-align: center;
	color: #ffffff;
}

footer p#copyright {
	text-align: center;
	color: #ffffff;
	font-size: 100%;
}

#foot-sns a {
	color: #fff;
	display: block;
}

/******************************
****  コンテンツ全体  ******************************/

#contents {
	background-color: #ffffff;
}

#low-contents {

}

/******************************
****  背景色が伸びてテキストが出現（左から右） ******************************/
/*全共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #11223c;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

/******************************
****  文字がじわっと出現
******************************/
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}



/*****************************
*********  section  ******************************/
section {
  margin-bottom: 80px;
}

.section-title {
  display: flex;
  flex-direction: column; /* 縦並びにする */
  align-items: center;    /* 中央揃えにする */
  text-align: center;
  font-family: PTSans; /* カンプに合わせて適宜変更してください */
  margin-bottom: 16px;
}

/* 英語のメインタイトル */
.section-title .en {
  color: #11223c;         /* カンプで使用されている濃いネイビー */
  line-height: 1.2;       /* 行高を少し詰めて線とのバランスを調整 */
}

/* 中央の短い太線（疑似要素） */
.section-title .en::after {
    content: "";
    display: block;
    width: 40px;
    height: 2.5px;
    background-color: #11223c;
    margin: 4px auto 2px;
}

/* 日本語のサブタイトル */
.section-title .ja {
  font-size: 12px;        /* 文字サイズ（適宜調整） */
  font-weight: 700;
  color: #000000;         /* 文字色 */
  letter-spacing: 0.02em;
}

/********* top-sec1 **********/


/********* top-sec2 **********/
.kakomi {
  border: 1px solid #41278a;
  padding: 8px;

  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

/********* top-sec3 **********/
#top-sec3 {
  background-color: #edf2f7;
  padding: 40px 0;
}

#top-sec3 img {
  max-width: 132px;
  display: block;
  margin: 0 auto;
}

#top-sec3 .columns {
  justify-content: center;
  margin-bottom: 0;
}


/********* top-sec4 **********/
#top-sec4 .smart-plan {
  margin-bottom: 80px;
}

#top-sec4 h3.plan-1 {
  background: url(assets/img/top-sec4-img1.png) left center;
  background-repeat: no-repeat;
  padding-left: 40px;
}

#top-sec4 h3.plan-2 {
  background: url(assets/img/top-sec4-img2.png) left center;
  background-repeat: no-repeat;
  padding-left: 40px;
}

/********* top-sec5 **********/
#top-sec5 {
  background-color: #11223c;
  padding: 40px 0;
  color: #ffffff !important;
  margin-bottom: 0;
  border-bottom: 1px solid #ffffff;
}

#top-sec5 .section-title .en {
    color: #ffffff;
}

#top-sec5 .section-title .ja {
  color: #ffffff;
}

#top-sec5 .section-title .en::after {
    background-color: #ffffff;
}

#top-sec5 h4 {
  color: #ffffff;
}

#top-sec5 a.contact {
  max-width: 400px;
  background-color: #cc145e;
  display: block;
  margin: 0 auto;
  padding: 16px 8px;
  border-radius: 30px;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 18px; /* 文字を少し大きくして視認性をアップ */
  letter-spacing: 0.05em; /* 文字の詰まり感を解消 */

  /* 立体感を出すための「太めのアンダーシャドウ（影）」 */
  box-shadow: 0 6px 0 #9c003c, 0 10px 20px rgba(0, 0, 0, 0.3);

  /* 動きをスムーズにするトランジション設定 */
  transition: all 0.2s ease-out;
  position: relative;
  top: 0;
}

/* マウスホバー時（スマホタップ時含む）：ボタンが実際に沈み込む演出 */
#top-sec5 a.contact:hover {
  top: 4px; /* 4px下に下げる */
  box-shadow: 0 2px 0 #9c003c, 0 4px 10px rgba(0, 0, 0, 0.3); /* 影を薄く・短くして、押し込んだように見せる */
  background-color: #e61d6e; /* ホバー時に少しだけ明るくして、触れたことをフィードバック */
  color: #ffffff !important;
}

#top-sec5 .sns {
  margin-top: 40px;
}

#top-sec5 .sns img {
  max-width: 40px;
}

#top-sec5 .sns .columns {
  justify-content: center;
}

#top-sec5 .sns .item-2 {
  width: calc(6% - 10px);
}


/****************************
*********  タブレット  ****************************/
@media screen and (max-width: 991px) {
	.sp {
		display: block !important;
	}
	
	.pc {
		display: none !important;
	}
	

}

/* モバイル横向き */
/* モバイル横向き（スマホ全般） */
@media screen and (max-width: 767px) {
  .side-item-2,
  .item-3,
  .item-4 {
    width: calc(50% - 10px);
    margin: 5px;
  }
}

/* モバイル縦向き */
@media screen and (max-width: 575px) {


  .item-2,
  .item-3,
  .item-4 {
    width: calc(100% - 10px);
  }

  .slide-content {
    left: 2%;
  }

  #top-sec3 .item-3 {
    margin-bottom: 64px;
  }

  #top-sec5 .sns .item-2 {
    width: calc(14% - 10px);
  }
}

/* モバイル縦向き(小) */
@media screen and (max-width: 480px) {
  /* 必要であればここにスマホ用の個別スタイルを記述 */
  #top-sec5 .sns .item-2 {
    width: calc(14% - 10px);
  }
}