@charset "utf-8";

/*--------------------------------------
　基礎設定
---------------------------------------*/
*{ margin:0 auto; padding:0;}
img{ border:0;}
a img{ border:0;}
body,p,th,td,li{
	color:#262626;
	line-height:1.9em;
	font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    font-size: 16px; /* モダンブラウザ */
    *font-size: 80%; /* IE 7 */
    *font: 80%; /* IE 6以下 */
}

.body { width:100%; margin:0 auto;}
.body90 { width:90%; margin:0 auto 7em auto;}
.body85 { width:85%; margin:0 auto 7em auto;}
.content { display:flex;}
.main { display:flex; flex-wrap: wrap; width:75%; height:auto; }


/*--------------------------------------
　テキスト関連
---------------------------------------*/

small{ font-size:0.7em; }

.font_35 { font-size:2.2em; }
.font_28 { font-size:2em; }
.font_24 { font-size:1.7em; }
.font_21 { font-size:1.5em; }
.font_19 { font-size:1.4em; }
.font_18 { font-size:1.2em; }
.font_15 { font-size:1.1em; }
.font_12 { font-size:0.8em; }
.font_10 { font-size:0.7em; }

.font_b{ font-weight:bold; }
.font_ubar{ text-decoration:underline;}

.color_blue{ color:#003366;}
.color_red { color:#cc0000; }
.color_green { color:#326C1C; }
.color_bk { color:#000000; }
.color_gry { color:#666666; }
.bgcl_gray{ background-color:#ececec; }

.mgl-05 { margin-left:0.5em; }
.mgl-1 { margin-left:1em; }
.mgl-2 { margin-left:2em; }
.mgl-3 { margin-left:3em; }
.mgb-05 { margin-bottom:0.5em; }
.mgb-1 { margin-bottom:1em; }
.mgb-2 { margin-bottom:2em; }
.mgb-3 { margin-bottom:3em; }
.mgt-05 { margin-bottom:0.5em; }
.mgt-1 { margin-top:1em; }
.mgt-2 { margin-top:2em; }
.mgt-3 { margin-top:3em; }
.mgr-05 { margin-right:0.5em; }
.mgr-1 { margin-right:1em; }
.mgr-2 { margin-right:2em; }
.mgr-3 { margin-right:3em; }
.mglr-5 { margin:0 0.5em; }


.line_h19 { line-height:1.4em; }
.li_mgb15 li{ margin-bottom:15px; }
.tx_cen { text-align:center; }
.tx_le { text-align:left; }
.tx_ri { text-align:right; }

.houhou { list-style:none;}
.houhou li::before{content:"＊"; margin-right:0.5em;}
.houhou li{padding-bottom:1.5em;}

.kuromaru { list-style:none;}
.kuromaru li::before{content:"●"; margin-right:0.5em;}
.kuromaru li{padding-bottom:1.5em; list-style:none;}

.mkr_ylw_60 {
	background: linear-gradient(transparent 60%, #FCF0BA 60%);
	display: inline;
	padding: 0 auto; /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
}
.mkr_grn_60 { background: linear-gradient(transparent 60%, #7CFF66 60%);
	display: inline;
	padding: 0 auto; /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
}
.mkr_ylw_0 {
	background-color: #FCF0BA; /*#fff799*/
	display: inline;
	padding: 0 auto; /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
}
.mkr_blu_0 {
	background-color: #b5dce0;
	display: inline;
	padding: 0 auto; /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
}
.mkr_grn_0 {
	background-color: #7CFF66 ;
	display: inline;
	padding: 0 auto; /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
}
.mkr_red_0 {
	background-color: #FF9999; 
	display: inline;
	padding: 0 auto; /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
}
.mkr_nude_0 {
	background-color: #e9dccd ;
	display: inline;
	padding: 0 auto; /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
}

.shohin_chui { text-indent: -1em; margin-left: 1.5em; color:#cc0000; }
.shohin_chui:before { content: '※'; margin-right:0.5em; }


/*--------------------------------------
 flex関連
 ---------------------------------------*/
.flex_spc_btw{
	display:flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items:stretch;
	list-style:none;
	width:100%;
	height:auto;
}

.flex_spc_btw_wrap{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	list-style:none;
	width:100%;
	height:auto;
}

.flex_li1{ width:99%;}
.flex_li2{ width:49%;}
.flex_li3{ width:32%;}
.flex_li4{ width:24%;}
.flex_li5{ width:19%;}

.flex_lt60{	width:59%;}
.flex_rt40{ width:39%;}


.iframe{
	border:0;
	margin:0 auto;
	padding:0;
}


.yubi{
	position:relative;
	line-height:1.5em;
	padding-left:3em;
}
.yubi:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2.5em;
	height:2.5em;
	background:url(../img/common/good_red.png) no-repeat;
	background-size:contain;
}

.htu{
	position:relative;
	line-height:1.5em;
	padding-right:3em;
}
.htu::after{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2.5em;
	height:2.5em;
	background:url(../img/common/howtouse.png) no-repeat;
	background-size:contain;
}

/*--------------------------------------
　共通リンク
---------------------------------------*/
a{
	color:#000000;/*通常のリンクテキストカラー*/
	text-decoration:none;
}
a:hover{
	color:#999999;/*マウスが乗った時の通常のリンクテキストカラー*/
	text-decoration:underline;/*マウスが乗った時下線を表示（つけない場合は underline を none へ）*/
}

/* コンタクト */
.contact_link_waku {
  margin:0 auto;/*余計な隙間を除く*/
  border: solid #0b2645 3px; /*線で囲う*/
  padding: 20px;/*文字と線の間の余白*/
  text-decoration: none;/*下線を表示させない*/
  width:60%;
}
.contact_link_waku a{
  font-size: 1em;/*文字サイズ*/
  font-weight:bold;
  color: #0b2645;/*文字色*/
}

.contact_link_wakumax {
  margin:0 auto;/*余計な隙間を除く*/
  border: solid #0b2645 3px; /*線で囲う*/
  padding: 20px;/*文字と線の間の余白*/
  text-decoration: none;/*下線を表示させない*/
  width:85%;
}
.contact_link_wakumax a{
  font-size: 1em;/*文字サイズ*/
  font-weight:bold;
  color: #0b2645;/*文字色*/
}


/*--------------------------------------
  テーブル関連
---------------------------------------*/

/*ステップ*/
.step table{
	width:100%;
}
.step th{
	background-color:#ECECEC;
	color:#003366;
	padding:0.5em 0.5em;
	width:15%;
	font-size:16px;
}
.step td{
	background-color:#ffffff;
	color:#003366;
	padding:0.5em 0.5em;
	width:85%;
	font-size:16px;
}



/*サイドメニューにある料金表のテーブルデザイン*/
.tesuryo table{
  width: 75%;
  border-collapse:separate;
  border-spacing: 0;
}

.tesuryo table th:first-child{
  border-radius: 3px 0 0 0;
}

.tesuryo table th:last-child{
  border-radius: 0 3px 0 0;
  border-right: 1px solid #3c6690;
}

.tesuryo table th{
  text-align: left;
  color:white;
  background: linear-gradient(#829ebc,#225588);
  border-left: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  width: 25%;
  padding: 10px 0 10px 3px;
  font-size:12px;
}

.tesuryo table td{
  text-align: left;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  width: 25%;
  padding: 10px 0 10px 3px;
  font-size:12px;
}

.tesuryo table td:last-child{
  border-right: 1px solid #a8b7c5;
}

.tesuryo table tr:last-child td:first-child {
  border-radius: 0 0 0 3px;
}

.tesuryo table tr:last-child td:last-child {
  border-radius: 0 0 3px 0;
}


/*メインにある料金表のテーブルデザイン*/
.tesuryo2 table{
  width: 95%;
  border-collapse:separate;
  border-spacing: 0;
}

.tesuryo2 table th:first-child{
  border-radius: 20px 0 0 0;
}

.tesuryo2 table th:last-child{
  border-radius: 0 20px 0 0;
  border-right: 1px solid #999999;
}

.tesuryo2 table th{
  text-align: left;
  color:#000000;
  background: linear-gradient(#E3E3E3,#D2D2D2);
  border-left: 1px solid #999999;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  width: 25%;
  padding: 10px 0 8px 15px;
  font-size:15px;
}

.tesuryo2 table td{
  text-align: left;
  border-left: 1px solid #999999;
  border-bottom: 1px solid #999999;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  width: 25%;
  padding: 10px 0 8px 15px;
  font-size:15px;
}

.tesuryo2 table td:last-child{
  border-right: 1px solid #999999;
}

.tesuryo2 table tr:last-child td:first-child {
  border-radius: 0 0 0 20px;
}

.tesuryo2 table tr:last-child td:last-child {
  border-radius: 0 0 20px 0;
}


/*SCTLのテーブルデザイン*/
.sctl_table table{
	border:1px solid #cccccc;
	width:90%;
}
.sctl_table td{
	padding:0.5em;
	font-size:16px;
}
.sctl_table .lt{
	background-color:#DEDEDE;
}
.sctl_table a{
	text-decoration-line:underline;	
}
.sctl_table table ul{
	width:95%;
	margin-left:1.5em;
}


/* 『―』でつなぐテーブル*/
.hiyou table{ width: 100%;}

.hiyou table th{
  position: relative;
  text-align: left;
  width: 30%;
}

.hiyou table th:after{
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background-color: #333;
  position: absolute;
  top:calc(50% - 1px);
  right:20px;
}

.hiyou table td{
  text-align: left;
  width: 70%;
}



/*--------------------------------------
　ボタン関係
---------------------------------------*/

.arrow_btn {
	display: inline-block;
	position: relative;
	width: 90%;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #1B1B1B;
	background: #fff;
	border-radius: 30px;
	border:1px solid #1B1B1B;
	transition: transform ease .3s;
}
.arrow_btn:hover {
	 cursor: pointer;
	 text-decoration: none;
}
.arrow_btn span {
	display: inline-block;
	text-decoration: none;	
	transition: transform ease .3s;
}
.arrow_btn:hover span{
	cursor: pointer;
	text-decoration: none;
	transform: translateX(6px);
}




/*--------------------------------------
　パンくずリスト
---------------------------------------*/

.pankuzu{
	width:100%;
	height:2em;
	font-size:0.9em;
	margin:1em 0 2em 0;
}
.pankuzu span{
	margin-left:10px;
}



/*--------------------------------------
　トップのみ
---------------------------------------*/

.info {
	width:100%;
	height:auto;
	padding:20px 0;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
}

.mark:before{
	content: url(../img/top/mark_1.gif);
	display: inline-block;
	width: 10px;
	height: 10px;
	padding-right:1em;
}

.hint{
	width:85%;
	margin:0 auto;
	font-size:1.3enm;
	padding:2em 2em 2em 7em;
	background-image:url('../img/top/hint2.png');
	background-size:5% auto;
	background-position:left 2% top 50%;
	background-repeat:no-repeat;
}

/*--------------------------------------
　トップ以外のページ共通
---------------------------------------*/

.bgcol_ec{
	background-color:#ECECEC;
}

.box2{
	border-bottom: solid 3px #003366;
	margin:1em 0;
	padding-bottom:0.3em;
    font-size:2em;
 }
.box3{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	margin-bottom:1em; 
	color: #000000;/*文字色*/
	font-size:1.7em;
	background: transparent;/*背景透明に*/
	border-left: solid 5px #003366;/*左線*/
}
.box4{
	background-color:#479bb6;
	color:#fff;
	padding:0.5em 0 0.5em 0.7em;
	margin-bottom:20px;
	font-size:18px;
	font-weight:bold;
}

.box_shohin{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	margin-bottom:1em; 
	color: #000000;/*文字色*/
	font-size:1.8em;
	background: transparent;/*背景透明に*/
}

.box_point {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box_point .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point p {
    margin: 0; 
    padding: 0;
    color:#30585E;
}

.box_fukidasi {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0;
    background: #e9dccd;
    color: #5c98d4;
    font-weight: bold;
}
.box_fukidasi :after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #e9dccd;
    width: 0;
    height: 0;
}
.box_fukidasi  p {
    margin: 0; 
    padding: 0;
}

.box_fukidasi_green {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0;
    background: #326C1C;
    font-weight: bold;
}
.box_fukidasi_green :after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #326C1C;
    width: 0;
    height: 0;
}
.box_fukidasi_green p {
    margin: 0; 
    padding: 0;
    color:#ffffff;
}


/*--------------------------------------
  混載便の船と飛行機のタイトル
---------------------------------------*/
.shiplane{
	background-color:#006699;
	background-image:url(../img/common/bg_h3_1.png);
	background-repeat:no-repeat;
	background-position:left top;
	padding:1em 0;
	font-size:1.4em;
	color:#ffffff;
	text-indent:25px;
	vertical-align:top;
	margin:0 0 20px 0;
}

.plane{
	background-image:url('../img/common/silhouette_plane.png');
	background-position:right top;
	background-repeat:no-repeat;
	height:40px;
}

.ship{
	background-image:url('../img/common/silhouette_ship.png');
	background-position:right top;
	background-repeat:no-repeat;
	height:40px;
}


/*--------------------------------------
  商品紹介コーナー
---------------------------------------*/
.shohin_info li{
	font-size:1.1em;
	line-height:2em;
}
.shohin_info li:before { 
	content: '■';
	margin-right:0.5em;
}
.bf:before{
	content: '：';
	margin:0 0.5em;
}
.shohin_photo img{ width:200px; height:200px; object-fit: cover; }