@charset "UTF-8";

/* CSS Document */
/**********************************************************************リセット*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-align: center;
	text-decoration: none;
	color: #3c4141;
}

html { scroll-behavior: smooth;}

body {
    line-height:1;
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
	background-color: #fff;
	width: 100%;
}

article,aside,details,figcaption,figure,
footer,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:18px;
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
	display: block;
	font-weight: 500;
	overflow-wrap: break-word;
}

img{
	width: 100%;
}

* {
   box-sizing: border-box;
}


/**********************************************************************リセット*/



/**********************************************************************ヘッダー*/
header {
	padding: 5px 0 0;
	width: 100%;
	align-items: center;
	position: fixed;
	top 0;
	left: 0;
	z-index: 999;
	background: rgba(255, 255, 255, 0.92);
	/*
	*/
}
/*
.headermenu{
	display: none;
}
.fixed {
    position: fixed;
    top: 0; /*ページ上部の固定する位置*/
    width: 100%;
    z-index: 9999;
	background: rgba(255,255,255,0.8);
}
*/
nav {
   margin: 0 0 0 auto;
}
ul {
   list-style: none;
   margin: 0;
   display: flex;
}


.pc-nav ul li a{
	color: #3c4141!important;
	font-size: 18px;
	font-weight: 500;
	transition: color 0.5s ease-in-out 0s;
	margin-top:-8px;
}

.pc-nav ul li a:hover{
	color: #28b4c8!important;
}

.sp-nav {
   display: none;
}

.earth{
	width: 30px;
	height: 30px;
	margin:-5px 0 -12px 0;
}
@media screen and (max-width: 640px) {
	.earth{margin: 0 0 -19px 0;}
}

header>div{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.logo{
	width: 260px;
	margin-bottom: 15px;
}

.head-right{
	width: 750px;
	display: flex;
	justify-content:flex-end;
	align-items: center;
	
}
.contact-head{
	display: inline-block;
	width: 120px;
	margin: -18px 12px -15px 20px;
	transition : opacity 0.5s ease-in-out 0s;
}

.contact-head:hover{
	opacity: 0.8;
}


.pc-nav{
	margin: 20px 0 0;
}

.pc-nav ul li{
	margin-left: 20px;
}

@media screen and (max-width: 1180px) {
	body{
		width: 1180px;
	}
}

@media screen and (max-width: 640px) {
	body{
		width: 100%;
	}
   .pc-nav {
      display: none;
   }
	header {
		padding: 0 0 10px ;
	}
   .sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      width: 100%;
      background: rgba(40, 180, 200, 0.94);
      opacity: 0;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
   }
   #hamburger {
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin: 10px 0 0 0;
   }
   #hamburger span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #28b4c8;
      transform: translateY(-50%);
   }
   #hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #28b4c8;
   }
   #hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #28b4c8;
   }
   /*スマホメニュー*/
   .sp-nav ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
   }
   .sp-nav li {
      margin: 0;
      padding: 0;
      ext-align: left;
   }
.sp-nav li a {
    /* Flexboxを有効にして両端揃えに */
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* その他のスタイル */
    padding: 16px 25px; /* 左右の余白 */
    width: 100%;
    box-sizing: border-box;
    color: #fff !important;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.sp-nav ul > li:nth-last-child(2) > a {
    border-bottom: none;
}

/* 「close」ボタンの下線を削除 */
.sp-nav ul > li:last-child > span {
    border-bottom: none;
}
   .sp-nav li span {
      font-size: 15px;
      color: #fff;
   }
   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
   }
   /*-閉じるアイコンー*/
   .sp-nav .close {
      position: relative;
      padding-left: 20px;
   }
   .sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #fff;
      transform: rotate( 45deg );
   }
   .sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #fff;
      transform: rotate( -45deg );
   }
   


/* 【変更点】メニューリスト全体を上揃えに変更 */
.sp-nav ul {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* center から flex-start へ変更 */
    align-items: center;
    padding-top: 60px; /* 上部に余白を追加してレイアウトを調整 */
    overflow-y: auto; /* 項目が多い場合にスクロール */
   
}

/* サブメニューのコンテナ(.submenu)のスタイル */
.sp-nav .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background: rgba(0, 0, 0, 0.15); 
    width: 100%;
    padding: 0; 
}

/* サブメニューが開いた時のスタイル */
.sp-nav .has-submenu.active .submenu {
    max-height: 300px;
}

/* サブメニュー内のリンクのスタイル */
.sp-nav .submenu li a {
    padding: 12px 25px 12px 40px;
    font-size: 14px;
    color: #fff !important;
    border-bottom: none;
}

/* 【変更点】サブメニューを持つ親リンクのスタイル */
.sp-nav .has-submenu > a {
    position: relative;
    /* 右側にアイコン用のスペースを確保するためpaddingを追加 */
    padding-right: 60px !important; 
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

/* アイコン（＋マーク）を追加 */
.sp-nav .has-submenu > a::after {
    content: ''; /* + や - の代わりに空に */
    position: absolute;
    top: 50%;
    right: 30px; /* 右端からの距離はそのまま */
    transform: translateY(-50%) rotate(0deg); /* 基準は下向き（0deg） */
    
    /* V字アイコンの作成 */
    width: 10px; /* アイコンの横幅 */
    height: 10px; /* アイコンの高さ */
    border-right: 2px solid #fff; /* 右側の線 */
    border-bottom: 2px solid #fff; /* 下側の線 */
    
    /* V字に見えるように回転 */
    transform: translateY(-75%) rotate(45deg); /* Y軸を少し上げて中央に、45度回転 */
    
    transition: transform 0.3s ease; /* 開閉時のアニメーション */
}

/* サブメニューが開いている時のアイコン（上向きV字） */
.sp-nav .has-submenu.active > a::after {
    transform: translateY(-25%) rotate(-135deg); /* 上向きに回転 */
}

   .toggle {
      transform: translateY( 0 );
      opacity: 1;
   }
	.contact-head{
	width: 80px;
	margin: 0 10px -15px;
		
}
	.head-right{
	width: auto;
	display: flex;
	justify-content:flex-end;
	align-items: center;
}

	.logo{
	width: 130px;
	margin-bottom: 10px;
}

}

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


/**********************************************************************ループスライダー*/

.loop_wrap {
	text-align: left;
	height: 80px;
	display: flex;
	overflow: hidden;
	background-color: #ebf0f5;
	padding: 20px 0;
}

.loop_wrap img {
  width: auto;
	height: 100%;
	padding: 0 20px;
}

.loop_wrap ul li{
	height: 40px;
}

.loop_wrap ul:first-child, .loop-text a:first-child{
  animation: loop 60s -30s linear infinite;
}

.loop_wrap ul:last-child, .loop-text a:last-child {
  animation: loop2 60s linear infinite;
}

.loop_wrap-text {
	text-align: left;
	height: 30px;
	display: flex;
	overflow: hidden;
	background-color: #ebf0f5;
	padding: 15px 0 0;
}

.loop_wrap-text div {
  flex: 0 0 auto;
  white-space: nowrap;
	font-weight: 600;
	color: #003250;
}
.loop_wrap-text div:nth-child(odd) {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap-text div:nth-child(even) {
  animation: loop2 50s linear infinite;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

/**********************************************************************ループスライダー*/


/**********************************************************************ドロップダウン*/

.menu {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0 auto;
}
.menu_langage{
    width: 50px;
	margin: -22px 0 -20px 0;
}
.menu > li {
    float: left;
    line-height: 40px;
}

.menu > li a {
    display: block;
    color: #fff;
}

.menu > li a:hover {
    color: #999;
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

ul.menu__third-level {
    visibility: hidden;
    opacity: 0;
}

ul.menu__fourth-level {
    visibility: hidden;
    opacity: 0;
}

.menu > li:hover {
    -webkit-transition: all .5s;
    transition: all .5s;
}

.menu__second-level li a:hover {
	color: #28b4c8!important;
}

.menu__third-level li a:hover {
    background: #fff;
}

.menu__fourth-level li a:hover {
    background: #fff;
}

/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 0 3px 10px;
    border-right: 2px solid #28b4c8;
    border-bottom: 2px solid #28b4c8;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media screen and (max-width: 640px) {
	.init-bottom:after {display:none;}
}


.langage{
	width: 50px!important;
}

/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

.menu {
    *zoom: 1;
}

.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
	display: list-item;
    top: 90px;
    width: 300px;
    background: #fafafa;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    opacity: 0.8;
}

li.menu__single ul.menu__second-level>li {
	border-bottom: solid 1px #fff;
	margin: 0 0 0 0;
}

li.menu__single ul.menu__second-level>li>a {
	background:#003250;
	color: #3c4141;
	margin: 0 0 -1px 0;
	padding:5px;
    background: #fafafa;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    opacity: 0.9;
    
    text-align:left;
    line-height:25px;
    padding-left:1em;
}

li.menu__single ul.menu__second-level>li>a:hover {
	background:#003250;
}


li.menu__single:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
}


.langage>ul.menu__second-level{
	width: 110px!important;
}
@media screen and (max-width: 640px) {
	.menu_langage{ width: 0;margin: 0 20px 0 0;	}
	.langage>ul.menu__second-level{margin-top: 2px;left:-63px}
}

.langage>ul.menu__second-level{
	top:22px;
	left:-43px;
}
.langage>ul.menu__second-level>li>a {
	width: 110px!important;
    left:-630px;
    margin-top:22px;
}


/*
.langage>ul.menu__second-level{
	width: 0!important;
	margin: 0 0 0 0;
	padding-left:1em;
	
	display: list-item;
    position: absolute;
    top: 40px;
    left:-60px
}
@media screen and (max-width: 640px) {
	.langage>ul.menu__second-level{margin-top: 2px;left:-63px}
}


.langage ul.menu__second-level>li {
	border-bottom: solid 1px #fff;
	margin: 0 0 0 0;
}

.langage>ul.menu__second-level>li>a{
	background:#003250;
	width: 110px!important;
	color: #3c4141;
	margin: 0 0px -1px 0;
	padding:5px;
    background: #ffffff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    opacity: 0.9;
    
    text-align:center;
    line-height:25px;
    
}

.langage>ul.menu__second-level>li>a:hover {
	background:#003250;
}
*/
/**********************************************************************ドロップダウン*/

/**********************************************************************文字バウンド*/
.container{
  position:relative;
  width:100%;
  height:30px;
}
.bound{
}
/*フォント*/
.bound span{
  position: absolute;
  top: 0;
  margin: auto;
  font-size:40px;
  font-weight:bold;
  color:#28b4c8;
  text-align:center;
  width:400px;
  height:100px;
	animation: bound-anim 1.0s infinite;
}

.com100{
  right: -120px;
}

.over20{
  right: -70px;
}

/*アニメーション指定
文字数に合わせてleftや開始時間（2つ目のs）を設定する
.bound span:nth-child(1){ left:-4.2em; animation: bound-anim 0.8s 0.0s infinite;}
.bound span:nth-child(2){ left:-2.8em; animation: bound-anim 0.8s 0.1s infinite;}
.bound span:nth-child(3){ left:-1.4em; animation: bound-anim 0.8s 0.2s infinite;}
.bound span:nth-child(4){ left: 0.0em; animation: bound-anim 0.8s 0.3s infinite;}
.bound span:nth-child(5){ left: 1.4em; animation: bound-anim 0.8s 0.4s infinite;}
.bound span:nth-child(6){ left: 2.8em; animation: bound-anim 0.8s 0.5s infinite;}
.bound span:nth-child(7){ left: 4.2em; animation: bound-anim 0.8s 0.6s infinite;}
*/

/*アニメーションキーフレーム
小さいフォントサイズの場合はtopの数値も縮小すると飛び過ぎない*/
@keyframes bound-anim {
  0%,100% {top: 0;transform: scale(1);}
  30% {top: -25%;}
  50% {transform: scale(1);}
  90% {top: 0;transform: scale(1.2,0.8);}
}

@media screen and (max-width: 640px) {

	.bound span{
	  width:50%;
	}
	.com100{
	  right: 25%;
	}
	.over20{
	  right: 25%;
	}

	.conpaniese {height:190px;}
	.million {height:190px;}

}



/**********************************************************************文字バウンド*/


.color-w{
	color: white;
}
.color-g{
	color: #28b4c8;
}
.color-b{
	color: #0a5fa6;
}
.mb50{
	margin-bottom: 50px;
}
.mt50{
	margin-top: 50px;
}
.mt100{
	margin-top: 100px;
}

.contact-us{
	width: 368px;
	display: inline-block;
	transition : width 0.5s ease-in-out 0s;
	margin: 112px auto;
}

.contact-us:hover{
	opacity: 0.8;
	width: 380px;
}

.contact-us_norma imgl{
	width: 368px;
	transition: all 0.5s;
}

.contact-us_normal img:hover{
	opacity: 0.8;
	transform:scale(1.1,1.1);
}

.main{
	padding: 50px 0 50px;
	background: -webkit-linear-gradient(135deg, #f7fffe 0%, #d5f8fe 100%);
	background: -o-linear-gradient(135deg, #f7fffe 0%, #d5f8fe 100%);
	background: linear-gradient(135deg, #f7fffe 0%, #d5f8fe 100%);
}
.index .main {padding-top:100px;}
.index .main h3 { font-weight: 700; }
.index #movie h3{ font-weight: 700; }
.index .reasons h3{ font-weight: 700; }
.index .process h3 { font-weight: 700; }
.index .history h3 { font-weight: 700; }

.main>.con03{
	padding-bottom: 50px;
	text-align: left;
}
.contact-us-top{
	margin-top: 30px;
	margin-left: 70px!important;
}

.topill{
	width: 540px;
}
.con04{
	width: 100%;
	display: flex;
}

.main>.con03>.con04{
	justify-content: space-between;
}

.main>.con03>.con04>div{
	text-align: left;
	width: 50%;
}

.animation-ill{
	width: 1120px;
	display: flex;
	justify-content: space-around;
	margin: 70px auto 0;
	padding-bottom:2em;
}

.ani-01{
	height: 47px;
	width: auto;
}
.top-ill-text01{
	color: #28b4c8;
	font-size: 20px;
	font-weight: 700;
	margin: 20px 0;
}
.top-ill-text02{
	color: #28b4c8;
	font-size: 40px;
	font-weight: 700;
	margin: 20px;
}


h1{
	font-weight: 700;
	font-size: 50px;
	text-align: left;
	color: #28b4c8;
	margin-top: 30px;
}

.lead-main{
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	margin-top: 28px;
	line-height: 1.5;
}

.download{
	width: 245px;
	margin-top: 80px;
	transition: width 0.5s ease-in-out 0s;
}

.download:hover{
	width: 255px;
	opacity: 0.8;
}


.main>div>.contact-us{
	margin: 50px 0;
}

.ill-main{
	width: 600px;
	position: relative;
	left: 480px;
	top: -300px;
}

.sideopacity{
	height: 80px;
	background-image: linear-gradient(to right, rgba(235,240,245,1.00) 0%, rgba(235,240,245,0.00) 15%, rgba(235,240,245,0.00) 85%, rgba(235,240,245,1.00) 100%);
	margin-top: -80px;
	position: relative;
	color:  
}

section{
	width: 1120px;
	margin: 0 auto;
}
.con02, .con03{
	width: 1120px;
	margin: 0 auto;
}

.con02{
	padding: 150px 0 0 0;
}

.plans{
 display: flex;
    flex-wrap: wrap;
    gap: 20px; /* カード間の余白 */
    justify-content: center; /* カードを中央揃え */
    padding: 20px; /* 親コンテナの内側余白 */
}

.plans>div{
	background-color: #fff; /* 背景色を白に */
    border: 1px solid #a0e0e0; /* 薄い水色の枠線 */
    border-radius: 12px; /* 角を画像のように少し丸く */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); /* 影を少し強めにし、立体感を出す */
    padding: 30px 25px; /* カード内の余白を上下に少し広げる */
    width: 100%;
    max-width: 340px; /* PCなど広い画面での最大幅を微調整 */
    box-sizing: border-box;
  display: flex;


    /* テキストのスタイル調整 */
    font-size: 1.2em; /* フォントサイズを少し大きく */
    line-height: 1.5; /* 行間 */
    color: #20b2aa; /* テキストの色を画像に合わせた水色系に */
    font-weight: bold; /* テキストを太字に */

    /* コンテンツの配置を調整 (テキストが上部に揃うように) */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* テキストが上から始まるように */
    text-align: left; /* テキストを左揃えに */
}
.plans > div p.sub-text {
    font-size: 0.9em; /* サブテキストのフォントサイズ */
    color: #66b2b2; /* サブテキストの色 */
    margin-top: 10px; /* メインテキストからの上余白 */
    font-weight: normal; /* 太字を解除 */
    line-height: 1.4;
}
.strongT{
	width: 900px;
  margin: auto;
  margin-top: 150px;
  margin-bottom: 150px;
}

.columns_2{
display: grid;
  grid-template-columns: 1fr 1fr; /* 同じ幅の列を2つ作成 */
  gap: 20px; /* 各要素の間の隙間を設定 (縦横両方) */
  padding: 10px; /* コンテナ全体の余白 */
  width: 900px;
  margin: auto;

  
}

.columns_2 div{
 background-color: #f9f9f9; /* 背景色 */
  border: 1px solid #ddd;   /* 枠線 */
  padding: 15px;            /* 内側の余白 */
  border-radius: 8px;       /* 角を丸くする */
  }
  
.strongT .columns_2 div p{

  padding: 16px;            /* 内側の余白 */

  }

/* 各要素内のスタイル調整（任意） */
.plans div {
  background-color: #ffffff; /* 背景色 */
  border: 1px solid #ddd;   /* 枠線 */
  padding: 32px;            /* 内側の余白 */
  border-radius: 8px;       /* 角を丸くする */
}
.plans>div p{
 font-weight: 300;
 font-size: 16px

}

.plans>div p span{
	font-weight: 700;
}
.color-b{ margin-top: 32px; margin-bottom: 8px;}

.whiteT {
 color: #ffffff;
 margin-top:70px;
 font-size: 1.2rem;
}

.ill-plan{
	width: 350px;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: 0 0 20px #f7f8f4;
}

.bottun-plan{
	color: #fff;
	width: 350px;
	background: #28b4c8;
	height: 75px;
	border-radius: 37.5px;
	padding-top: 20px;
}

.ill-plan:hover, .bottun-plan:hover{
	transform:scale(1.1,1.1);
	transition: 0.5s; 
}

.plans-container {
  display: grid;
  /* 画面幅に応じて列数を自動調整（PCでは3列、スマホでは1列など） */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; /* ボックス間の隙間 */
}

.plans-container_01 {
  padding: 40px 0 70px 0;
}

.plans-container_02 {
  padding: 20px 0 150px 0;
}

/* 各ボックスのスタイル */
.plan-box {
  /* ボックスの中身（アイコンとテキスト）を横並びに */
  display: flex;
  align-items: center; /* 上下の位置を中央に揃える */
  gap: 15px; /* アイコンとテキストの間の隙間 */

  /* 見た目のスタイル */
  background-color: #ffffff;
  border: 1px solid #eaf2ff; /* 画像に合わせた薄い青の枠線 */
  border-radius: 12px; /* 角を丸くする */
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 薄い影をつける */
  text-align: left; /* テキストを左揃えに */
}

/* アイコンのスタイル */
.plan-icon {
  flex: 0 0 40px; /* アイコンの幅を40pxに固定 */
  width: 40px;
  height: 40px;
}

/* テキスト部分のスタイル */
.plan-box .plan-text p {
  margin: 0; /* pタグのデフォルトマージンを削除 */
  line-height: 1.5;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  
}

.plan-text span {
  font-weight: bold; /* タイトル部分を太字に */
}

a.plan-box {
    text-decoration: none; /* リンクの下線を消す */
    color: inherit;       /* 文字色を親要素から継承する（元の色を保つ） */
}

/* （任意）カーソルを合わせたときに少し変化をつけたい場合 */
a.plan-box:hover {
    opacity: 0.8; /* 透明度を少し下げる */
    /* 例： transform: scale(1.03); 少しだけ拡大させる */
}


.reasons{
	background-color: #003250;
}


.services{
	background: linear-gradient(135deg, #f7fffe 0%, #d5f8fe 100%);
}
}

.process, .system-con02, .serviceflow{
	background-color: #ebf0f5;
}
.processImg{
	margin: 0 0 120px 0;
}

.system-con01, .pricing-con01, .faq-con01, .blog-con01{
	padding: 50px 0 150px;
}


.bg_grey h2 {
font-size: 50px;
	font-weight: 700;
	color: #28b4c8;
	margin-bottom: 24px;
}

h2{
	font-size: 50px;
	font-weight: 700;
	color: #28b4c8;
	margin-bottom: 24px;
}

.lead{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 200px;
	line-height: 1.3
}

h3{
	font-size: 28px;
	font-weight: 300;
	margin-bottom: 50px;
}

.titleH3{
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 50px;

}
 
.premise {
	width:70%;
	margin:0 auto 100px;
	text-align:left;
}
.premise a{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 0;
	line-height: 1.3;
}


.services a{
	color:#fff!important;
	line-height:2em;
	font-size: 20px;
}

.services-con>div.about_cmr{
	width: 48%;
	margin-right: 4%;
}
.services-con>div.about_airtrade{
	width: 48%;
	margin-right: 0;
}

.services-con>div.about_cmr img.logo{height:80px;width:auto;}
.services-con>div.about_airtrade img.logo{height:40px;width:auto;}

.services-con div a{
	text-align: left;
	text-align: justify;
	word-break: break-word;
	margin-right: 4%;
	margin-right: 0%;
	line-height: 1.6em;
}

/*
.services-con>div.history{
	width: 56%;
	margin-right: 0;
	}
*/

.history {margin:60px 0 80px 0; padding: 42px 0;}
.enbg { background-color: #fff;}

.history>div>div{
	display: inline-block;
	vertical-align: top;
}

.history>div>.right, .history>div>.left{
	width: 40%;
}
.history>div>.right>a, .history>div>.left>a{
	width: 100%;
	font-size: 1.3em;
}

.history>div>.right>a>span,
.history>div>.left>a>span{
	font-size: 24px;
	line-height:1.8em;
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
	color: #28b4c8;
}

.history>div>.left>a{
	text-align: right;
}
.history>div>.left>a>span{
	margin-right: -25px!important;
}

.history>div>.right>a{
	text-align: left;
}
.history>div>.left>a>span{
	margin-right: -25px!important;
}

.history>div>.left>a>span:after{
	content:"●";
	font-size: 16px;
	width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: #28b4c8;
	padding-right: 5px;
}

.r-0>span:before,.r-1>span:before,.r-2>span:before,.r-3>span:before{
	content:"●";
	font-size: 16px;
	width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: #28b4c8;
	padding-left: 5px;
	margin-right: 5px;
}
.r-0>span,.r-1>span,.r-2>span,.r-3>span{
	margin-left: -25px!important;
}

.l-1{
	margin-bottom: 40px;
	margin-top: 60px;
}

.l-2{
	margin-bottom: 20px;
}

.l-3{
	margin-bottom: 60px;
}

.l-4{
	margin-bottom: 20px;
}
.r-1{
	margin-bottom: 400px;
}

.r-0{
	margin-bottom: 447px;
}
.r-2{
	margin-bottom: 50px;
}

.history>div>.lile{
	width: 1px;
	background: #28b4c8;
	height: 660px;
	margin: 0 10px;
}
.reasons-list{
	width: 100%;
	display: list-item;
	margin: 50px 0 0 0;
}
.reasons-list li{
	display: block;
	text-align: left;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	height: 45px;
	padding-left: 35px;
	background: url("../tpimges/check.png") left 0px top 0 no-repeat;
	background-size: 30px auto;
	align-items: center;
	padding-top: 5px;
}
.reasons-ill{
	width: 100%;
	align-items: flex-end;
}
.reasons-ill img:first-child{
	width: 510px;
}

.reasons-ill img:last-child{
	width: 260px;
	margin-left: 160px;
}

.reasons-graph{
	background: #fff;
	padding: 50px;
	border-radius: 20px;
	box-shadow: 0 0 20px #333;
}
h4{
	font-weight: 400;
	font-size: 18px;
}

.reasons-graph h4{
	color: #003250;
	margin-bottom: 30px;
}

.keyservices div a, .award-text, .system-con01-text, .pricing-con01-text{
	text-align: left;
	line-height: 1.5em;
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	font-weight: 400;
	margin-bottom: 50px;
}


.main>div>.dl-document{
	margin: 50px 0;
}

.dl-document{
	width: 368px;
	margin: 100px auto 0;
	display: inline-block;
	transition : width 0.5s ease-in-out 0s;
}

.dl-document:hover{
	opacity: 0.8;
	width: 380px;
}

.img-radius{
	border-radius: 20px;
	box-shadow: 0 0 20px #f0f0f0;
}

.prcmrobo h3 {
	line-height:1.5em;
}

.process-con01{
	display: flex;
	justify-content: space-between;
	margin-bottom: 100px;
}

.process-con01>div{
	width: 170px;
	padding: 35px 20px 20px;
	text-align: left;
	background: #fff;
	border-radius: 20px;
	margin-bottom: 50px;
	box-shadow: 0 0 20px #f0f0f0;
}

.subhead{
	color: #28b4c8;
	font-size: 18px;
	margin-bottom: 15px;
	font-size: 32px;
	font-weight: 700;
}

.process-con01>div>a {
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	font-size: 16px;
	line-height: 1.5em;
	font-weight: 500;
}

.process-con01-big{
	width: 360px!important;
}

.process-con02{
	display: flex;
	justify-content: space-between;
	margin-bottom: 110px;
}

.process-con02 div{
	width: 360px;
	padding: 20px;
	background: #fff;
	border-radius: 20px;
	text-align: left;
	box-shadow: 0 0 20px #f0f0f0;
}

.process-con02 div img{
	margin-bottom: 10px;
}
.process-con02 div img:hover{
	transform:scale(1.1,1.1);
	transition: 0.5s; 
}
.process-con02 div a{
	font-size: 16px;
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	font-weight: 500;
	line-height: 1.2em;
}

.process .con02 h4 {
	font-weight: 600;
	font-size:170%;
	text-align:left;
	line-height:1.3em;
}

.process .con02 h4 span {
	font-size:70%;
	color:#28b4c8!important;
}


.awards-imgs{
	display: flex;
	justify-content: space-between;
	margin-bottom: 150px;
}
.awards-imgs img{
	height: 106px;
	width: auto;
	
	/*border:5px solid #ebf0f5;*/
	/*background:#ebf0f5;*/
	padding:5px;
	border-radius:20px;
}

.map{
	width: 100%;
	height: 650px;
	background: url("../tpimges/map-pc.png") no-repeat;
	background-size: 100%;
	position: relative;
}

.map a{
	display: block;
	position: absolute;
	width: 250px;
	height: 35px;
}

.map a:nth-child(1) {
	top:240px;
	left: 100px;
}
.map a:nth-child(2) {
	top: 184px;
  	left: 283px;
}
.map a:nth-child(3) {
	top:232px;
	left: 505px;
}
.map a:nth-child(4) {
	top: 289px;
 	 left: 654px;
}
.map a:nth-child(5) {
	top: 273px;
  	left: 877px;
}
.map a:nth-child(6) {
	top: 324px;
  left: 643px;
}
.map a:nth-child(7) {
	top:465px;
	left: 835px;
}

.map a:nth-child(8) {
    top: 572px;
    left: 825px;
}

.map a:nth-child(9) {
  top: 227px;
  left: 273px;
}

.map a:nth-child(10) {
  top: 198px;
  left: 489px;
}

.map a:nth-child(11) {
  top: 318px;
  left: 874px;
}

.map a:nth-child(12) {
  top: 353px;
  left: 830px;
}

.map a img{
	height: 35px;
	width: auto;
	transition: height 0.5s ease-in-out 0s;
}

.map a img:hover{
	opacity: 0.8;
	height: 38px;
}

footer{
	background-color: #003250;
	padding: 50px 0 100px;
	padding:40px 0 45px;
}


.footer-logo_at{
	position: static;
	width: 280px;
}


/*
.with{
	color: #fff;

.sns{
	width: 470px;
	margin: 0 auto;
	height: 60px;
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

.sns a{
	width: 60px;
	height: 60px;
	transition: width 0.5s ease-in-out 0s;
}

.sns a:hover{
	width: 70px;
	height: 70px;
	opacity: 0.8;
}
*/

.footer-text {
	text-align: left;
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}

.footer-text div a{
	color: #fff;
	text-align: left;
	margin-right: 50px;
	line-height: 1.2em;
	font-size: 16px;
	line-height: 1.7em!important;
}


.footerlogos{
	height: 100px;
	object-fit: contain;
}

.company{
	font-size: 22px!important;
}
.company:hover{
}
a.company:before,
a.company_add:before{
	content:""
}
.footer-links		{margin-right: 50px;}
.footer-links.narrow{margin-right: 25px;}
/*.footer-links.wide	{margin-right: 220px;}*/

.footer-links a{}
.footer-links a:hover{
	opacity: 0.8;
	transition: all 0.5s;
}


.footer_airtrade {}
.footer-logo_at{position: static;width: 280px;}
.footer_airtrade span {color:#fff;display:inline;}
.footer_airtrade a.mail:hover {opacity: 0.8; transition: all 0.5s;}
.footer_airtrade .footer-links a:before {content:"- "}
.footer_airtrade .footer-links p { color:#fff; text-align: left; font-weight: 700; font-size:24px;}

.footer_cmr {width:100%;}
.footer-logo_cmr {width:200px;}
.footer-logo_cmr img {margin:0 30px 0 0;float:left;}
.footer-logo_cmr:hover {opacity:1;}
.footer_comarea {color:#fff;float:left;padding-top:12px;text-align:left;font-size: 1px!important;}
.footer_comarea a {font-size: 16px;line-height:1.7em;}
.footer_comarea a span {color:#fff;}
.footer_comarea a:hover {opacity:1;}
ul.sns_icon img {width:38px;margin:12px 0 0 1.5em;}
ul.sns_icon img:hover {opacity:0.8;}
.footer_copyright .footerlogos_area {float:right;margin:0;padding:10px 0;}
.footer_copyright .footerlogos_area img {height:80px;}
.footer_copyright p.copyright {font-size:14px;line-height:2em;margin:0 ;padding-top:28px;text-align:left;}
.footer_copyright p.copyright a {font-size:14px!important;display:inline-block;color:#555;}
.footer_copyright p.copyright a:hover {opacity:0.8;}

footer hr {background:#fff;height:1px;border:none;margin:2em 0;opacity:0.5;}
span.bar {display:inline!important;margin:0 0.5em;}
span.bar.mob {display:none!important;}

@media screen and (max-width: 640px) {
	.footer_airtrade .footer-links a {display:inline}
	.footer_airtrade .footer-links a:before {content:""}
	.footer_cmr div {width:100%;}
	.footer-logo_at{margin: 0 auto 10px;}
	.footer-logo_cmr {clear:both!important;margin: 0 auto 0; height:70px;display:block;}
	.footer_comarea {clear:both;margin:0;padding-top:0;}
	.footer_comarea a {text-align:center;}
	ul.sns_icon {margin:30px auto 20px;}
	ul.sns_icon img {margin: 0 0.75em 0;}
	span.bar.mob {margin:0 0.5em;display:inline!important;}
	.footer_copyright {padding:1em 0 0!important;}
	.footer_copyright img {width:200px;}
	.footer_copyright .info {margin:0 auto;padding:0;clear:both!important;width:100%;}
	.footer_copyright p.copyright {padding-top:0px;text-align:center;}
}


.movie{
	background-color: #003250;
}
.movie>.con02>div{
	display: flex;
	justify-content: space-between;
}
.movie>.con02>div>div>video{
	width: 350px;
	height: 230px;
	
	width: calc(350px *1.8);
	height: calc(230px *1.8);
	
	background-color: #CCCCCC;
	border-radius: 20px;
}

.movie>.con02>div>div>a{
	color: #fff;
	margin-top: 10px;
	font-size: 23px;
}




/**************************************************************************************************************************system.html用*/
section {
	padding:64px 32px 64px 32px;
}
.bg_gre{
	background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}


.section_01{

	background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
	padding:64px 32px 64px 32px;
	width:100%;

}
.section_01 .h2{

text-align: center;
}
.section_box {
width: 1120px;
  margin: auto;

}
.section_box .blueT{
color:#00f;
}

.subText h3{
font-size: 24px;
font-weight: 300;
line-height: 2rem;
}

.bg_niv{
	background-color:rgb(0 91 172 / var(--tw-bg-opacity, 1));
	margin: 0 16px 0 16px;
}

.features-container {
  display: grid;/* 3つの均等なカラム（列）を作成 */
  grid-template-columns: repeat(3, 1fr);/* アイテム間の隙間を指定 */
  gap: 20px; 
}

.feature-item{
	background-color:#ffffff;
	padding: 30px 16px 30px 16px;
	 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	 border-radius: 8px; /* 四隅すべてに8pxの丸み */
	
}
.feature-item p {
	line-height: 1.2rem;
	padding: 16px 16px 0 16px; 
}

.feature-item img {
	width:25%;
}

 h4 { 
font-weight: 700; 
margin-top: 16px; 
font-size: 20px;
}

.section_02{
background-color: rgb(0 91 172 / 0.1);
width:100%;
}
.flex-container {
  display: flex;
  align-items: center; /* 上下の位置を中央に揃える */
  gap: 20px; /* 左右の要素の間に隙間を空ける */
  background-color: #ffffff;
  margin: 32px 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}


.flex-container > div {
  flex: 1; /* 2つのdivが同じ幅になるようにする */
  padding: 0 32px;
}

/* 画像が親要素の幅を超えないようにする */
.flex-container img {
  max-width: 100%;
  height: auto;
	margin:32px;
	padding: 0 40px 0 0;
}

.flex-container p {
	line-height: 1.2rem;
		margin-top: 16px;

}

 .responsive-container {
    display: flex; /* Flexboxで横並び */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 40px; /* 左右の要素の間の隙間 */
    padding: 30px 40px; /* PC表示用のパディング */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  	border-radius: 8px;
  	background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    
  }

  /* 左側の著者情報部分 */
  .testimonial-author-info {
    flex: 0 0 200px; /* 固定幅にするか、内容に合わせて調整 */
    text-align: left; /* PCでは左寄せ */
    padding-right: 20px; /* 右側に線がある場合の隙間 */
  }

  .author-image {
      margin-left: 0; /* 中央寄せをリセット */
  }


  /* 右側の引用コンテンツ部分 */
  .testimonial-content {
  
    flex: 1; /* 残りのスペースを全て使用 */
    margin-bottom: 0; /* PC表示では下の余白をリセット */
    border-left: 4px solid #28b4c8; /* 青い縦線を追加 */
    padding-left: 30px; /* 線とテキストの間の隙間 */
  }

  .testimonial-content h2 {
      font-size: 1.8em; /* PCでのフォントサイズ調整 */
  }

.testimonial-content p {
  line-height: 1.2rem;
  color: #555;
  margin-top: 16px;
  padding: 0 32px
}

 .startCropss_2colbox {
    display: flex; /* Flexboxで横並び */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 40px; /* 左右の要素の間の隙間 */
    padding: 30px 40px; /* PC表示用のパディング */
    
  }
  
.startCrposs_2col {
    flex: 1; /* 残りのスペースを全て使用 */
    margin-bottom: 0; /* PC表示では下の余白をリセット */
    padding-left: 30px; /* 線とテキストの間の隙間 */
  }



.startCrposs_2col p {

  display: flex;
  margin-bottom: 0.5em; 
    line-height: 1.6rem;
  color: #555;
    font-size: 1.2rem;
    text-align: left;
  /*margin-top: 16px;
  padding: 0 32px*/
}

.startCrposs_2col p::before {
  content: '✓'; /* 表示するチェックマークの文字 */
  
  /* ▼ 参考画像に似せたデザイン調整 */
  color: #29ABE2; /* チェックマークの色 */
  font-size: 1.4em; /* マークの大きさ */
  font-weight: bold; /* マークの太さ */
  margin-right: 0.5em; /* マークと文字の間隔 */
  
  /* 環境によるズレを防止 */
  line-height: 1; 
}
.startCrpss_2col img {
	width:50%;
}

.bg_grey{
	background-color: #ebf0f5;
}

#system .lead{
	
}

.system-con01{
	padding: 200px 0;
}
.system-con01>div>div{
	text-align: left;
	position: relative;
}


.system-con01>div>div>h2{
	text-align: left;
	margin-bottom: 10px;
}
.system-con01>div>div>.lead{
	margin-bottom: 0;
}
.demo{
	width: 368px!important;
}

.sys_logo{
	width: 534px;
	margin-bottom: 40px;
	
}

.text_left{
	text-align:left;
	font-size: 1.4rem;
	line-height: 1.8rem;
	margin-top: 40px;
}
.sys01{
	width: 534px;
	position:absolute;
	right: calc(100%-1120px);
	top: 200px;
}

.system-con03{
	margin-top: 100px;
}

.easydata{
	margin-top: 0;
}

.system-con03-lead01{
	width: 100%;
	text-align: left;
	text-justify: inherit;
}


/* -- Srvice > Case Study -- */
.system-con04{
	margin-top: 100px;
}

#casestudy h2 {
	text-align:left;
	margin:0 0 0.3em;padding:0;
}

#casestudy .lead {
	text-align:left;
	margin-bottom:50px;
}
.case_L h3,
.case_R h3 {
	margin:0 0 1em;
	padding:1em 0 0;
	line-height:1.2em;
	}

.case_L img.casestudyImg{
	display:inline-block;
	float:left;
	margin-right:20px;
	margin-bottom:20px;
	width:350px;
}
.case_L h3 {text-align:left;}

.case_R img.casestudyImg{
	float:right;
	margin-left:20px;
	margin-bottom:20px;
	width:350px;
}
.case_R h3 {text-align:right;}


@media screen and (max-width: 640px) {
	.case_L img.casestudyImg,
	.case_R img.casestudyImg{
		width:70%;
		margin-left:15%;
		margin-right:15%;
		clear:both;
	}
}

.system-con04-lead01{
	width: 100%;
	text-align: center;
	text-justify: inherit;
}

.system-con04-voice{
	width: 100%;
	text-align: left;
	text-justify: inherit;
}

/* -- //Srvice > Case Study -- */


.commerce{
	width: 267px;
	margin-bottom: 30px;
}

.uiux, .sys02{
	margin-bottom: 150px;
}
.sys02{
	filter: drop-shadow(0 0 5px #f0f0f0);
}
.coming{
	padding: 150px 0;
}

.system-con01-text{
	margin: 100px 0 0;
}


.functions{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.functions>div{
	width: 550px;
	background: #fff;
	border-radius: 20px;
	padding: 20px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}	
.functions div img{
	width: 95px;
	height: 80px;
	margin: 0 20px 0 0;
}

.functions div a{
	text-align: left;
}

.functions div a:first-of-type{
	margin: 0 0 10px 0;
}

.blank{
	background: #dbe2ea!important;
}


/******************************************************************************************************************************system.html用*/



/**********************************************************************pricing.html用*/
.pricing-con01{
/*	padding: 200px;*/
    padding-top: 200px;
    padding-bottom: 200px;
}
.pricing-con01-text{
	margin-top: 20px;
	margin-bottom: 100px;
}
.pricing-con01>.con03>.con02{
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.pricing-con01>.con03>h3>span{
	font-size: 0.7em;
}

.pricelist{
	width: 30%;
	border: solid 1px #28b4c8;
}

.popular{
	border: solid 1px #004376;
	border: solid 1px #168fb3;
}

.plan{
	background: #28b4c8;
	height: 60px;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	vertical-align: middle;
	padding-top: 20px;
	letter-spacing: 0.1em;
}

.popular>.plan{
	background: #004376;
	background: #168fb3;
	height: 100px;
}
.popular>.plan>span{
	font-size: 18px;
	color: #faffd7;
}

.plicespace{
	color: #28b4c8;
	font-weight: 700;
	padding: 30px;
	font-size: 1.5em;
	height: 200px;
}
.plice{
/*	font-size: 1.5em;*/
    font-size: 30px;
	padding: 10px;
}

.popular>.plicespace{
/*	color: #004376!important;*/
	color: #168fb3;
}

.Professional>.plicespace>a>span{
	font-size: 24px;
	color: #28b4c8;
	line-height: 1.2em;
}

/* button:sttoday */
.sttoday-pc{
	width: 380px;
	margin: 8px auto 100px;
}
.sttoday-pc img{
	transition: all 0.5s;
}

.sttoday-pc img:hover{
	opacity: 0.8;
	transform:scale(1.1,1.1);
}

.sttoday img{
	width: 80%;
	margin: 20px auto 100px;
	transition: opacity 0.5s ease-in-out 0s;
}

.sttoday img:hover{
	opacity: 0.8;
}

/* button:getplan */
.getplan-pc{
	width: 300px;
	margin: 50px auto;
}
.getplan-pc img{
	transition: all 0.5s;
}

.getplan-pc img:hover{
	opacity: 0.8;
	transform:scale(1.1,1.1);
}


.getplan img{
	width: 80%;
	margin: 0 auto 30px;
	transition: opacity 0.5s ease-in-out 0s;
}

.getplan img:hover{
	opacity: 0.8;
}

.cheklist>a{
	margin: 20px;
}
.cheklist>img{
	width: 40px;
	margin: 0 0 30px;
}



.Professional>.cheklist>img{
	opacity: 0.3;
}

.pricing-con01>.con03>table, .pricelist-pc{
	width: 100%;
}

.pricing-con01>.con03>table, .pricing-con01>.con03>table td, .pricing-con01>.con03>table th,  .pricelist-pc, .pricelist-pc td, .pricelist-pc th{
	border: solid 1px #2faabd;
	border-collapse: collapse;
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	font-size: 18px;
	vertical-align: middle;
}
.pricing-con01>.con03>table td, .pricing-con01>.con03>table th, .pricelist-pc td, .pricelist-pc th{
	padding: 20px;
}
.pricing-con01>.con03>table th, .pricelist-pc th{
	color: #fff;
	background: #28b4c8;
	font-weight:500;
	border-left: solid 1px #fff;
	border-right: solid 1px #fff;
}

.prices td{
	color: #2faabd;
	font-weight: 500;
	line-height: 1.5em;
}
.prices td span{
	color: #2faabd;
	font-weight: 500;
	line-height: 1.5em;
	font-size: 2em;
}
.pricelist-pc th{
	width: 25%;
}

.pricelist-pc td img{
	width: 40px;
}

.pricing-con01>.con03>table th:first-child{
	border-left: solid 1px #2faabd;
}
.pricing-con01>.con03>table th:last-child{
	border-right: solid 1px #2faabd;
}
.pricing-con01>.con03>table td img{
	width: 20px;
}
/*
.pricing-con01>.con03>table td:first-child{
	text-align: left;
	color: #2faabd;
	font-weight: 500;
}
*/
.oms-popular{
	background: #004376!important;
	color: #faffd7!important;
	font-size: 1.2em!important;
}
.prices>td:nth-child(3), .prices>td:nth-child(3)>span{
	color: #004376!important;
}

.pricelist-pc td:first-child, .oms-use td:first-child{
	background: #ebf0f5;
	color: #3c4141;
	text-align: left;
	font-weight: 500;
}



.oms-prices td{
	color: #2faabd;
	font-weight: 500;
	line-height: 1.5em;
}
.oms-prices td span{
	color: #2faabd;
	font-weight: 500;
	line-height: 1.5em;
	font-size: 2em;
}
.oms-use td{
	font-size: 24px;
}
.oms-use td span{
	font-size: 2em;
}
.oms-use td:first-child{
	width: 25%;
}
.oms-use td img{
	width: 40px!important;
}


.jpy{
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	font-weight: 400;
	text-align: right;
	font-size: 18px;
	position:relative;
	right: 0;
	top: -70px;
}


/**********************************************************************pricing.html用*/



/**********************************************************************faq.html用*/
.faq-con01{
	padding: 200px;
}

.faq-subhead{
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	text-align: left;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 40px;
}

.faq-con02{
	margin-bottom: 100px;
}

.faq-con02 a{
	text-align: left;
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	position: relative;
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	width: 100%;
	line-height: 60px;
	min-height: 60px;
}


.faq-con02 a:nth-of-type(odd){
	font-size: 20px;
	font-weight: 500;
	padding: 0 0 0 70px;
	background-image: url("../tpimges/faq-icon01.png");	/* [？]*/
	background-repeat: no-repeat;
	background-position: left 0 top 0;
	background-size: 60px 60px;
	vertical-align: middle;
}



.faq-con02 a:nth-of-type(even){
	font-size: 18px;
	font-weight: 400;
	padding: 0 0 0 140px;
	background-image: url("../tpimges/faq-icon02.png");	/* [！]*/
	background-repeat: no-repeat;
	background-position: left 70px top 0;
	background-size: 60px 60px;
	vertical-align: middle;
}


.click:visited, .click:link, .click:active{
	color: inherit;
}

.faq-con02 a span{
	color: #2faabd;
	font-weight: 700;
	transition: opacity 0.5s ease-in-out 0s;
}

.faq-con02 a span:hover{
	opacity: 0.8;
}


.faq-con02 hr{
	border: solid 1px #2faabd;
	margin: 30px 0;
}

/**********************************************************************faq.html用*/


/**********************************************************************blog.html用*/

.blog-con01{
	padding: 200px 0;
	background: #ebf0f5;
	width:100%;
}
.con-blog{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0;
}
.con-blog>div{
	width: 350px;
	padding: 20px;
	background: #fff;
	border-radius: 20px;
	text-align: left;
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	vertical-align: bottom;
	margin: 0 0 50px;
	/*box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);*/
	position: relative;
}
.con-blog>div>a{
	margin: 10px 0 0 0;
}

.con-blog>div>img{
	border-radius: 20px;
	height: 230px;
	object-fit: cover;
}

.blogmore-con01 a span{
	color: #2faabd!important;
	font-weight: 700;
	transition: opacity 0.5s ease-in-out 0s;
}

.blogmore-con01 a span:hover{
	opacity: 0.8;
}

.date{
	margin-right: 10px!important;
	font-size: 16px;
}
.kinds{
	display: inline-block;
	color: #fff;
	background: #28b4c8;
	padding: 5px 10px;
	font-size: 11px;
	border-radius: 3px;
	font-weight: 700;
	margin: 10px 0 0 0;
}

.blog-text{
	font-weight: 400;
	line-height: 1.5em;
	font-size: 16px;
	text-align:left;
}
.blog-text .subhead {
	font-size: 19px;
	font-weight: 600;
}

.more{
	text-align: center!important;
	background: #28b4c8;
	padding: 10px 20px;
	border-radius: 16px;
	width: 100px;
	margin: 20px auto;
	transition: opacity 0.5s ease-in-out 0s;
	}

.con-blog .more{
	position:absolute;
	top: 415px;
	left: 120px;
}



.more:hover{
	opacity: 0.8;
}

.more a, .more a:visited, .more a:active{
	font-size: 14px!important;
	color: #FFF!important;
}

.con-blog>div>.subhead{
	font-size: 16px;
	font-weight: 700;
	line-height:1.5em;
}


/**********************************************************************blog.html用*/

/**********************************************************************blogmore.html用*/

.blogmore-con01{
	padding: 200px 0; 
}
.blogmore-con01>div{
	text-align: left;
	width: 800px;
	margin: 0 auto;
/*	font-family: 'Noto Sans JP', sans-serif;	*/
}

.blogmore-con01>div>img{
	border-radius: 20px;
}

.blogmore-con01>div>a{
	overflow-wrap: break-word;
}

.blogmore-con01>div>.subhead{
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	font-size: 22px;
}

.blogmore-con01>div>.date{
	display: inline-block;
	margin-right: 10px!important;
	margin: 20px 0;
}

.blogmore-con01>div>.more{
	margin-top: 100px;
}

.con02-blog a{
	text-align: left;
	font-weight: 400;
	line-height: 1.5em;
	font-size: 16px;
}

.blog-outline-title{
	margin: 50px 0 0;
	font-weight: 500;
	font-size: 18px;
}

.blog-outline{
	margin: 10px 0;
	color: #28b4c8;
	text-indent: -1.1em;
	padding-left: 1.1em;
	line-height: 1.2em;
}

.con02-blog {
	padding-top: 100px;
}

.con02-blog h4{
	color: #28b4c8;
	margin: 50px 0;
}
.quote{
	padding-top: 30px;
}

.quote, .quote:visited, .quote:active{
	color: #3c4141!important;
}


.blog-bottun{
	padding: 10px;
	margin-top: 30px!important;
}
/**********************************************************************blogmore.html用*/
/**********************************************************************startcross.html&growcross.html用*/
.cross{
	align-items: center;
}
.cross>img{
	width: 500px;
	margin-right: 30px;
}
.cross>a{
	width: 540px;
	text-align: left;
	line-height: 1.5em;
}
.serviceflow-explain{
	display: flex;
	align-items: center;
	margin-bottom: 60px;
}
.serviceflow-explain>img{
	height: 24px;
	width: auto;
	margin-right: 5px;
}
.serviceflow-explain>a{
	font-size: 22px;
	font-weight: 500;
	margin-right: 24px;
}
.overview{
	background-image: url("../tpimges/overview_e.jpg");
	background-size: contain;
	width: 1120px;
	height: 717px;
	position: relative;
	background-repeat: no-repeat;
}

.grow{
	background-image: url("../tpimges/overview-grow02.png");
	height: 737px;
}

.overview>div{
	text-align: left;
	position: absolute;
	right: 50px;
	bottom: 50px;
}
.overview>div>a{
	margin: 5px 0;
	font-size: 14px;
}
.overview>div>.headline{
	font-size: 16px;
	font-weight: 500;
	color: #00416e;
}

.overview>div>a>span{
	font-size: 4px;
	color: #00416e;
}
.directshopplan {
	width:100%;
	margin:10px auto;
}
.directshopplan a {
	font-size:13px;
	margin-left:25px;
	text-indent:-0.8em;
	line-height:1.5em;
	text-align:left;
	color:#00416e;
}

.comment{
	display: flex;
	justify-content: space-around;
	margin-bottom: 100px;
}
.comment>div>a{
	font-size: 18px;
	height: 60px;
	width: 610px;
	background: #f8f5dc;
	border-radius: 20px;
	padding-top: 20px;
	margin-bottom: 35px;
  	position: relative;
}

.comment>div>a::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #f8f5dc;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.ml-100{
	margin-left: 100px;
}
.comment>img{
	width: 295px;
	height: 475px;
	margin-top: 50px;
}
.cross-head {}
.cross-lead{
	font-size: 20px;

}

.process-grow{
	display: flex;
	justify-content: space-between;
	margin-bottom: 100px;
}


.process-grow>div>a {
/*	font-family: 'Noto Sans JP', sans-serif;	*/
	font-size: 16px;
	line-height: 1.5em;
	font-weight: 400;
}

.process-grow>div{
	width: 360px;
	padding: 15px;
	text-align: left;
	background: #fff;
	border-radius: 20px;
	margin-bottom: 30px;
	box-shadow: 0 0 20px #f0f0f0;
}

.styled-table {
        border-collapse: collapse; /* ボーダーを重ねる */
        margin: 25px 0;
        font-size: 0.9em;
        font-family: 'Helvetica', 'Arial', sans-serif; /* フォントを指定 */
        min-width: 400px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* テーブルに影をつける */
        width: 100%;
    }
    
    .styled-table .WidthF {
    color:#ffffff;
    font-size: 26px;

    }

    /* テーブルのヘッダー行のスタイル */
    .styled-table thead tr {
        background-color: #28b4c8; /* ヘッダーの背景色 */
        color: #000000; /* ヘッダーの文字色 */
        text-align: center; /* 中央揃え */
        font-weight: bold;
    }

    /* テーブルのセル（thとtd）の共通スタイル */
    .styled-table th,
    .styled-table td {
        padding: 26px 15px; /* セルの内側余白 */
        border: 1px solid #dddddd; /* セルの境界線 */
    }

    /* テーブルのボディ（tbody）の行のスタイル */
    .styled-table tbody tr {
        border-bottom: 1px solid #dddddd;
    }

    /* 奇数行の背景色 */
    .styled-table tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }

    /* チェックマークのセルを中央揃えにする */
    .styled-table .checkmark {
        text-align: center; 
    }

/**********************************************************************startcross.html&growcross.html用*/









.mob{
	display: none!important;
}



/**********************************************************************モバイル用*/

@media screen and (max-width: 640px) {

	.mob{
		display: block!important;
	}

	.pc{
		display: none;
	}

	.color-w{
		color: white;
	}

	.mb50{
		margin-bottom: 50px;
	}
	.mt50{
		margin-top: 50px;
	}
	.contact-us{
		width: 100%;
		margin: 45px 0 17px 0;
		display: inline-block;
	}
	.dl-document{
		width: 100%;
		margin: 30px auto 0;
		display: inline-block;
	}

	.main{
		padding: 90px 0 0;
		background: -webkit-linear-gradient(135deg, #f7fffe 0%, #d5f8fe 100%);
		background: -o-linear-gradient(135deg, #f7fffe 0%, #d5f8fe 100%);
		background: linear-gradient(135deg, #f7fffe 0%, #d5f8fe 100%);
	}
	.main>.con03{
		padding-bottom: 50px;
		text-align: left;
		background-image: none;
	}

	.con04{
		width: 100%;
		display: flex;
	}

	.main>.con03>.con04{
		flex-direction: column;
		justify-content: space-between;
	}

	.main>.con03>.con04>div{
		text-align: left;
		width: 100%;
	}
	.topill{
		margin-top: 0;
		width: 100%!important;
	}

	.animation-ill{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 70px;
		padding-bottom:2em;
	}
	.animation-ill{
		margin: 0 auto;
	}
	.animation-ill>div{
		margin-top: 30px;
	}


	.ani-01{
		height: 47px;
	}
	.top-ill-text01{
		color: #28b4c8;
		font-size: 20px;
		font-weight: 700;
		margin: 20px 0;
	}
	.top-ill-text02{
		color: #28b4c8;
		font-size: 40px;
		font-weight: 700;
		margin: 20px;
	}


	h1{
		font-weight: 700;
		font-size: 35px;
		text-align: left;
		color: #28b4c8;
		margin-top: 0;
	}
	
	.lead-main{
	/*	font-family: 'Noto Sans JP', sans-serif;	*/
		margin-top: 10px;
	}

	.download{
		width: 100%;
		margin: 50px auto 0;
	}

	.contact-us-top{
		width: 100%;
		margin: 20px auto 0!important;
		text-align: center;
	}
	.contact-us-top>img{
		width: 80%;
		margin: 0 auto;
	}

	.ill-main{
		width: 90%;
		position: relative;
		left: 480px;
		top: -300px;
	}
	
	
	.ill-plan{
		width: 100%;
		margin: 0 auto;
		border-radius: 10px;
		box-shadow: 0 0 20px #f7f8f4;
	}
	
	.bottun-plan{
		width: 100%;
	}	
	.topill{
		width: 80%;
		margin: 20px auto 0;
	}
	.plans{
		flex-direction: column;
	}
	.plans>div{
		margin-bottom: 10px;
	}
	
	.plans>div{
  width: 100%;
}
.columns_2 {
  display: grid;
  grid-template-columns: 1fr; /* 列を1つに設定 */
  gap: 15px; /* 各要素の間の隙間 */
  padding: 10px;
}
	.	ob-pb20{
		padding-bottom: 20px!important;
	}

	.sideopacity{
		height: 80px;
		background-image: linear-gradient(to right, rgba(235,240,245,1.00) 0%, rgba(235,240,245,0.00) 15%, rgba(235,240,245,0.00) 85%, rgba(235,240,245,1.00) 100%);
		margin-top: -80px;
		position: relative;
		color:  
	}


	.con02, .con03{
		width: 100%;
		margin: 0 auto;
		padding: 0 5%;
	}

	.con02{
		padding: 80px 5% 36px 5%;
	}

	.con02 h2{
		text-align:center;
	}

	.reasons{
		background-color: #003250;
	}

	.process, .system-con02{
		background-color: #ebf0f5;
	}
	.system-con01, .pricing-con01, .faq-con01, .con-blog, .blog-con01, .blogmore-con01{
		padding: 50px 0 150px;
	}
	footer{
		background-color: #003250;
		padding: 50px 0 100px;
		padding:45px 0 45px;
	}

	#services>div>h2{
		font-size: 35px;
		font-weight: 700;
		color: #28b4c8;
		margin-bottom: 20px;
		text-align: center;
	}

	.lead{
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 50px;
		text-align: left;
	}

	h3{
		font-size: 1.45rem;
		font-weight: 300;
		margin-bottom: 30px;
	}
	.main>.con03>h3{
		font-size: 28px;
		margin-bottom: 15px;
	}
	
	

	.premise {
	margin-top:5em;
	width:100%;
	}

	.services-con{
		flex-direction: column;
	}

	.services-con div.about_cmr,
	.services-con div.about_airtrade,
	.services-con div.history{
		width: 100%;
		margin-bottom: 50px;
	}

	.services-con>div.about_cmr img.logo{height:auto;width:65%;border-radius:0;}
	.services-con>div.about_airtrade img.logo{height:auto;width:65%;border-radius:0;}

	.services-con a{
		text-align: left;
		margin-right: 0;
		line-height: 1.3em;
	}

	.services-con img{
		border-radius: 20px;
		margin-top: 20px;
	}
	.history {margin-top:40px;}

	.reasons-list{
		width: 100%;
		display: list-item;
		margin: 50px 0 0 0;
	}
	.reasons-list li{
		display: block;
		text-align: left;
		color: #fff;
		font-size: 18px;
		font-weight: 500;
		height: auto;
		padding-left: 35px;
		background: url("../tpimges/check.png") left 0px top 0 no-repeat;
		background-size: 30px auto;
		align-items: center;
		padding-top: 5px;
		margin-bottom: 20px;
	}
	.short{
		height: 30px!important;
	}
	
	.reasons-ill{
		height: auto;
		width: 100%;
		align-items: flex-end;
		flex-wrap: wrap;
	}
	.reasons-ill img:first-child{
		width: 100%;
	}

	.reasons-ill img:last-child{
		width: 50%;
		margin-left: 25%;
	}

	.reasons-graph{
		background: #fff;
		padding: 5%;
		border-radius: 20px;
		box-shadow: 0 0 20px #333;
	}
	h4{
		font-weight: 400px;
		font-size: 18px;
	}

	.reasons-graph h4{
		color: #003250;
		margin-bottom: 15px;
	}

	.keyservices div a, .award-text{
		text-align: left;
		line-height: 1.5em;
		font-family: 'Noto Sans JP', sans-serif;/*		*/
		font-weight: 400;
		margin-bottom: 50px;
	}

	.img-radius{
		border-radius: 20px;
		box-shadow: 0 0 20px #f0f0f0;
	}
	
	.prcmrobo h3 {
		font-size: 23px;
		line-height:1.1em;
	}

	.process-con01{
		display: flex;
		flex-direction: column;
		margin-bottom: 100px;
	}

	.process-con01>div{
		width: 100%;
		padding: 15px;
		text-align: left;
		background: #fff;
		border-radius: 20px;
		margin-bottom: 30px;
		box-shadow: 0 0 20px #f0f0f0;
	}



	.process-con01>div>a {
	/*	font-family: 'Noto Sans JP', sans-serif;	*/
		font-size: 16px;
		line-height: 1.5em;
		font-weight: 400;
	}
	.subhead, .subhead-2{
		color: #28b4c8;
		font-size: 18px;
		font-weight: 600!important;
		margin-bottom: 15px;
	}
	.subhead-2{
		text-align: center;
		color: #3c4141;
	}
	.process-con01-big{
		width: 100%!important;
	}

	.process-con02{
		display: flex;
		flex-direction: column;
		margin-bottom: 150px;
	}

	.process-con02 div{
		width: 100%;
		padding: 20px;
		background: #fff;
		border-radius: 20px;
		text-align: left;
		box-shadow: 0 0 20px #f0f0f0;
		margin-bottom: 30px;
	}

	.process-con02 div img{
		margin-bottom: 10px;
	}
	.process-con02 div img:hover{
	  transform:scale(1.1,1.1);
	}
	.process-con02 div a{
		font-size: 16px;
	/*	font-family: 'Noto Sans JP', sans-serif;	*/
		font-weight: 400;
		line-height: 1.2em;
	}

	.process .con02 h4 {
		font-size:110%;
		line-height:1.3em;
	}

	.process .con02 h4 span {
		font-size:70%;
		color:#28b4c8!important;
	}
	.awards-imgs{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 70px;
	}
	.awards-imgs img{
		height: 70px;
		width: auto;
		margin-bottom: 15px;
	}

/*
	.footer-logo_at{
		position: relative;
		width: 260px;
		margin: 0 auto 30px;
	}

	.with{
		color: #fff;
	}

	.sns{
		width: 100%;
		margin: 0 auto;
		height: 60px;
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.sns a{
		width: 19%;
		height: auto;
	}
*/
	.footer-text {
		text-align: left;
		display: flex;
		flex-direction: column;
		margin-top: 30px;
	}

	.footer-text div a{
		color: #fff;
		text-align: left;
		text-align: center;
		margin-right: 0;
		line-height: 1.2em;
	}


	.footerlogos{
		width: 100%;
		border-radius: 20px;
		margin-top: 30px;
	}

	.company{
		font-size: 22px;
	}
	.footer-links{
		margin: 20px 0;
	}

	.footer-links.narrow{ margin: 20px 0 0;}
	.footer-links.wide	{ margin: 0;}


	.movie>.con02>div{
		display: flex;
		flex-direction: column;
	}
		
		.movie>.con02>div>div{
			margin-bottom: 30px;
		}

	.movie>.con02>div>div>video{
		width: 100%;
		height: 200px;
	width: 100%;
	height: calc(200px *1.8);
	}

	.movie>.con02>div>div>a{
		color: #fff;
		margin-top: 10px;
		font-size: 23px;
	}
	.color-b{ margin-top: 14px;
	}
	
/******************************20250911ここから書き込む*******************************/
	
	.plans-container {
  padding: 10px 0 42px 0;
}
.plan-box {margin: 0 16px 0 16px;}

.strongT{
width:100%;
  margin: auto;
   margin-top: 80px;
   margin-bottom: 80px;
}

.strong pT{
	padding:16px 0;
}


.columns_2{
display: grid;
  width: 100%;
  margin: auto;

  
}

.whiteT {
  margin-top: 50px;
}
.flex-container > div {
  flex: 1;
  padding: 32px;
}
.flex-container img {
  max-width: 100%;
  height: auto;
  margin: 0;
	padding: 0 40px 0 0;
}

}

	
/**********************************************************************system.html-モバイル用**************/
@media screen and (max-width: 640px) {

 .features-container {
    grid-template-columns: 1fr; /* 1列にする */
  }

.flex-container {
 display: block; /* 各divがブロック要素として縦に並ぶ */
}

.section_box {
width: 100%;
  margin: auto;

}

.responsive-container {
  display: block; /* スマホデフォルトは1列 */
  padding: 10px;
  background-color: #fff; /* 背景白 */
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影 */
  margin: 20px auto; /* 上下の余白と中央寄せ */
  max-width: 900px; /* 最大幅の設定 */
  box-sizing: border-box; /* パディングを幅に含める */
}

.responsive-container > div {
  margin-bottom: 20px; /* スマホ時の各セクションの下余白 */
  padding: 10px; /* 各セクションのパディング */
}


 .testimonial-content {
   border-left: none;
  }
  
  
/* 著者情報のスタイル */
.testimonial-author-info {
  text-align: center; /* 中央寄せ */
  /* ここに必要ならFlexboxやGridで画像とテキストを調整 */
}

.author-image {
  width:50%;
  border-radius: 50%; /* 丸い画像にする */
  object-fit: cover; /* 画像の比率を保ちつつ表示 */
  margin-bottom: 10px;
}

.author-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.author-title {
  color: #666;
  font-size: 0.9em;
}

/* 引用コンテンツのスタイル */
.testimonial-content h2 {
  font-size: 1.5em; /* フォントサイズ調整 */
  color: #333;
  margin-bottom: 15px;
}

#ch .lead {
    width: 100%;
}
	.system-con01{
		padding: 100px 0;
		text-align: left;
	}
	h2{
		font-size: 35px;
		/*text-align: left;*/
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	
.system-con01 > div > div > h2{

text-align: center;
}
.con03 h2 {
text-align: center;
}
	.system-con01>div>.lead{
		margin-bottom: 50px;
	}

	.system-con03{
		margin-top: 0;
	}
	.system-con01>.con03{
	display: flex;
	flex-direction: column;
	}
	.demo{
	width: 100%!important;
	}


	.system-con04{
		margin-top: 100px;
	}

	img.casestudy{
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 20px;
	}

	img.casestudy.pc{
		display: none;
	}
	.system-con04-lead01{
		width: 100%;
		text-align: left;
		text-justify: inherit;
		margin-bottom: 150px;
	}

.sys_logo{
	width: 100%;
	margin-bottom: 36px;
}
.text_left{
 font-size: 1.3rem;
 line-height: 1.7rem;
}

	.sys01{
		width: 100%;
		position:relative;
		right: 0;
		top: 48px;
	}

	.functions{
		display: flex;
		flex-wrap: wrap;
	flex-direction: column;
	}
	.functions>div{
		width: 100%;
		background: #fff;
		border-radius: 20px;
		padding: 5%;
		margin-bottom: 20px;
	}	
	.functions div img{
		width: 95px;
		height: 80px;
		margin: 0 auto;
	}

	.functions div a{
		text-align: left;
	}

	.blank{
		background: #dbe2ea!important;
	}
}

/**********************************************************************system.html-モバイル用**************/
	
/**********************************************************************pricing.html-モバイル用**************/
@media screen and (max-width: 640px) {
	
	.pricing-con01	{
		padding-top: 100px;
		text-align: left;
	}
	
	.pricing-con01>div>.lead{
		margin: 50px 0;
	}
	
	.pricing-con01-text{
		margin-top: 10px;
		margin-bottom: 100px;
		font-size:80%;
	}
	.pricing-con01>.con03>.con02{
		padding: 0;
		flex-direction: column;
	}

	.pricelist{
		width: 100%;
		margin-bottom: 5%;
	}
	
	.oms-prices td{
		color: #2faabd;
		font-weight: 500;
		line-height: 1em;
	}
	.oms-prices td span{
		color: #2faabd;
		font-weight: 500;
		line-height: 1em;
		font-size: 1.8em;
	}
	.oms-use td{
	font-size: 24px;
	}
	.oms-use td span{
		font-size: 1.2em;
	}
	.oms-use td:first-child{
		width: 38%;
		font-size: 24px;
	}

	.oms-mob{
		border: solid 1px #2faabd;
		margin-bottom: 5%;
	}
	.oms-mob a{
	/*	font-family: 'Noto Sans JP', sans-serif;	*/
		font-weight: 400;
	}
	.oms-title{
		color: #fff;
		background: #2faabd;
		font-size: 24px;
		padding: 20px;
	}
	.oms-plan-1{
		margin-top: 30px;
	}
	.oms-plan-2{
		font-size: 24px;
		line-height: 1.5em;
		font-weight: 500!important;
		color: #2faabd;
		margin: 5px 0 30px;
	}
	.oms-plan-2 img{
		width: 40px;
		margin: 10px 0 30px;
		margin:  0 0;
	}
	.jpy{
		top: -20px;
	}
}

/**********************************************************************pricing.html-モバイル用**************/
	
/**********************************************************************faq.html用*/
@media screen and (max-width: 640px) {
	.faq-con01{
		padding-top: 100px;
	}

	.faq-con01>div>.lead{
		word-wrap: break-word;
	    overflow-wrap: break-word;
		margin: 50px 0;
	}	


	.faq-subhead{
	/*	font-family: 'Noto Sans JP', sans-serif;	*/
		text-align: left;
		font-size: 32px;
		font-weight: 700;
		margin-bottom: 40px;
	}

	.faq-con02{
	}

	.faq-con02 a{
		line-height: 30px;
	}
	.faq-con02 a:nth-of-type(odd){/* [？]*/
		margin-bottom: 20px;
	}


	.faq-con02 a:nth-of-type(even){/* [！]*/
		padding: 0 0 0 70px;
		background-position: left 0 top 0;
	}

	.faq-con02 hr{
	}

	.lh:{
		line-height: 90px!important;
	}
}
/**********************************************************************faq.html用*/
	
/**********************************************************************blog.html用*/

@media screen and (max-width: 640px) {

	.blog-con01{
		padding: 100px 0;
	}
	.con-blog{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0;
	}
	.con-blog>div{
		width: 100%;
		padding: 20px;
		background: #fff;
		border-radius: 20px;
		text-align: left;
	/*	font-family: 'Noto Sans JP', sans-serif;	*/
		vertical-align: bottom;
		margin: 0 0 5%;
	}
	.con-blog>div>a{
		margin: 10px 0 0 0;
	}

	.date{
		margin-right: 10px!important;
	}
	.kinds{
		display: inline-block;
		color: #fff;
		background: #28b4c8;
		padding: 5px 10px;
		font-size: 11px;
		border-radius: 3px;
		font-weight: 700;
		margin: 10px 0 0 0;
	}

	.blog-text{
		font-weight: 400;
		line-height: 1.5em;
	}

	.more{
		text-align: center;
		background: #28b4c8;
		padding: 10px 20px;
		border-radius: 16px;
		width: 100px;
		margin: 20px auto;
		transition: opacity 0.5s ease-in-out 0s;
	}
	.con-blog .more{
		position:static;
	}
	.more:hover{
		opacity: 0.8;
	}

	.more a, .more a:visited, .more a:active{
		font-size: 14px;
		color: #FFF!important;
	}
}

/**********************************************************************blog.html用*/

/**********************************************************************blogmore.html用*/

@media screen and (max-width: 640px) {
	.blogmore-con01{
		padding: 100px 0; 
	}
	.blogmore-con01>div{
		text-align: left;
		width: 100%;
		margin: 0 auto;
	/*	font-family: 'Noto Sans JP', sans-serif;	*/
	}

	.blogmore-con01>div>img{
		border-radius: 20px;
	}

	.blogmore-con01>div>a{
		overflow-wrap: break-word;
	}

	.blogmore-con01>div>.subhead{
	/*	font-family: 'Noto Sans JP', sans-serif;	*/
		font-size: 32px;
	}

	.blogmore-con01>div>.date{
		display: inline-block;
		margin-right: 10px!important;
		margin: 20px 0;
	}

	.blogmore-con01>div>.more{
		margin-top: 100px;
	}
}

/**********************************************************************blogmore.html用*/
/**********************************************************************startcross.html&growcross.html用*/
@media screen and (max-width: 640px) {
	.cross{
		flex-direction: column;
	}
	.cross>img{
		width: 100%;
		margin-right: 0;
	}
	.cross>a{
		width: 100%;
		text-align: left;
		line-height: 1.5em;
	}
	.serviceflow-explain{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 60px;
	}
	.serviceflow-explain>img{
		height: 20px;
		width: auto;
		margin-right: 5px;
	}
	.serviceflow-explain>a{
		font-size: 22px;
		font-weight: 500;
		margin-right: 24px;
	}
	.overview{
		background-image: none;
		background-size: contain;
		width: 100%;
		height: auto;
		position: relative;
	}
	.grow{
		background-image: none;
	}
	.overview>div{
		text-align: left;
		position: absolute;
		right: 50px;
		bottom: 50px;
	}
	.overview>div>a{
		margin: 5px 0;
		font-size: 11px;
	}
	.overview>div>.headline{
		font-size: 16px;
		font-weight: 500;
		color: #00416e;
	}

	.overview>div>a>span{
		font-size: 4px;
		color: #00416e;
	}

	.directshopplan {
	}
	.directshopplan a {
		font-size:12px;
		text-indent:-0.8em;
		margin-left:1em;
	}

	.comment{
		display: flex;
		flex-direction: column;
		margin-bottom: 100px;
	}
	.comment>div>a{
		font-size: 16px;
		height: auto;
		width: 90%;
		background: #f8f5dc;
		border-radius: 20px;
		padding: 20px;
		margin-bottom: 35px;
		position: relative;
	}

	.comment>div>a::before{
	  content: '';
	  position: absolute;
	  display: block;
	  width: 0;
	  height: 0;
	  left: 50%;
	  top: 70px;
	  border-top: 15px solid #f8f5dc;
	  border-right: 15px solid transparent;
	  border-left: 15px solid transparent;
	}

	.ml-100{
		margin-left: 10%;
	}
	.comment>img{
		width: 45%;
		height: auto;
		margin: 0 auto 30px;
	}
	.process-grow{
		display: flex;
		flex-direction: column;
		margin-bottom: 100px;
	}

	.process-grow>div{
		width: 100%;
		padding: 15px;
		text-align: left;
		background: #fff;
		border-radius: 20px;
		margin-bottom: 30px;
		box-shadow: 0 0 20px #f0f0f0;
	}



	.process-grow>div>a {
	/*	font-family: 'Noto Sans JP', sans-serif;	*/
		font-size: 16px;
		line-height: 1.5em;
		font-weight: 400;
	}
	.process-grow>div>.subhead{
		color: #3c4141;
	}
	.subhead, .subhead-2{
		color: #28b4c8;
		font-size: 18px;
		font-weight: 600!important;
		margin-bottom: 15px;
	}
	
	 .startCropss_2colbox {
   display: block;

    
  }
}
/**********************************************************************startcross.html&growcross.html用*/
@media screen and (max-width: 640px) {

	.pc{
		display: none!important;
	}
}


/******* #kr ********/
#kr {
font-family: 'NanumGothicLight';
font-family: 'NanumGothic';
font-family: 'NanumGothicBold';
font-family: 'NanumGothicExtraBold';
}

/* kr common */
body#kr	{font-family: 'Montserrat', 'Noto Sans JP', 'NanumGothicBold';}
#kr a	{font-family: 'Montserrat', 'Noto Sans JP', 'NanumGothic';}
#kr .pc-nav ul li a{ font-weight: 600;font-size: 16px;}
#kr .pc-nav{ margin: 22px 10px 0;}

#kr h1 { font-weight: 700;font-size: 46px; line-height:1.2em;}
#kr h2 { font-weight: 700;}
#kr.index h1 span.h1_catch {font-size: 31px; color:#28b4c8!important;line-height:1.3em; letter-spacing: -2.3px;}
.aisatu p {text-align: left; margin-top:24px; line-height:1.2em;}
.sub_title { line-height:1.2em; margin-bottom: 60px;}
#kr.index h1 { font-weight: 700;font-size: 25px; line-height:1.2em; letter-spacing: 0px;}
@media screen and (max-width: 640px) {
	#kr.index h1 span.h1_catch {font-size: 28px; color:#28b4c8!important;line-height:1.5em; letter-spacing: -1px;}
	#kr.index h1 {font-size: 18px; line-height:1.5em; letter-spacing: -1px;}
}
#kr.index h2 { font-weight: 700;font-size: 23px;}
#kr.index h3 { font-weight: 700;font-size: 29px; line-height:1.5em; letter-spacing: -1px;}
#kr.index h4 { font-weight: 700;}
#kr.index .lead { font-weight: 600; line-height:1.5em; text-align:center;}
#kr.index .lead-main { font-weight: 600;}

/* index */
#kr .overview{background-image: url("../tpimges/overview_k.jpg");}
#kr .grow{background-image: url("../tpimges/overview-grow02_k.png");}
#kr .overview>div{bottom: 20px;right: 120px;}
#kr .overview>div>a{margin: 0 0 0;font-size: 13px;}
#kr .overview>div>.headline{font-size: 16px;font-weight:600;padding:7px 0 2px;}
@media screen and (max-width: 640px) {
	#kr .overview{	background-image: none;}
	#kr .grow{	background-image: none;}
}

#kr .prcmrobo h3 {line-height:1.4em;}
@media screen and (max-width: 640px) {
	#kr .prcmrobo h3 {font-size: 21px;}
}

#kr h3.from_ovtworld {font-size: 22px;line-height:1.4em;letter-spacing: -1px;}

#kr .process h3 {font-size: 29px;}
#kr .process h4 {font-weight: 600;font-size:130%;text-align:left;line-height:1.3em;}
@media screen and (max-width: 640px) {
	#kr .process h3 {font-size: 29px;}
	#kr .process h4 {font-size: 18px;}
}

#kr .top-ill-text01{ font-weight: 600;}
#kr p.bound .com100 { font-weight: 800;right: -85px;}
#kr p.bound .over20 { font-weight: 800;right: -40px;}
@media screen and (max-width: 640px) {
	#kr p.bound .com100{ right: 25%;}
	#kr p.bound .over20{ right: 25%;}
}
#kr .premise a {width:60%;margin:0 auto 30px;}
#kr .premise a.lead2{width:10em;margin:0 auto 55px;line-height:1.8em;}
#kr .premise a.link {color:#28b4c8;text-align:center;}
#kr .premise h2 {font-size: 31px;line-height:1.3em;}
@media screen and (max-width: 640px) {
	#kr .premise a {width:100%;margin:0 auto 30px;}
	#kr .premise a.link {color:#28b4c8;text-align:center;}
	#kr .premise h2 {font-size: 6.7vw;line-height:1.1em;}
}

#kr .services h2 {line-height:1.1em;}
@media screen and (max-width: 640px) {
	#kr .services h2 {font-size: 27px;line-height:1em;}
}

/* index services-con */
#kr .services-con>div.about_cmr{width: 52%;	margin-right: 4%;}
#kr .services-con>div.about_airtrade{width: 44%;margin-right: 0;}
@media screen and (max-width: 640px) {
	#kr .services-con div.about_cmr,
	#kr .services-con div.about_airtrade{
		width: 100%;
		margin-bottom: 50px;
	}
	#kr .services-con div.about_cmr a,
	#kr .services-con div.about_airtrade a{
		font-size:14px;
	}
}

/* index-history */

#kr ul.reasons-list{
	width:600px;
	margin:0 auto;
	}
#kr .reasons-list li{
	font-size: 20px;
	background: url("../tpimges/check.png") left 0px top 7px no-repeat;
	background-size: 28px auto;
	}
@media screen and (max-width: 640px) {
	#kr ul.reasons-list{
		width:100%;
		margin-bottom: 20px;
		}
	
	#kr .reasons-list li.short{
		height:auto!important;
		font-size: 16px;
		background: url("../tpimges/check.png") left 6px top 6px no-repeat;
		background-size: 23px auto;
		display:block;
		margin-top:5px;
		margin-bottom: 5px;
		line-height:1.4em!important;
		}
		
	#kr .reasons-graph h4{
	font-size:16px;
	line-height:1.2em;
}
}



/* pricing */
#kr .pricing-con01>.con03>.lead{margin-bottom: 100px;}
#kr .pricing-con01>.con03 h3 span{font-size: 24px; line-height:1.9em;}
@media screen and (max-width: 640px) {
	#kr .pricing-con01>.con03>.lead{margin-bottom: 45px;}
}
#kr .oms-use td{font-size: 20px; line-height:1.2em;}
#kr .oms-use td:first-child{color: #3c4141;font-weight: 500;  font-size: 17px;letter-spacing: -1px;}
#kr .oms-prices td{color: #2faabd;font-weight: 500;line-height: 1em;}
#kr .oms-prices td span{color: #2faabd;line-height: 1em;font-size: 1.6em;}
@media screen and (max-width: 640px) {
	#kr .oms-use td{padding:20px 10px;font-size: 18px; line-height:1.2em;}
	#kr .oms-use td:first-child{padding:20px 10px;}
	#kr .oms-use td span{font-size: 1.2em;}
	#kr .oms-prices td span{font-size: 1.4em;}
}

#kr .keyservices div a, .award-text, .system-con01-text, .pricing-con01-text {font-family: 'NanumGothicBold';}

#kr .con02 .cross-lead {line-height:1.7em;}
@media screen and (max-width: 640px) {
	#kr .con02 .cross-head {font-size:5.3vw; line-height:1.3em;}
	#kr .con02 .cross-lead {font-weight: 500;}
}
#kr .overview {line-height:1em;}

/* system */
#kr .functions div a{ font-size: 16px; line-height:1.3em;}
#kr .functions div a.subhead {font-family: 'NanumGothicBold'; font-weight:900; font-size: 28px; }
@media screen and (max-width: 640px) {
	#kr .functions div a.subhead{ font-size: 23px;}
}

/* blog */
#kr .con-blog .more{top: 420px;}
#kr .con-blog .subhead {line-height:1.5em;}
#kr a.blog-text{ font-size: 15px;}

#kr a>span{ font-family: 'NanumGothicExtraBold';	font-weight: 400; line-height:1.5em;}
#kr .subhead{ font-family: 'NanumGothicExtraBold';	font-weight: 800; line-height:1.5em;}
#kr p.blog-text b{ font-family: 'NanumGothicBold';	font-weight: 800;}


#kr .blogmore-con01 .subhead {
	 font-family: 'NanumGothicBold';
	 font-weight: 600;
	 font-size: 30px;}
@media screen and (max-width: 640px) {
	#kr .blogmore-con01 .subhead{	font-size: 5vw;}
	
	section{
	width: 100%;
	margin: 0 auto;
}
}
/* growcross */
#kr .process-grow div a.subhead{line-height:1.5em;}

/******* #ch ********/

@font-face {
src: local('SimSun');
font-family: ChNum;
unicode-range: U+0030-0039;	/* [0-9]のunicode */
}
@font-face {
src: local('SimSun');
font-family: ChAlp;
unicode-range: U+0041-007A;	/* [a-Z]のunicode */
}

@font-face {
  src: url('../fonts/KaiTi.ttf');
  font-family:'KaiTi';
  font-style: normal;
  font-stretch: 1% 500%; /* Required by Chrome */
}

/* ch common */

/*body#ch	{font-family:ChNum,ChAlp,Kaiti,serif;}*/
body#ch	{'Inter', 'Noto Sans SC', sans-serif;}
body#toiawase { width: 600px;}
#ch a	{font-size: 20px;}
#ch .pc-nav ul li a	{font-size: 22px;}
#ch li.menu__single ul.menu__second-level>li a {font-size: 20px;}
#ch .pc-nav{ margin: 22px 10px 0;}
#ch .text	{width: 100%;}
#ch h1 { line-height: 4rem;}
#ch h2 { font-weight: 600;font-size: 36px;line-height:1.5em;}
#ch .lead {font-size: 22px;font-weight:normal;line-height:1.3em;}
#ch .lead-main { font-weight: 600;font-size: 28px;line-height:1.1em;}
@media screen and (max-width: 640px) {

#ch h1 { line-height: 3rem;}
	#ch .lead-main { font-size: ;}
	#ch .lead {font-size: 22px;font-weight:normal;line-height:1.3em; width:100%;}
}
#ch .footer-links {margin-right: 50px;}
#ch .footer-links a {line-height:1.3em!important;}
#ch .footer-text div a {font-size: 18px; }

/* index */
#ch .overview{background-image: url("../tpimges/overview_c.jpg");}
#ch .grow{background-image: url("../tpimges/overview-grow02_c.png");}
#ch .overview>div{bottom: 20px;right: 120px;}
#ch .overview>div>a{margin: 0 0 0;font-size: 13px;}
#ch .overview>div>.headline{font-size: 16px;font-weight:600;padding:7px 0 2px;}
@media screen and (max-width: 640px) {
	#ch .overview{	background-image: none;}
	#ch .grow{	background-image: none;}
}

#ch .prcmrobo h3 {line-height:1.1em;}
@media screen and (max-width: 640px) {
	#ch .prcmrobo h3 {font-size: 6vw;line-height:1em;}
}

#ch .process h4 {font-weight: 600;font-size:170%;text-align:left;line-height:1.3em;}
@media screen and (max-width: 640px) {
	#ch .process h3 {font-size: 7vw;}
	#ch .process h4 {font-size: 4vw;}
}

#ch h3.choose_service {}
@media screen and (max-width: 640px) {
	#ch h3.choose_service {font-size:6vw;margin-bottom:1.8em;}
}

#ch .services h2 {line-height:1.1em;}
#ch .services a {font-size: 25px;}
@media screen and (max-width: 640px) {
	#ch .services h2 {font-size:7vw;line-height:1em;}
	#ch .services a {font-size: 23px;line-height:1.3em;}
}

#ch .premise a {width:60%;margin:0 auto 30px;}
#ch .premise a.link {color:#28b4c8;text-align:center;}
#ch .premise h2 {line-height:1.1em;}
@media screen and (max-width: 640px) {
	#ch .premise a {width:100%;margin:0 auto 30px;}
	#ch .premise a.link {color:#28b4c8;text-align:center;}
	#ch .premise h2 {font-size: 6.6vw;line-height:1.1em;}
}
#ch .aisatu p {text-align: left; margin-top:24px; line-height:1.3em; margin-bottom: 8px; }
#ch ul.reasons-list {
  width: 600px;
  margin: 0 auto;
}
/* index-bound */
#ch .top-ill-text01{ font-size: 25px;}
#ch .bound span {font-size:50px;width:450px;}
#ch p.bound .com100 { font-weight: 900;right: -165px;letter-spacing:-3px;}
#ch p.bound .over20 { font-weight: 900;right: -80px;letter-spacing:-2px;}
@media screen and (max-width: 640px) {
	#ch .bound span {font-size:40px;font-size:8vw;width:50%;}
	#ch p.bound .com100{ right: 25%;}
	#ch p.bound .over20{ right: 25%;}
	#ch .million {height:220px;}
}
/* index-history */
#ch .history>div>.right>a>span,
#ch .history>div>.left>a>span {font-size: 18px;font-family: 'Montserrat', 'Noto Sans JP', sans-serif;font-weight:500;}
#ch .history>div>.right>a,
#ch .history>div>.left>a {font-size: 18px;}

#ch .reasons h3 { 
	text-align: center;
  margin: auto;
  margin-bottom: 50px;
  }
  
@media screen and (max-width: 640px) {
	#ch .reasons h3 {font-size:7vw;margin-bottom:1.8em;}
}

#ch .reasons-list li{
	font-size: 25px;
	background: url("../tpimges/check.png") left 0px top 7px no-repeat;
	background-size: 28px auto;
	}
@media screen and (max-width: 640px) {
	#ch .reasons-list li.short{
		height:auto!important;
		font-size: 16px;
		background: url("../tpimges/check.png") left 0px top 6px no-repeat;
		background-size: 28px auto;
		display:block;
		padding-bottom:0.3em;
		}
		
		  #ch ul.reasons-list {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* pricing */
#ch .pricing-con01>.con03>.lead{margin-bottom: 100px;}
#ch .pricing-con01>.con03> a{font-size: 27px;}
#ch .pricing-con01>.con03 h3 span{font-size: 27px; line-height:1.7em;}
#ch .pricing-con01-text{font-size:110%!important;}
@media screen and (max-width: 640px) {
	#ch .pricing-con01>.con03>.lead{margin-bottom: 45px;}
	#ch .popular>.plan{height: 110px;}
	#ch .pricelist a.plan {font-size:30px;}
	#ch .pricelist a.plice {font-size:30px;}
	#ch .plicespace a span {font-size:5vw;}
}
#ch h3 {line-height:1.2em;}
#ch .With_Size { width: 600px; text-align: center; margin: auto; margin-bottom: 50px; line-height: 40px;}
#ch .oms-use td{font-size: 24px; line-height:1.2em;}
#ch .oms-use td:first-child{color: #3c4141;font-weight: 500;  font-size: 20px;letter-spacing: -1px;}
#ch .oms-prices td{color: #2faabd;font-weight: 500;line-height: 1em;}
#ch .oms-prices td span{color: #2faabd;line-height: 1em;font-size: 1.6em;}
@media screen and (max-width: 640px) {
	#ch .oms-use td{padding:20px 10px;font-size: 20px; line-height:1.2em;letter-spacing: -1px;}
	#ch .oms-use td:first-child{padding:20px 10px;}
	#ch .oms-use td span{font-size: 1.2em;}
	#ch .oms-prices td span{font-size: 1.4em;}
}

#ch .pricelist-pc,
#ch .pricelist-pc td,
#ch .pricelist-pc th{
	font-size: 20px;
}

/*#ch .keyservices div a, .award-text, .system-con01-text, .pricing-con01-text {font-family:ChNum,ChAlp,Kaiti,serif;}*/

#ch .con02 .cross-lead {font-size:25px; line-height:1.3em;}
@media screen and (max-width: 640px) {
#ch .With_Size { width: 100%;}
	#ch .con02 .cross-head {font-size:7vw; line-height:1.3em;}
	#ch .con02 .cross-lead {font-weight: 500;}
}
#ch .overview {line-height:1em;}
#ch .jpy{font-size: 110%!important;}

/* system */
#ch .functions div a{ font-size: 20px; line-height:1.5em;}
#ch .functions div a.subhead {font-weight:900; font-size: 30px; }
@media screen and (max-width: 640px) {
	#ch .functions div a.subhead{ font-size: 24px;}
}

/* faq */
#ch .faq-subhead {font-size: 30px;}
@media screen and (max-width: 640px) {
	#ch .faq-subhead {font-size: 5vw;}
}

/* blog */
#ch a.date {font-family:'Montserrat'; font-size: 16px; }
#ch p.kinds {font-family:'Montserrat';}
/*
#ch .con-blog .more{top: 420px;font-family:'Montserrat';}
*/
#ch .con-blog .more{top: 448px;font-family:'Montserrat'; }
#ch .blogmore-con01 .more{;font-family:'Montserrat';}
#ch a.blog-text{ font-size: 18px; line-height:1.3em;}
#ch .subhead{font-weight: 800; line-height:1.5em;}
#ch a>span{	font-weight: 800; line-height:1.5em;}
#ch p.blog-text b{	font-weight: 800;}
#ch .blogmore-con01 .blog-text{	font-size: 18px;}
#ch .blogmore-con01 ul { width:100%;display:block;}
#ch .blogmore-con01 ul li {font-size: 20px; text-align:left;line-height:1.5em;}

#ch .blogmore-con01 .subhead{	font-size: 30px;}
@media screen and (max-width: 640px) {
	#ch .blogmore-con01 .subhead{	font-size: 5vw;}
}


/* growcross */
#ch .process-grow div a.subhead{line-height:1.5em;}

/**********************************************************************sistem.htmlのvideoタグ用*/
.movie2>div>div{
	margin:0 auto;
}
.movie2>div>div>div{
	width: 80%;
	border-radius: 20px;
	margin:50px auto;
}
.movie2>div>div>div>video{
	width: 100%;
}

.movie2>div>div>a{
	color: #fff;
	margin-top: 10px;
	font-size: 23px;
}
@media screen and (max-width: 640px) {
	.movie2>div>div>div{
	  width: 100%;
	}

	.movie2>div>div{
		margin-bottom: 30px;
	}

	.movie2>div>div>video{
		width: 100%;
	}

	.movie2>div>div>a{
		color: #fff;
		margin-top: 10px;
		font-size: 23px;
	}
}