/*スマートフォン用CSS*/

@media screen and (max-width: 640px) {
 
img{
max-width: 100%;
height: auto;
width:auto;
}

#title-waku img{
	max-width:100%;
}

/* ここから通常のCSS */
/*********************************************************************
Copyright AJI LLC (http://www.ksi-sd.com/trading)
輸出入用トップページ用のスタイルシート、ファイル名：trading-homepage-sumaho.css
2019年04月作成
*********************************************************************/

/*--------------------------------------------------------------------
基本設定
--------------------------------------------------------------------*/


html,body {
	width: 100%;
	height: 100%;
}

body {
	background: #fff;
	font-size: 1em;
	line-height: 1em;
	font-style: normal;
	font-weight: normal;
	text-align: center;
	color: #000;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, serif;
}

* html body {/*IE6*/
	font-family: "ＭＳ Ｐゴシック","MS PGothic",sans-serif,serif;
}

*:first-child + html body {/*IE7*/
	font-family: "ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
ol,ul,li,dl,dt,dd,p,img,br {
	margin: 0;
	padding: 0;
}

ol,ul,li,dl,dt,dd {
	list-style-type: none;
}


h1,h2 {
	padding: 10px;
}

h1 {
	font-size: 200%;
	line-height:1.5em;
}
,
h2 {
	font-size: 150%;
	line-height:1.5em;
}

h3{
	font-size: 120%;
	line-height:1.5em;
}

h4,h5,h6 {
	font-size: 100%;
	line-height:1.5em;
}

a,
a:link {
	color: #00f;
}

/* a:visited {
	color: #0C0;
} */

a:hover,
a:active {
	color: #d00;
	font-weight: bold;
}

/*--------------------------------------------------------------------
レイアウト
--------------------------------------------------------------------*/

#outline {
	width:  100%;
	margin: 0;
	padding: 0;
}


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

#header {
	width : 100% ;
	height: auto;
	margin : 0 ;
	padding : 0;
	background :url(../images/back3.gif) ;
}


/*=== ヘッダーのロゴ、タイトル、ホーム及び問い合わせメニューの枠 ===*/
#title {
	width : 100% ;
	height: auto;/*78px ;*/
	text-align : left ;
	padding : 0 ;
	margin : 0 ;
}
/*ロゴ、タイトル*/
#title-waku {
	float: none;
	width : 100% ;
	height: auto;
	text-align : center ;
	padding : 0 ;
	margin-top : 15px ;
	display:inline-block;
	position:relative;
}

/*************************************
* ハンバーガーメニュー
*************************************/

/***** クリック前のボタン *****/
.toggle {
   /* display:none; */ /* 通常時は非表示 */
    position: fixed; /* absolute; ← bodyに対しての絶対位置指定 */
    right: 13px;
    top: 13px;
    display: block;
    width: 45px;
    height: 40px;
    cursor: pointer;
    z-index: 11;
    background: #0ff;
	border-bottom: solid 2px #000090;
	border-right: solid 2px #000090;
	border-radius: 10px;
}

.toggle span {
    display: block;
    position: absolute; /* .toggleに対して */
    width: 70%;
    border-bottom: solid 3px #000090;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    padding-top: 5px;
    right: 7px;
}
.toggle span:nth-child(1) {
    top: 3px;
}
.toggle span:nth-child(2) {
    top: 13px;
}
.toggle span:nth-child(3) {
    top: 23px;
}
.toggle span:nth-child(4) {
    border: none;
    top: 28px;
    left: 5px;
    font-size: 12px;
    font-weight: bold;
}


/***** クリック後のボタン *****/
/* 最初のspanをマイナス45度に */

.toggle.active span:nth-child(1) {
    top: 14px;
    left: 5px; 
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.toggle.active span:nth-child(2),
.toggle.active span:nth-child(3) {
    top: 14px;
    left: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*************************************
* グローバルメニュー
*************************************/
/* .global_nav */
.global_nav {
	position: fixed; /* ← bodyに対しての絶対位置指定 */
	top: 0;
	right: 0;
/*	left: 0; */
	width: 70%;
	transform: translateY(-100%);
	z-index: 10;
	padding-left: 0;
	text-align: center;
	color: #000;
	background:url(../images/back3.gif) ;
	transition: all 0.8s; 
}


/*ホーム及び問い合わせメニュー*/
#homemenu {
	float: none;
	width: 100%;
	height: auto;
	text-align: center;
	padding: 0 ;
	margin: 0 ;
	display:inline-block;
}

.global_nav .nav_ul {
	display:block;
	text-align : center;
}

.global_nav  .nav_li {
	display:block;
	width: 100%;
	height: 48px;
	float:left;
	font-size : 16px;
	font-weight: bold;
	line-height:48px;
	text-align : center;
	padding: 0;
	margin: 0;
	text-decoration: none;
}

.global_nav  .nav_li a {
	display:block;
	width: 100%;/*60px;*/
	height:48px;
	float:none;
	font-size : 16px;      
	font-weight: bold;
	line-height:48px;
	text-align : left;
	padding-left: 20px ;
	text-decoration: none;
	color: #000080;
	background: url(../images/menu-sumaho.png);
	margin:0;
}

.global_nav  .nav_li a:hover{
	background:url(../images/menu-sumaho-a.gif);/* no-repeat;*/
	color: #d00;
	font-weight: bold;
}

.global_nav .act_li {
	display: block;
	width: 100%;
	height:48px;
	float:none;
	font-size : 16px;      
	font-weight: bold;
	line-height: 48px;
	text-align : left;
	padding-left: 20px ;
	text-decoration: none;
	color: #d00;
	background: url(../images/menu-sumaho-h2.gif);/* no-repeat;*/
	margin: 0;
}

.global_nav .img_li {
	display: none;
	width: 100px;
	height:25px;
	float:left;
	text-align : center;
	padding-top: 0;
	margin: 5px 10px 0 10px;
}


/*=== トップメニューのスタイル ===*/
#topmenu {
	width: 100%;
	height:auto;
	text-align: center; 
	padding:0;
	margin-top:5px;
	float:none ;
	text-decoration: none;
	display:inline-block;
}

.global_nav .nav2_ul {
	display:inline-block;
	text-align : center;
	margin-top:0px;
}


.global_nav .nav2_li {
	display:inline-block;
	width: 100%;
	height: 48px;
	float: none;
	font-size : 16px;
	font-weight: bold; 
	line-height:48px;
	text-align : left;
	padding: 0;
	text-decoration: none;
	margin: 0;
}

* html .global_nav .nav_li,
* html .global_nav .nav2_li {
	display:inline-block;
	float: none;
	width:100%;
	height:48px;
	font-size:16px;
	line-height:48px;
	font-weight:bold; 
	padding: 0 ;
	margin:0;
}

.global_nav .nav2_li a {
	display:block;
	width:100%;
	height:48px;
	font-size:16px;
	line-height:48px;
	font-weight:bold;
        text-align:left;
	color: #000080;
	text-decoration: none;
	margin: 0;
	padding-left: 20px;
	background:url(../images/menu-sumaho.png);/* no-repeat;*/
}

.global_nav .nav2_li a:hover {
	background:url(../images/menu-sumaho-a.gif);/* no-repeat;*/
	color: #d00;
	font-weight: bold;
}

.global_nav .act2 {
	display:inline-block;
	width: 100%;
	height:48px;
	float:left;
	font-size : 16px;
	font-weight: bold;
	line-height:48px;
	text-align : left;
	color: #d00;
	padding-left: 20px;
	background :url(../images/menu-sumaho-a.gif) ;
	text-decoration: none;
}

.global_nav .side-l,
.global_nav .side-r {
	display:none;
}
/* .global_navに.activeが追加 */
.global_nav.active {
    transform: none;
}

/*　パンくず　*/
#pankuzu {
	font-size:12px;
	text-align:left;
	padding-left: 20px;
	width : 100% ;
	margin : 7px 0;
}
/*　インナー　*/
#inner{
	margin: 0;
	padding: 0;
}

/*--3カラム用---------------------------------------------------------
（サイドバーの幅はここで変更）
--------------------------------------------------------------------*/
/*ラージラップ＝メインカラム、左カラム用*/
#largewrap{
	width: 100%;
	float: none;
/*	background-color: #00f;*/
}
/*メインカラム*/
#main{
	width:100%;
	float: none;
/*	background-color: #ff0;*/
}
/*左カラム*/
#sidele{
	width: 100%;
	float: none;
/*	background-color: #f00;*/
}
/*右カラム*/
#sideri{
	width: 100%;
	float: none;
/*	background-color: #0f0;*/
}

.clear{
	clear: both;

}
.clear hr{
	display: none;
}

/*トップに戻る*/
#page_top{
  	width: 50px;
  	height: 50px;
  	position: fixed;
  	right: 10px;
  	bottom: 10px;
  	background:#3f98ef;
  	opacity: 0.8;
  	border-radius: 50%;
}

#page_top a{
  	position: relative;
  	display: block;
  	width: 50px;
  	height: 50px;
  	text-decoration: none;
}

#page_top a::before{
	font-family: 'Font Awesome 5 Free';
  	font-weight: bold;
  	content: '\f062';
  	font-size: 25px;
  	color: #fff;
  	position: absolute;
  	width: 25px;
  	height: 18px;
  	top: 0;
  	bottom: 0;
  	right: 0;
  	left: 0;
  	margin: auto;
  	text-align: center;
}

/**イメージの設定  **/
.image-ryugaku{
	width:130px;
	height:37px;
}

.image-glyph{
	width: 30px;
	height:30px;
}

.image-facebook{
	width: 50px;
	height:50px;
}

.image-youtube{
	width: 107px;
	height:50px;
}


/*---------------------------------*/
/* フォント */
/*---------------------------------*/
/* 18=大見出しフォント */
/* 15=見出しフォント */
/* 14, 13=本文フォント */
/* 12=ページに戻るフォント */
/* 11=注釈フォント */
.m25 {font-size: 25px; font-family: "ＭＳ 明朝",serif }
.g25 {font-size: 25px; font-family: "ＭＳ ゴシック",sans-serif }
.m22 {font-size: 22px; font-family: "ＭＳ 明朝",serif }
.g22 {font-size: 22px; font-family: "ＭＳ ゴシック",sans-serif }

.m20 {font-size: 20px; font-family: "ＭＳ 明朝",serif }
.g20 {font-size: 20px; font-family: "ＭＳ ゴシック",sans-serif }
.m18 {font-size: 18px; font-family: "ＭＳ 明朝",serif }
.g18 {font-size: 18px; font-family: "ＭＳ ゴシック",sans-serif }
.m17 {font-size: 17px; font-family: "ＭＳ 明朝",serif }
.g17 {font-size: 17px; font-family: "ＭＳ ゴシック",sans-serif }
.m16 {font-size: 16px; font-family: "ＭＳ 明朝",serif }
.g16 {font-size: 16px; font-family: "ＭＳ ゴシック",sans-serif }
.m15 {font-size: 15px; font-family: "ＭＳ 明朝",serif }
.g15 {font-size: 15px; font-family: "ＭＳ ゴシック",sans-serif }
.m14 {font-size: 14px; font-family: "ＭＳ 明朝",serif }
.g14 {font-size: 14px; font-family: "ＭＳ ゴシック",sans-serif }
.m13 {font-size: 13px; font-family: "ＭＳ 明朝",serif }
.g13 {font-size: 13px; font-family: "ＭＳ ゴシック",sans-serif }
.m12 {font-size: 12px; font-family: "ＭＳ 明朝",serif }
.g12 {font-size: 12px; font-family: "ＭＳ ゴシック",sans-serif }
.m11 {font-size: 11px; font-family: "ＭＳ 明朝",serif }
.g11 {font-size: 11px; font-family: "ＭＳ ゴシック",sans-serif }

/***このページのトップに戻る***/
.modoru{
	display: none ;
}

.pagetop{
	width:40%;
	display: none;
	position: fixed;
	bottom: 30px;
	left: 15px;
}
.pagetop a {
	width:60%;
	display: block;
	background-color: #333;
	text-align: center;
	height:40px;
	color: #fff;
	font-size: 14px;
	font-family: "ＭＳ ゴシック",sans-serif;
	font-weight:bold;
	line-height:40px;
	text-decoration: none;
	padding: 5px 0;
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	border-radius: 10px;
}
.pagetop a:hover {
 	display: block;
	background-color: #ccc;
	text-align: center;
	color: #d00;
	font-size: 14px;
	font-family: "ＭＳ ゴシック",sans-serif;
	font-weight:bold;
	text-decoration: none;
	padding:5px 0;
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}


/*--▲上げ・下げ▲--*/
  span.age3{vertical-align:3px}
  span.age2{vertical-align:2px}
  span.age1{vertical-align:1px}
  span.sage3{vertical-align:-3px}
  span.sage2{vertical-align:-2px}
  span.sage1{vertical-align:-1px}

.text-middle{vertical-align : middle}
.text-top{vertical-align : top}
.text-bottom{vertical-align : bottom}

/*--▲行間スペース▲--*/

.space-30{
	width:100%;
	height:30px;
	padding:0;
	margin:0;
}

.space-24{
	width:100%;
	height:24px;
	padding:0;
	margin:0;
}

.space-20{
	width:100%;
	height:20px;
	padding:0;
	margin:0;
}

.space-15{
	width:100%;
	height:15px;
	padding:0;
	margin:0;
}

.space-10{
	width:100%;
	height:10px;
	padding:0;
	margin:0;
}

.space-5{
	width:100%;
	height:5px;
	padding:0;
	margin:0;
}


/*------------------------------------------------
 フッター
-------------------------------------------------*/
#footer {
	width: 100%;
	text-align : center;
	padding-top: 10px;
	margin-top: 10px;
}
.menu-index {
	display:none;
	width : 100% ;
	font-size:12px;
	font-family: "ＭＳ ゴシック",sans-serif;/*フォントの字体*/
	text-align:center;
	line-height:1.5em;
	margin : 7px 0;
}

/*アドレス枠*/
#address {
	width : 100% ;
	height: auto ;
	text-align : center;
	padding : 0;
	margin : 0;
}
.address-usa {
	float: none;
	width : 100% ;
	height: auto ;
	text-align : center ;
	font-size:15px;
	padding : 0 ;
	margin : 0 ;
	display:inline-block;
/*	position:relative; */
}

.address-jp {
	float: none;
	width: 100%;
	height: auto;
	text-align: center;
	padding: 0;
	margin: 0 ;
	display:inline-block;
/*	position:relative; */
}

               

/*-------------------------------------------------------------------------
全体の幅を指定（センター固定、センターを固定しない場合はwidthを100%に変更）
-----------------------------------------------------------------------------*/
#outline,
#header,
#inner,
#footer {
	width: 100%;/*960px;*/
}

* {
	margin: 0;
	padding: 0;
}
}/* ←CSSの一番最後に記述 */