/*-------------------------
  index.html
---------------------------*/

/*====top video====*/
.top-mainimg-sp {
    display: none;
}
.top-mainimg-pc {
    width: 100%;
    padding-top:40px;  
}
.top-mainimg-pc img {
    width: 100%;
}
.top_video {
    margin-top:-15%;                          
}

@media screen and (max-width: 1000px) {
    .top_video {
    margin-top:5%;                          
}
}

/*====優先情報====*/
.service_info {
	padding: 0.5em 1em;
	margin: 2em 0;
	color: #000000;
	background: #c6e4ff;
	border-bottom: solid 6px #aac5de;
	border-radius: 9px;
	max-width : 900px ;/*幅*/
	margin: 0 auto;
	}
.service_info p {
	margin:0; 
	padding: 0;
	}

/*====トピックス====*/
.news-list {
	border: 1px solid #ccc;
	padding: 20px;
	background-color: #ffffff; /* 背景を白で整える */
	border-radius: 10px; /* 角丸をつけて柔らかい印象に */
	font-size: 16px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影をつけて立体感を演出 */
	width: 80%; /* 幅を広めに設定 */
	max-width: 800px; /* 最大幅 */
	margin: 0 auto; /* 中央揃え */
	}
.news-list h3 {
	font-size: 1Opx; /* タイトル文字を少し小さく */
	margin-top: 0px; /* 上部の余白を縮小 */
	margin-bottom: 0px; /* 下部の余白も調整 */
	color: #333; /* 見出しの色 */
	font-weight: bold;
	text-align: center; /* 見出しを中央揃え */
	border-bottom: 1px solid #007BFF; /* アクセントとして下線 */
	padding-bottom: 5px; /* 下線との距離を最小限に */
	padding-top: 0; /* 内側の上部余白をなくす */
	}
.news-content {
	max-height: 150px; /* 3件分の高さに固定 */
	overflow-y: auto; /* 縦方向のスクロールを許可 */
	padding-right: 10px; /* スクロールバーとコンテンツの間に余白を追加 */
	}
.news-content ul {
	list-style-type: none; /* 箇条書きの点を非表示 */
	padding: 0;
	margin: 0;
	}
.news-content li {
	margin-bottom: 15px;
	line-height: 1.8; /* 読みやすい行間を設定 */
	}
.news-content .date {
	color: #555;
	font-size: 14px;
	margin-right: 10px;
	font-style: italic; /* 日付を控えめに見せる */
	}
.news-content a {
	text-decoration: none;
	color: #007BFF; /* リンクの青色を強調 */
	font-weight: bold;
	}
.news-content a:hover {
	text-decoration: underline; /* ホバー時に下線を表示 */
	color: #0056b3; /* 濃い青色に変更 */
	}
						.news-content ul {
	list-style-type: none; /* 箇条書きの点を非表示 */
	padding: 0;
	margin: 0;
	}
.news-content li {
	margin-bottom: 10px; /* 線と次の項目までの余白 */
	padding-bottom: 10px; /* 線とテキストの余白 */
	border-bottom: 1px solid #ddd; /* 仕切り線を追加 */
	line-height: 1.6; /* 行間を適切に設定 */
	}
.news-content li:last-child {
	border-bottom: none; /* 最後のニュースには線を引かない */
	}

@media screen and (max-width: 768px) { /* スマホ向けスタイル */
	.news-list {
		width: 100%; /* 画面全体を使用 */
		max-width: 100%; /* 最大幅も100%に固定 */
		margin: 0; /* 外側の余白を削除 */
		padding: 10px; /* 内側に適度な余白を追加 */
		box-sizing: border-box; /* パディングを含めて幅を計算 */
	}
	.news-content {
		max-height: 150px; /* 高さを固定 */
		overflow-y: auto; /* 縦スクロールのみ許可 */
		overflow-x: hidden; /* 横スクロールを禁止 */
	}
	.news-content ul {
		padding: 0;
		margin: 0;
		list-style-type: none; /* 箇条書きの点を非表示 */
	}
	.news-content li {
		margin-bottom: 10px; /* 各項目間の余白 */
		padding-bottom: 10px;
		border-bottom: 1px solid #ddd; /* ニュース項目を分ける線 */
		display: flex;
		flex-direction: column; /* 日付とタイトルを縦に並べる */
		align-items: flex-start; /* 左揃え */
	}
	.news-content .date {
		font-size: 12px; /* 日付のフォントサイズ */
		margin-bottom: 5px; /* タイトルとの余白 */
		color: #555; /* 控えめな色合い */
		white-space: nowrap; /* 日付が折り返されないように */
	}
	.news-content a {
		font-size: 14px; /* タイトルのフォントサイズ */
		white-space: nowrap; /* 折り返しを防止 */
		overflow: hidden; /* 溢れる部分を隠す */
		text-overflow: ellipsis; /* 長すぎるタイトルを省略表示 */
		color: #007BFF; /* リンク色を強調 */
		text-decoration: none;
	}
	.news-content a:hover {
		text-decoration: underline; /* ホバー時にアンダーライン */
		color: #0056b3;
	}
}

.system-maintenance-alert {
	background-color: #ffcc00; /* Yellow background for attention */
	color: #000; /* Black text for readability */
	font-size: 12px; /* Small text size for compact design */
	font-weight: bold; /* Emphasize text */
	text-align: center; /* Center align the text */
	padding: 10px; /* Add padding for spacing */
	box-sizing: border-box; /* Ensure padding doesn't affect width */
	border: 2px solid #ff9900; /* Add a border for emphasis */
	margin: 0 auto; /* Center-align horizontally */
	width: 100%; /* Take up full width */
	max-width: none; /* Remove width restriction */
	border-radius: 5px; /* Add slight rounding to corners */
}

.highlight-period {
	font-size: 14px; /* Slightly larger font for emphasis */
	color: #d50000; /* Use red for visibility */
	font-weight: bold; /* Make it stand out */
	margin: 8px 0; /* Add some space around */
	padding: 5px 10px; /* Add padding for clear distinction */
	background-color: #ffe6e6; /* Light red background for focus */
	display: inline-block; /* Restrict the block to the text width */
	border-radius: 5px; /* Smooth rounded corners */
}

@media only screen and (max-width: 480px) {
	.system-maintenance-alert {
		font-size: 10px; /* Reduce text size slightly for small screens */
		padding: 8px; /* Adjust padding for compact design */
	}
	.highlight-period {
		font-size: 12px; /* Adjust emphasis for small screens */
		padding: 5px; /* Reduce padding for cleaner fit */
	}
}


/*= btn_ciq_info =*/

.btn_ciq_info {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 5%;
}
.btn_ciq_info_inner {
    width: 18%;
}
.btn_ciq_info a {    
    color: #333333;
    font-size: 15px;
    background: whitesmoke;
    width: 100%;
    padding: 5px;
    text-align: center;
    outline: 1px solid;
    outline-color: #333333;
    outline-offset: 0px;
    display: inline-block;
    transition: .3s;
    text-decoration: none;
}
.btn_ciq_info a:hover {
    animation: light .8s infinite;
}
@keyframes light {
    100% { 
      outline-color: transparent;
      outline-offset: 12px;
    }
}


/*====resume_info===*/
.resume_info_booking_wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.resume_info_onlytop_wrapper h1 {
    font-size: 18px 
}

.resume_info_booking_img_telbooking img{
    width:80%;
    padding:5px;
}
.resume_info_booking_icon_telbooking {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding:20px;
}
.resume_info_booking_icon_telbooking img{
    width:20%;            
}
.resume_info_intoro {
    margin: 40px 0;
}
.resume_info_parts {
    margin-bottom: 50px;
}
.keta_vj_btn_wrapper {
    display: flex;
    justify-content: center;                   
}
.keta_vj_btn_wrapper_top {
    display: flex;
    justify-content: left; 
} /*toppageのみ*/

.keta_vj_btn_space {
    margin: 20px 0 auto;
}
.btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 300px;
    height: 60px;
    color: rgb(78, 78, 78);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    text-align: center;                                            
}

.btn a:hover {
    color: rgb(78, 78, 78);
}
.keta_vj a {
    background-color: #fcfcfc;
    border: 1px solid transparent;
    border: 1px solid rgb(78, 78, 78);
}

.keta_vj a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #333;
}
.keta_vj a:hover {
    background-color: #fab7e9;
    border: 1px solid rgb(78, 78, 78);
}
.keta_vj a:hover::after {
    border-color: transparent transparent transparent rgb(78, 78, 78);
}
.kto_banner {
    text-align: center;
    margin-top: 15px;
}
.kto_banner img {
    width: 20%;
}
.keta_vj_img {
    display: flex;
    justify-content: center;
}
.keta_vj_img img{
    width: 25%;
}


/*===================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item01 {
    background:url(../img/img_01.jpg);
}

.slider-item02 {
    background:url(../img/img_02.jpg);
}

.slider-item03 {
    background:url(../img/img_03.jpg);
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/
.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-50px 0 0 0;/*ドットの位置*/
}
.slick-dots li {
    display:inline-block;
	margin:0 5px;
}
.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


/*====Ferry Service Status===*/
.schedule-info-box-out {
    margin: 2px 0;                
    /* border: 5px solid  rgb(65, 65, 65); */
    /* border-radius: 10px; */   
 }
 .schedule-info-box-in {
     padding: 10px 20px;
     background-color: #ecf9ff;
 }
 .schedule-info-box-in h1{
    font-size: 16px;
}
 .schedule-info-box-in a {
     display: flex;
     justify-content: center;
     text-decoration: none;
     color:  #fcfcfc;
 } 
 .schedule-info-link {
     padding: 5px 0;
     width: 40%;
     text-align: center;
     background-color:#41c1fc;
     border-radius: 10px;              
 }
 .schedule-info-link:hover {
     background-color: #fab7e9;
     color: #fcfcfc;
 }


/*====Priority Listing Information===*/
.box-out {
    width: 100%;   
    margin-top: 20px;
    margin-bottom: 20px;   
}
.box-in {
    padding: 15px;
    background-color: #FFFFAA;   
}
.box-in>h2,.box-in>p,.box-in>a {
    background-color: #FFFFAA;   
}


/*===トピックス=== */
.news-wrapper {
  border: 1px solid #333; /* 枠線 */
  padding: 30px; /* 全体内側の余白 */
}
.news-container {
  margin-top: 20px; /* セクションタイトルとの余白 */
}
.news-link {
  align-items: center; /* 上下中央 */
  display: flex; /* 日付&カテゴリーラベルと記事タイトルの横並び */
  padding-bottom: 10px; /* 内側下の余白 */
  padding-top: 10px; /* 内側上の余白 */
  transition: background-color .5s; /* 背景色をじんわり変化 */
}
.news-link:not(:first-of-type) {
  border-top: 1px solid #ccc; /* 記事リンク間の線 */
}
.news-info {
  align-items: center; /* 上下中央 */
  display: flex; /* 日付とカテゴリーの横並び */
  flex-shrink: 0; /* これが無いと日付・カテゴリーラベルが潰れる */
}
.news-date {
  color: #333; /* 日付の文字色 */
  font-size: 14px; /* 日付のフォントサイズ */
}
.news-category {
  background-color: #1cb4d3;
  color: #fff; /* カテゴリーラベルの文字色 */
  font-size: 20px; /* カテゴリーラベルのフォントサイズ */
  margin-left: 10px; /* カテゴリーラベル左の余白 */
  padding: 5px; /* カテゴリーラベル内側の余白 */
}
.news-title {
  color: #333; /* 記事タイトルの文字色 */
  font-size: 26px; /* 記事タイトルのフォントサイズ */
  line-height: 1.5; /* テキストの行間 */
  margin-left: 10px; /* 記事タイトル左の余白 */
}
.news-link:hover {
  background-color: #ffffe5; /* ホバーした時の記事リンクの背景色 */
}
/* 画面幅400px以下のスタイル */
@media screen and (max-width: 400px) {
  .news-wrapper {
    padding: 15px;
  }
  .news-link {
    display: block; /* 日付&カテゴリーラベルと記事タイトルの横並び解除 */
  }
  .news-category {
    font-size: 16px; /* カテゴリーラベルのフォントサイズ */
  }
  .news-title {
    font-size: 16px; /* 記事タイトルのフォントサイズ */
    margin-left: 0; /* 記事タイトル左の余白0 */
    margin-top: 10px; /* 記事タイトル上の余白 */
  }
}
.topics-infolist-wrapper {
    margin-top: 40px;
    margin-bottom: 70px;
}
.tipics-list-title {    
    background-color: #0025c0;     
}
.tipics-list-title h1 {
    margin:0;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
    color: #fcfcfc;
    background-color: #0025c0; 
    padding-left: 10px; 
}
ul.newsList {
    display: flex;
    flex-flow: row wrap;
    border-bottom: 1px dotted #999;
    padding: 10px 0;
}    
ul.newsList li {
    display: block;
    margin: 10px 10px;
}
ul.newsList li:nth-child(-n + 3) {
    flex-basis: 130px;
}
ul.newsList li:nth-child(2) {
    color: #fcfcfc;
    font-size: 12px;
    padding: 0px 10px;
    text-align: center;
    background-color: #41c1fc;
}
ul.newsList li:nth-child(3) {
    flex-basis: auto;
}
.info-list-link-past {
    color :#333333;
    font-size: 12px;
    font-weight:normal; 
    padding-left:5px;
}


/*===トップページ 各スライド Common CSS====*/

.top_slide_info_wrapper{ 
    overflow: hidden;/*slider right overflow hidden*/
	margin-top:5%; 
}
.guide_info_wrapper, 
.shk_info_wrapper {
    margin-top: 90px;
}
.top_slide_info_title {
    display: flex;    
    flex-direction: column;
    align-items: center;
}
.top_slide_info_title h1,
.guide-info-title h1,
.shk-info-title h1 {
    color: #333333;
    font-size: 25px;
    font-weight: bold;    
    text-align: center;             
}
@media screen and (max-width: 700px) {
    .top_slide_info_wrapper,
    .guide_info_wrapper,
    .shk_info_wrapper {
        margin-top: 80px;
    }
    .top_slide_info_title h1,
    .guide-info-title h1,
    .shk-info-title h1 {
        font-size: 18px;
        font-weight: bold;    
        text-align: center;             
    }


}

/*===ふなたびガイド===*/ 

.guide_info_wrapper {
    padding: 0 8%; 
}
.guide-info-title {
    margin-bottom: 50px;
}
.guide_info_img_wrap_top,
.guide_info_img_wrap_bottom,
.guide_info_img_wrap_1,
.guide_info_img_wrap_2,
.guide_info_img_wrap_3,
.guide_info_img_wrap_4 {
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 25px;
}
.guide_info_img_wrap{
    display: flex;    
    flex-direction: column;              
}
.guide_info_img img{
    width: 30%;     
}
.guide_info_description{               
    color: #333333;
    font-size: 11px;            
}
.guide_info_img_wrap a{
    text-decoration: none;
}
.guide_info_img_wrap_sp{
        display: none;
}
@media screen and (max-width: 700px) {
    .guide_info_img_wrap_sp{
        display: block;
    }
    .guide_info_img_wrap_pc{
        display: none;
    }
    .guide_info_description h2{               
    font-size: 11px;                
	}
}

/*===== フェリー情報 ====*/

.ferry_info_inner_pc img{
    width: 100%;
    display: flex;
    justify-content: center;
    padding:10%;
    transition-duration: 0.5s;
}
.ferry_info_inner_pc img:hover{
    box-shadow: 10px 10px 10px rgba(255, 255, 255, 0);
    transform: translateY(-10px);
    transition-duration: 0.5s;
}
.ferry_info_inner_sp{
    display:none;
}

@media screen and (max-width: 700px) {
    .ferry_info_inner_pc{
        display: none;
    }
    .ferry_info_inner_sp{
        display: block;
    }
    .ferry_info_inner_sp img {
        margin :0 auto;
        width:80%;                              
    }
}


/*===== SNS ===== */

.sns_info_inner_pc img{
    width: 100%;
    display: flex;
    justify-content: center;
    padding:10%;
    transition-duration: 0.5s;
}
.sns_info_inner_pc img:hover{
    box-shadow: 10px 10px 10px rgba(255, 255, 255, 0);
    transform: translateY(-10px);
    transition-duration: 0.5s;
}
.sns_info_inner_sp{
    display:none;
}
@media screen and (max-width: 700px) {
    .sns_info_inner_pc{
        display: none;
    }
    .sns_info_inner_sp{
        display: block;
    }
    .sns_info_inner_sp img {
        margin :0 auto;
        width:80%;                              
    }
}




/*top_singlebanner_info Common CSS*/
/*===貨物輸送について===
  ===はまゆう船内レストラン情報===
  ===協力会社 Pukwan Ferry===
  ===求人情報=== */

.top_singlebanner_info_wrapper {
    margin-top: 90px;
}
.top_singlebanner_info_title h1 {
    color: #333333;
    font-size: 25px;
    font-weight: bold;    
    text-align: center;             
}

.top_singlebanner_info_img_wrap {
    border: 0px solid #ddd;
    width: 40%;          
    margin: 20px auto 0;
    transition-duration: 0.5s;
}
.top_singlebanner_info_img_wrap img{
    width: 100%;
    cursor: pointer;
}
.top_singlebanner_info_img_wrap:hover{
    box-shadow: 10px 10px 10px rgba(255, 255, 255, 0);
    transform: translateY(-10px);
    transition-duration: 0.5s;
}
@media screen and (max-width: 1000px) {
    .top_singlebanner_info_img_wrap{
        width: 50%;          
    }    
}
@media screen and (max-width: 700px) {
    .top_singlebanner_info_title h1{
        font-size: 18px;
        font-weight: bold;    
        text-align: center;             
    }
}
@media screen and (max-width: 599px) {   
    .top_singlebanner_info_img_wrap{
        width: 80%;          
    }    
}


/*===SHK グループ情報 *smartphone*===*/

.shk-info-sp-wrapper {
    display: none;
    margin: 50px 0;
}
.shk-info-sp-wrapper h4 {
    padding-left: 15px;
    color: rgb(88, 84, 84);
    margin: 5px 0;
}
.shk-info-sp-logo {
    margin: 0 15px auto;
    border: 2px solid rgb(241, 90, 90);
    height: 60px;
    display: flex;
    align-items: center;    
}
.shk-info-sp-logo img {    
    margin: 0 auto;
     
}
h3.shk-info-sp-title {        
    font-size: 15px;
    margin-left: 20px;
}
span.shk-info-sp-menu_bar {
    color: rgb(241, 90, 90);  
}
.shk-info-sp-menu {
    width: 100%;
}
.shk-info-sp-menu a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #000;
}
.shk-info-sp-menulabel {
    display: block;
    margin: 0 10px auto;
    padding : 10px;
    line-height: 1;
    text-align: center;
    border: rgb(241, 90, 90) 2px solid;        
    border-radius: 2%;                    
    color :#fff;
    cursor :pointer;
}
input {
    display: none;
}
.shk-info-sp-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.shk-info-sp-menu li {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#shk-info-sp-menu_bar:checked ~ #links li  {
    height: 54px;
    opacity: 1;
}


/*===SHK グループ情報 *pc*===*/

.shk-group-left {
    display: flex;    
    border-bottom: solid 3px rgb(202, 202, 202);
    text-align: center;    
}
.shk-group-left h3 {
    margin: 10px 0 0 15px;
    font-size: 15px;
}
.shk-group-left img {
    padding-left: 15px;
}
.shk-group {   
    width: 100%;
    padding: 0 10px;
    margin-top: 50px;
    margin-bottom:100px;   
}

.shk-group-left {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.shk-group-logo{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;           
}
ul.shk-group-logo {
    padding-left: 0;    
}
.shk-group-logo li{    
    list-style: none;    
}
.shk-group-logo li img {
    height: 45px;    
    padding: 14px 20px;
}



/*トップページ以上*/



/*----------------------------------
  reserve/ index.html  
------------------------------------*/

.howtoyoyaku-ganre-detail {
    padding: 0 10px;
    margin-bottom: 30px;
}

.howtoyoyaku-ganre li{ /*li indent after the second line*/
    text-indent: -1.4em;
    padding-left: 1em;
}

.howtoyoyaku-ganre-detail-flex{
    display: flex;
    width: 100%;
}
.howtoyoyaku-ganre-detail-flex h4 {
    margin-top: 0px;
    color: orangered;
}
.howtoyoyaku-ganre-detail-flex a {    
    width: 45%;         
}
.howtoyoyaku-ganre-detail-flex img{    
    width: 100%;      
}
.howtoyoyaku-ganre-detail-text {
    width: 55%;
    padding-left: 25px;
}
.howtoyoyaku-ganre-detail-iconflex {
    display: flex;      
}
.click-btn-webbooking {
    background-color: rgb(253, 161, 56);
    height: 40px;
    border-radius: 8px;
    text-align: center;
    margin-top: 15px;
}
.click-btn-webbooking a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    font-weight: bolder;
    color: white;
    line-height: 40px;
}
.click-btn-webbooking:hover {
    background-color: #fab7e9;
}
.click-btn-telbooking {
    display: none;
}


a.howtoyoyaku-tel-call {
    display: none;
}
.howtoyoyaku-tel-required {
    background-color: rgb(201, 231, 243);
    list-style: none;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
}
.howtoyoyaku-tel-require li {
    font-size: 14px;    
}
img.howtoyoyaku-agency-icon {
    width: 100px;
    height: 100px;       
} 
.car-motorbike-detail img{
    height: 16px;
}
.car-motorbike-detail h4{
    margin-top: 30px;
    margin-bottom: 10px;
}
.car-motorbike-detail li{
    margin-left: 15px;
}
.car-motorbike-table {
    width: 95%;
    margin-top: 15px;
}
th.car-motorbike-table-left {
    width: 35%;
    background-color: rgb(211, 208, 208);    
}
th.car-motorbike-table-right {
    width: 60%;
    background-color: rgb(211, 208, 208);
}
th.car-motorbike-table-leftbtm {
    background-color: rgb(211, 208, 208);
}
.car-motorbike-table td {
    padding-left: 10px;
}
.car-motorbike-faretable {
    width: 95%;
    margin-bottom: 20px; 
}
td.car-motorbike-faretable-left {
    width: 25%;
    text-align: center;
    background-color: rgb(253, 253, 168);
}
td.car-motorbike-faretable-mid,
td.car-motorbike-faretable-right {
    width: 35%;
    text-align: center;
    background-color: rgb(253, 253, 168);
}
td.car-motorbike-faretable-cabin {
    background-color: rgb(252, 227, 231);
    text-align: center;
}

.car-motorbike-otherfaretable {
    width: 100%;
}
td.car-motorbike-otherfaretable-left {
    width: 35%;
    background-color: rgb(252, 227, 231);
}
td.car-motorbike-otherfaretable-right {
    width: 65%;
}


/*-----------------------------------------
  passenger/ index.html
-------------------------------------------*/

.passnger-info-wrapper {
    display: flex;
    width: 100%;
    padding: 15px;
}
.passenger-text-linkbtn {
    width: 60%;
}
.passenger-info-img {
    width: 40%;
}
.passenger-info-text p {
    margin-top: 0px;
    padding-right: 15px;
}
.passenger-info-linkbtn a {
    display: inline-block;
    line-height: 50px;
    width: 250px;
    background-color: orange;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px; 
}
.passenger-info-linkbtn a:hover {
    background-color: #fab7e9;
}
.passenger-info-linkbtn-sp {
    display: none;
}




/*---------------------------------------------
  passenger / schedule/ index.html
----------------------------------------------*/

.passenger-scheduletable > table  {
    width: 100%;
    line-height: 40px;
}
th.passenger-scheduletable-head {
    background-color: rgb(199, 197, 197);
}
td.passenger-scheduletable {
    background-color: rgb(255, 255, 146);
    text-align: center;
}
.passenger-schedule-img img {
    width: 100%;
    margin: 0 auto;
}
.passenger-chedule-detail{
    padding-left: 15px;
}
.passenger-schedule-btn {
    text-align: center;
    margin-top: 50px;
}
.passenger-schedule-btn a {
    text-decoration: none;
    color: white;
    background-color: orange;
    text-align: center;
    display: inline-block;
    width: 50%;
    line-height: 40px;
    border-radius: 5px;
}
.passenger-schedule-btn a:hover {
    background-color: #fab7e9;
}


/*----------------------------------------
  passenger / vessel /index.html
-----------------------------------------*/

.vessel-intro {
    margin-bottom: 80px;
    padding: 0 15px;
}
.vessel-detail-wrapper {
    display: flex;
    justify-content: space-around;
    width: 100%;    
}
.vessel-contents {
    display :flex;
    flex-direction: column;
    padding: 0 20px;
    width:100%;
}
.vessel-img img {
    width: 100%;
    margin: 0 auto;
}
.vessel-detail h4{
    font-size: 20px;
    border-bottom: 1px solid gray;
}
.vessel-detail-info-wrapper {
    margin: 15px 0;
}
.vessel-detail-info {
    display: flex;
}
.vessel-detail-info li {
    list-style: none;
}
.vessel-detail-info-liwidth {
    width: 80px;
}
.btn_link { 
    text-align: end;
}
.btn_link a {
    text-decoration: none;
    color: white;
    background-color: orange;
    text-align: center;
    display: inline-block;
    width: 50%;
    line-height: 40px;
    border-radius: 5px;
}
.vessel-link a:hover {
    background-color: #fab7e9;
}
.btn-vr {
	margin-top: 4%;
	text-align: end;
}
.btn-vr img{
	width: 40%;
}

/*---------------------------------------------------
  passenger/ vessel/ hamayuu.html 
  passenger/ vessel/ seonghee.html
-----------------------------------------------------*/

.vrtour_wrapper{
	display: flex;
	justify-content: center;
	margin-top: 3%;
	margin-bottom: 3%;	
}

.vrtour_img_wrapper{
	width:40%;
	max-width:380px;
	min-width:230px;
}
.vrtour_img_wrapper img{
	width:100%;
}


.cabin-wrapper,.facility-wrapper {
    margin: 50px 0;
}

.cabin-detail,.facility-detail {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
}
.cabin-detail-left,.facility-detail-left {
    width: 45%;
    padding-right:15px;
}
.cabin-detail-right,.facility-detail-right {
    width: 55%;    
}

.detail-description li {
    list-style: none;
}

.cabin-amenities {
    padding: 0.4em 0.6em;
    margin: 2em 0;    
    background: #fdf6d0;
    box-shadow: 0px 0px 0px 10px #fdf6d0;
    border: dashed 2px #ffe96c;
    border-radius: 8px;
}
.cabin-amenities li {
    margin: 0; 
    padding: 0;
    list-style: none;
    font-size: 13px;
}
.cabin-imgslide img {
    width: 90%
}

.vessel-restaurant-img img{
    width: 25%;
}
.vessel-restaurant-detail {
    margin: 30px 0 ;
}
.vessel-restaurant-detail li {
    list-style: none;
}
.click-btn-vessel-restaurant-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.click-btn-vessel-restaurant {
    width: 100%;    
    margin: 15px 0;
    background-color:  orange;
    height: 40px;
    border-radius: 8px;
    text-align: center;
}
.click-btn-vessel-restaurant a {
    display: block;
    width: 100%;
    text-decoration: none;    
    font-weight: bolder;
    color: white;
    line-height: 40px;
}
.click-btn-vessel-restaurant:hover {
    background-color: #fab7e9;
}
.vessel-facility {
    margin-bottom: 50px;
}
.facility-detail li {
    list-style: none;
}
.facility-img {
    width: 100%;
    display: flex;
    justify-self: space-between;
}
.facility-img img{
    width: 25%
}


/*------------------------------------
  passenger/ t_access/ index.html
--------------------------------------*/

.access-ganre-title h3{
    font-size: 15px;
    font-weight: normal;
    line-height: 40px;
    background-color: #2e72bb;
    color: white;
    padding-left: 10px;
    margin-top: 30px;
}
.access-ganre-detail-flex {
    display: flex;
    width: 100%;
    padding: 0 15px;
}
.access-img {
    width: 50%;
    margin-top: 15px;
}
.access-img img {
    width: 100%;
    max-width: 450px;
}
.access-about {
    width: 50%;
    padding-left: 25px;
}
.access-table {
    margin: 15px 0;
}
.access-table table {
    width: 100%;
}
th.access-table-left {
    background-color: rgb(184, 243, 253);
    font-weight: normal;
    text-align: left;
    padding-left: 15px;
    line-height: 30px;
}
th.access-table-right {
    font-weight: normal;
    text-align: left;
    padding-left: 15px;
    line-height: 30px;
}
.access-linkbtn {
    margin-top: 20px;
}
.access-linkbtn a {
    text-decoration: none;
    color: white;
    background-color: orange;
    text-align: center;
    display: inline-block;
    width: 100%;
    line-height: 40px;
    border-radius: 5px;
}
.access-linkbtn a:hover {
    background-color: #fab7e9;
}
.access-checkin-left {
    width: 100%;
}


/*------------------------------------------
  passenger/ t_access/ shimonosekiport.html
  passenger/ t_access/ busanport.html
--------------------------------------------*/

.google-map {
    margin-top: 15px;
}
.google-map-tbsp {
    display: none;
}

li.access-list-none {
    list-style: none;
}
.accessmap-traffic img {
    width: 100%;
    max-width: 700px;
}
.access-detail-contents {
    padding: 0 15px;
}
.access-img {
    width: 100%;
}                    
.access-img-flex {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 25px 0;
}    
.access-img-left {
    width: 40%;
    display: flex;
    align-items: center;                    
}
.access-img-right {
    width: 45%;
}

.access-video {
    margin: 35px 0;
}
.access-video-style {
    width: 50%;
}

.access-car-flex {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.access-car-left {
    width: 45%;
}
.access-car-left img{
    width: 100%;
}
.access-car-right {
    width: 45%;
}

.access-car-parking-info {
    padding: 0.5em 1em;
    margin: 1.5em 0;
    margin-top: 2.0em;
    color: #5989cf;
    background: #c6e4ff;
    border-bottom: solid 4px #aac5de;
    border-radius: 8px;
}
.access-car-parking-info h4 {
    margin: 0; 
    padding: 0;
}
.parking_info_wrapper {
	display:flex;
	justify-content: space-between;
	width: 100%;
} 
.parking_info_leftside {
	width: 60%;
	padding: 3%;
}
.parking_info_leftside img {
	width: 100%;
}
.parking_info_rightside {
	width: 40%;
	align-items: center;
	padding: 3%;
}
#vacancy {
	font-size: 2rem;
	font-weight: bold;
}
.vacanry_wrapper { 
	background-image: radial-gradient(
        transparent 0 1px, 
        rgba(0, 0, 0, .7) 1px); 
	background-size: 3px 3px;
	text-align:center;color:white;
}
.parking_around_terminal{
	margin-top: 10%;
}
.info_shimonosekiterminal_parking_caution {
	margin-top: 5%;
}


/*---------------------------------------
  passenger/ t_access/ checkin.html
-----------------------------------------*/

.checkin-required-wrapper {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 60px;
}
.checkin-required-contents {
    border: 2px solid #2e72bb;
    border-radius: 10px;
    background-color: #e9f2fc;
}
.checkin-required {
    padding: 20px 35px;
}
.checkin-required h4 {
    margin-top: 0px;
    font-size: 20px;
    color: #2e72bb;
    text-align: center;
}
.checkin-required p {
    margin: 5px 0;
    padding-left: 35px;
}
.checkin-required li {
    margin: 5px 0;
    font-weight: bold;
}
a.checkin-required-a-padding {
    padding-left: 35px;
    margin: 5px 0;
}
.under-orange {
    text-align: center;
}
.under-orange img {
    width: 35px;
    margin: 5px 0;
}
.checkin-procedure-mkimg {
    border:2px solid #2e72bb;
    border-radius: 10px;
    background-color: #e9f2fc; 
}
.chekin-rocedure-mking-font {
    font-size: 22px;
    background: linear-gradient(transparent 70%, yellow 70%);
    color: orangered;
}
.checkin-procedure-mkimg h4 {
    font-size: 20px;
    color: #2e72bb;
    text-align: center;
    margin: 5px 0;
}
.checkin-procedure-mkimg2 {
    border-radius: 10px;
    background-color: #ffdfef;
}
.checkin-procedure-mkimg2 p {
    padding: 15px;
    margin: 0;
}





/*----------------------------------
  fare / index.html
------------------------------------*/

.click-btn-faretop-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.click-btn-faretop {
    width: 50%;    
    margin: 15px;
    background-color: rgb(253, 161, 56);
    height: 40px;
    border-radius: 8px;
    text-align: center;
}
.click-btn-faretop a {
    display: block;
    width: 100%;
    text-decoration: none;    
    font-weight: bolder;
    color: white;
    line-height: 40px;
}
.click-btn-faretop:hover {
    background-color: #fab7e9;
}


/*----------------------------------
  fare / basic/ index.html
------------------------------------*/

.passenger-fare-detail {
    padding: 0 10px;
    margin-bottom: 30px;
}
.passenger-fare-ganre-title {
    margin-bottom: 50px;
}
.passenger-fare-ganre-title h3 {
    font-size: 15px;
    font-weight: normal;
    line-height: 40px;
    background-color: #2e72bb;
    color: white;
    padding-left: 10px;
    margin-top: 30px;
}
.passenger-fare-table {
    margin: 15px 0;
}
.passenger-fare-table > table {
    width: 97%;
    margin: 0 auto;
    line-height: 40px;
}
th.passenger-fare-table-headleft {
    background:rgb(195, 203, 209);
    font-weight: normal;
}
th.passenger-fare-table-head {
    background:rgb(230, 232, 233);
    font-weight: normal 
}
th.passenger-fare-table-side {
    background:rgb(184, 243, 253);
    font-weight:normal;
}
.passenger-fare-detaillist li {
    padding-left: 1em;
    text-indent: -1.4em;

}
.passenger-fare-baggage {
    background-color: rgb(255, 255, 146);
    padding: 10px 0;
    width: 97%;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 15px;
    padding-left: 15px;
}
.passenger-fare-baggage li{
    list-style: none;
}
.passenger-fare-baggage p {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 0 20px;
    color: darkred;
}

/*-----------------------------------------------------------
  fare/ special/ index.html    fare/ campain/ index.html
-------------------------------------------------------------*/

.discount-ticket-wrapper {
    margin: 70px 0; 
}
.discount-ticket-wrapper h3{
    padding-left: 15px;
    text-align: center;
    color: #195da5;
    font-size: 20px;
    background: linear-gradient(transparent 50%, skyblue 70%);
}
.discount-ticket-contents-flex {
    display: flex;
    height: auto;            
    align-items: flex-start; 
    padding: 0 15px;
    width: 100%;
    margin: 0 auto;
}
.discount-ticket-img {
    width: 40%;
}
.discount-ticket-img img {
    width: 100%;
    max-width: 300px;
}
.discount-ticket-detail {
    padding-left: 15px;
    width: 60%;
}
.discount-ticket-detail h4 {
    margin-top: 0px;
    color: orangered;
    font-size: 17px;
}
.discount-ticket-table table {
    width: 100%;
}
.discount-ticket-table td {
    text-align: center;
}
.discount-ticket-table th {
    color: red;
}
.discount-ticket-table p {
    font-size: 12px;    
}
.discount-ticket-table-head {
    background-color: rgb(230, 232, 233);
}
.discount-ticket-table-side {
    background-color: rgb(184, 243, 253);
}
.discount-ticket-table-headleft {
    background-color: rgb(195, 203, 209);
}

/*------------------
  fare/ visitkorea.html 
--------------------*/
.heading-041 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
    background-color: #f2f2f2;
    color: #333333;
}

.heading-041::before {
    display: inline-block;
    width: 5px;
    height: 2.5em;
    margin-right: .5em;
    background-color: #1a5df9;
    content: '';
}
/*直前に入るコンテンツ*/
.firsticon::before {
    content: "\f445"; /*Font Awesome 5 Freeのユニコード*/
    color:red; /*色*/
}
.left10 {
	padding-left: 10px;
}
.left20 {
	padding-left: 20px;
}
.left30 {
	padding-left: 30px;
}
.lh2 {
  line-height: 2;
}
.mt30 {
	margin-top: 30px;
	}
.mt50 {
	margin-top: 50px;
	}
.indent1 {
	text-indent: -1em;
	padding-left: 1em;
}
.visitkorea_main_img img{
    width: 100%;
}
.visitkorea_main_img_sp {
    display: flex;
    justify-content: space-around;
    width:100%;
    display:none;
}
.visitkorea_main_img_sp img{
    width: 100%;
}   
@media screen and (max-width: 599px) {
    .visitkorea_main_img_sp{
        display: block
    }
    .visitkorea_main_img{
        display: none;
    }
}





/*---------------------------
  tour/ index.html
-----------------------------*/

.discount-tour-wrapper {
    margin: 70px 0; 
}
.discount-tour-wrapper h3 {
    padding-left: 15px;
    text-align: center;
    color: #195da5;
    font-size: 20px;
    background: linear-gradient(transparent 50%, skyblue 70%);
}
.discount-tour-contents-flex {
    display: flex;
    height: auto;           
    align-items: flex-start;
    padding: 0 15px;
    width: 100%;
    margin: 0 auto;
}
.discount-tour-img {
    width: 40%;
}
.discount-tour-img img {
    width: 100%;
    max-width: 300px;
}
.discount-tour-detail {
    padding-left: 15px;
    width: 96%;
}
.discount-tour-detail h4 {
    margin-top: 0px;
    color: orangered;
    font-size: 17px;
}
.discount-tour-link {
    text-align: center;
    line-height: 30px;
       
} 
.discount-tour-detail a { 
    text-decoration: none;
    display: inline-block;
}
.discount-tour-link-toright {
    text-align: right;
}
.discount-tour-link li {
    list-style: none;
    background-color: rgb(253, 253, 168);
    border-left: 4px solid rgb(184, 120, 2);
    color: rgb(184, 120, 2);
    font-weight: bold;
    font-size: 14px;
    width: 250px;     
}
.discount-tour-link li {
    list-style: none;
    background-color: rgb(253, 253, 168);
    border-left: 4px solid rgb(184, 120, 2);
    color: rgb(184, 120, 2);
    font-weight: bold;
    font-size: 14px;
    width: 250px;     
}
.discount-tour-link li:hover {
    background-color:#fab7e9;
    border-left: #fab7e9;   
}


/*-------------------------------------
  tour/ fandh.html   
  tour/ higaeri.html 
  tour/ osusume.html 
---------------------------------------*/

.tour-bgi {
    width: 100%;    
}
.aboutplan-description {
    border: 2px solid rgb(188, 226, 241);
    border-radius: 8px;
    background-color:rgb(188, 226, 241);
    margin: 10px 0 30px 0;
    
}
.aboutplan-description p {
    padding:10px 20px;
    
}
.agent-logo {
    border-bottom: 1px solid rgb(194, 193, 193);
}
.agenttour-contents {
    margin-bottom: 50px;
}
.agenttour-list {
    margin: 10px 0 0 20px;
}
.agenttour-list p {
    font-weight: bold; 
    color: rgb(197, 5, 5); 
    margin-bottom: 5px;
}
.agenttour-list li {
    list-style: none;
}
.agenttour-list a {
    text-decoration: none;
    color: #115EB3;
    list-style: none;
}
.agenttour-list a:hover {
    color:#fab7e9;
}


/*-------------------------
  cargo/ index.html 
---------------------------*/

/*base.css and cargo.css*/


/*-----------------------------------
  restaurant_shop/ index.html 
------------------------------------*/

/*restaurant_shop.css*/



/*-----------------------------------------------
  ferry5s/ index.html 
------------------------------------------------*/

.ferry5simg-container {
    z-index: 998;
}

.ferry5simg-container img {
    width: 100%;
    top: 70px;
}
 

/*5s 5title*/
.ferry5s-alllist-wrapper {
    width: 90%;
    margin: 20px 15px;
    text-align: center;    
}
.ferry5s-logo img {
    width: 20%;
    max-width: 170px;
    margin-bottom: 5px;
}
.ferry5s-alllist {
    width: 100%;
    padding: 0 30px; 
}

/*fade up effect*/
.effect-fade {
    opacity : 0;
    transform : translate(0, 45px);
    transition : all 1600ms;
}    
.effect-fade.effect-scroll {
    opacity : 1;
    transform : translate(0, 0);
}

/*5s title transition*/
.ferry5s-alllist img{
    width: 90%;
    max-width: 700px;
    text-align: center;
    margin: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .4s;
    transition: all .4s; 
}
.ferry5s-alllist img:hover {
    -webkit-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform: translateY(-8px);
}

/*5S pattern1 text-img ver*/
.ferry5s-parts-text-img-wrapper {
    margin: 40px 15px;
}
.ferry5s-parts-text-img-innner {
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.parts-text-img-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.parts-text-img-left img {
    width: 75%;
    max-width: 320px;
    padding-top: 15px;   
}
.parts-text-img-right {
    width: 50%;
}
.parts-text-img-right img {
    width: 100%;    
    border: 5px solid rgb(236, 230, 230);
    -webkit-transform: rotate(1.5deg);/* chrome、safari　*/
    -moz-transform: rotate(1.5deg);/* firefox*/   
}


/*5S pattern2 img-text ver*/
.ferry5s-parts-img-text-wrapper {
    margin: 40px 15px;
}
.ferry5s-parts-img-text-innner {
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.parts-img-text-left {
    width: 50%;    
}
.parts-img-text-left img {
    width: 90%;
    border: 5px solid rgb(236, 230, 230);
    -webkit-transform: rotate(-1.5deg); /* chrome、safari　*/
    -moz-transform: rotate(-1.5deg); /* firefox*/  
}
.parts-img-text-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;         
}
.parts-img-text-right img {
    width: 75%;
    max-width: 320px;
    padding-top: 15px;
} 




/*----------------------
  qa/ index.html 
------------------------*/

.qanda-wrapper {
    margin: 5px 0 25px;
    padding-left: 10px;     
}
.question-wrapper{
    display: flex;     
    border-bottom: 1px solid rgb(189, 187, 187); 
}
.answer-wrapper {
    display: flex;    
}
.question-wrapper img ,
.answer-wrapper img {
    width: 17px;
    height: 17px; 
    margin: 15px 0;   
}
.question-wrapper p {
    color: rgb(72, 72, 161);
    margin-left: 10px;    
}
.answer-wrapper p {
    margin-left: 10px;
}    
.answer-wrapper span {
    color:rgba(240, 77, 77, 0.89);
    font-size: 14px;
}
.answer-wrapper a:hover{
    color: rgb(214, 209, 210);
}
.qa-cabin-dlflex {
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(173, 173, 173);      
}
.qa-cabin-dtddflex {
    display: flex;
    text-align: center;            
}
.qa-cabin-dtddflex dt{
    width: 20%;
    margin: 0;
    border: 1px solid rgb(173, 173, 173);  
}
.qa-cabin-dtddflex dd{
    width: 40%;
    margin: 0;
    border: 1px solid rgb(173, 173, 173);      
}
dl.qa-cabin-dtddflex {
    margin: 0;
}



/*------------------------
  company/index.html 
--------------------------*/

/*===menu select button===*/
.select-menus {
    display: flex;
    justify-content: space-between;   
}
.select-menus a {
    width: 33.3333%; 
    margin: 10px 10px;  
    text-decoration: none;  
}
.select-menu {
    display: flex; 
    width: 100%;
    height: 80px;
    background-color: rgb(175, 174, 174);
    padding: 0 20px;         
    text-align: center;
    align-items: center;
}  
.select-menu:hover {
    display: flex;   
    width: 100%;
    height: 80px;
    background-color: #fab7e9;
    padding: 0 20px;          
    text-align: center;
    align-items: center;
} 
.select-menu-icon {
    margin:0;
}
.select-menu-icon img {
    width: 30px;
    height: 30px;
    margin-top: 0;      
}   
.select-menu-text {
    text-align: left;
    margin: 0 auto;           
} 
.select-menu-text p {
    color: white;
    font-size: 16px;       
} 
/*=== table ===*/
.table-company {
    width: 100%;
    margin-top: 20px 
    margin-bottom 40px;
}
table.table-company-list, 
table.table-company-list th, 
table.table-company-list td {
    border-collapse: collapse;
    border: 1px solid rgb(151, 150, 150);
    line-height: 2;
}
table.table-company-list th {
    width: 200px;
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    font-weight: normal;
    background-color: rgb(230, 228, 228);
} 
table.table-company-list td {
    width: 800px;
    padding: 10px;
    vertical-align: top;
}


/*--------------------------
  company/ history.html 
----------------------------*/

.history-list-wrapper {
    margin-bottom: 50px;
}
.history-list {
    padding: 10px 0;
    border-bottom: 1px solid rgb(172, 170, 170);    
}
.history-list dt {
    float: left;
    padding: 10px 0 10px 10px;
    font-weight: bold;   
}
.history-list dd{
    margin-left: 140px;
    padding: 10px 0;
}


/*----------------------------
  company/shkline.html 
------------------------------*/

img.eastasia-map {
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.shkline-company-flex {
    display: flex;
    flex-wrap: wrap;
}
.shkline-company-info{
    margin-bottom: 5px;
    padding: 10px;
    width: 25%;
}
.shkline-company-info img {
    height: 15px;
    margin: 8px 0;
}


/*------------------------------
  anzenhoshin.html     
  tokuteitorihiki.html 
  higaisyasien.html    
  privacy.html         
-------------------------------*/

.text-padding {
    padding: 0 10px;    
}
.pdf-open { 
   text-align: center;
   margin-top: 30px;
   margin-bottom: 100px;   
}
.pdf-open-box {
    background-color: rgb(117, 118, 121);    
    width: 300px;
    margin: auto;        
}
.pdf-open-box a {    
    text-decoration: none;
    color: white;
    display: inline-block;
    margin: 10px 0;
}
.list-floatleft {
    display: flex;
}
.list-floatleft dd {
    margin-left: 5px;
}




/*------------------
  vnt.html 
--------------------*/

/*vnt.css*/




/*-----------------------------------
  sitemap/ index.html 
-------------------------------------*/
.sitemap-title {
    background-color: #2e72bb;
    height: 35px;
}
a.sitemap-menutitle {
    text-decoration: none;
    line-height: 35px; 
    color: white;
    padding: 0 15px;
}
a.sitemap-menutitle:hover {
   color:#bdd6f1;
}
.sitemap-list {
    margin: 15px 0 15px 20px;
}
.sitemap-list li {
    margin: 10px 0;
    list-style: none;   
}
.sitemap-list a {
    color: #115EB3;
    text-decoration: none;
}
.sitemap-list a:hover {
    background-color:#bdd6f1;
}
.sitemap-list-list {
    margin-left: 40px;
}




/*-----------------------------------
  cargo / index.html
-------------------------------------*/

.cargo-info-img-wrap{
    border: 0px solid #ddd;
    width: 40%;          
    margin: 20px auto 0;
    transition-duration: 0.5s;
}
.cargo-info-img-wrap img{
    width: 100%;
    cursor: pointer;
}
.cargo-info-img-wrap:hover{
    box-shadow: 10px 10px 10px rgba(255, 255, 255, 0);
    transform: translateY(-10px);
    transition-duration: 0.5s;
}
.cargo-contents {
    width: 100%;
    max-width: 950px;
    margin :0 auto;
}
.cargo-header img{
    margin-top: 10px;
    height: 25px;
}
.cargo-sub-title h3 {
    color: white;
    font-size: 20px;
    text-align: center;
    background-color: rgb(72, 90, 248);
    line-height: 50px;    
}
.cargo-sub-sub-title {
    display: flex;
    justify-content:center;
    background: linear-gradient(transparent 0%, transparent 50%, #ef857d 90%, #ef857d 100%);    
    margin-top: 1.5rem;
}
.cargo-sub-sub-title h3 {
    color: rgb(51, 51, 51);
    font-size: 20px;   
    line-height: 1.1rem;
    margin-bottom: 10px;
}
.cargo-contents-main-category {
    margin-top: 50px;  
}

.cargo-wrapper-inside {
    width: 100%;
}
.cargo-wrapper-inside-inner {
    margin-left: 15px;
    margin-right: 15px;
}
.cargo-wrapper-inside-inner h4 {
    color: rgb(90, 105, 247);
    margin-bottom:0;
    font-size: 18px;
}
.cargo-contents-wrapper {
    width:100%;
    margin: 0 auto;
}
.top-img-box img{
    position: relative;
    width: 100%;
    height: auto;
}
/*path*/
.top-img-box-path {
    position: absolute;
    top: 150px;
    left: 25px;
}




/*-----------------------------------
  campain / 18kippu.html
-------------------------------------*/
.train10 {
    padding: 0.5em 1em;
    /* margin: 2em 0; */
    color: #00BCD4;
    background: #e4fcff;/*背景色*/
    border-top: solid 6px #1dc1d6;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
	
	width:100%;
}
.train10 p {
    margin: 0; 
    padding: 0;
	text-align: center;
}
.s18kippu_application_form {
    text-align: center;
}


/*Faster than the sea, cheaper than the sky*/
p.top-img-box-title{
    color: #FFF;
    text-shadow:2px 3px 3px #808080;
    font-family: serif;
    width:100%;
    margin-top: -25px;
    padding-left: 15px;
    font-size: 50px;
}    
.top-img-box-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*Convenience of daily service*/
p.top-img-box-text{
    color: #FFF;
    text-shadow:1px 2px 2px #313131;
    font-family: serif;
    width:100%;
    margin-top: -5px;
    padding-top: 120px;
    padding-left: 20px;
    font-size: 20px;
}    
.top-img-box-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*Features of Ferry Transportation*/
.cargo-features {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 15px;
}
.cargo-features-point li{
    margin: 15px 0;
}
.cargo-arrow-icon {
    display:flex;
    justify-content: center;
    margin-top: 15px;
}
.cargo-arrow-icon img {
    height: 40px;
}
.cargo-features-point-answer {
    display: flex;
    justify-content: center;
}
.cargo-features-point-answer h3{
    margin-top: 20px;
    font-size:25px;
    color: orangered;
}
img.cargo-orange-icon {
    height: 25px !important;
}
.about-main-inner {    
    width: 100%;    
}
.cargo-concept {
    margin-bottom: 20px;
}
.cargo-concept p{
    color:#2a75c5;
    margin-bottom: 0;
}
.cargo-concept img {
    height: 40px;
    margin: 15px 0;
}

.about-main-inner {
    text-align: center;
}
.cargo-merit p {
    margin-top:5px;
} 
table.table-cargo-merit {
    width: 95%;
    margin: 0 auto;
}
table.table-cargo-merit td{
    width: 50%;    
}
.table-cargo-merit,
.table-cargo-merit td,
.table-cargo-merit td {
    border-collapse: collapse;
    border: 1px solid rgb(187, 186, 186);
    line-height: 40px;
    padding-left: 10px; 
}
.cargo-moviefile-wrapper{
	margin-top: 50px;
}

/*//Wide variety of shipping containers/*/

.con-sh-img {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;    
}
.con-sh-img-flex p {
    font-size: 14px;
    margin-top:2px;
}

/*/// schedule //*/
.table-cargo-schedule-flex {
    display: flex;
    width: 100%;
    margin: 0 auto;
} 
.table-cargo-schedule-list {
    width: 48%;
    margin: 0 auto;   
} 
.table-cargo-schedule-list,
.table-cargo-schedule-list th,
.table-cargo-schedule-list td {
    border-collapse: collapse;
    border: 1px solid rgb(192, 191, 191);
    line-height: 40px;
    padding-left: 10px;           
}
.cargo-schedule-sp {
    background-color: rgb(186, 239, 252);
    font-weight:bold;
    text-align: center;
}
.cargo-schedule-ps {
    background-color: rgb(247, 192, 192);
    font-weight:bold;
    text-align: center;
}
a.schedule-table{
    line-height: 30px;
    width: 280px;
    background-color: #e7ee80;
    text-decoration: none;
    display: flex;
}
a.schedule-table:hover{    
    background-color: #fab7e9;    
}
.schedule-table p {
    color :#525526; 
    text-align: center;    
}
.schedule-table img {    
    width: 25px;
    height: 25px;    
    margin: 10px;    
} 


/*/// video//*/
.cargo-moviefile-wrapper {
	display: flex;
	justify-content: space-around;
}
.cargo-moviefile-wrapper-inside {
    width:100%;
    margin: 0 auto;
    text-align: center;    
}
.cargo-moviefile {    
    width:80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.cargo-agency-kk {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color:rgb(248, 103, 103);     
    margin: 18px 0 18px 0;
}
.cargo-agency-kk h3{   
    font-size : 17px;
    color: white;
    text-align: center;
    margin: 3px 3px;        
}
.cargo-agency-nt {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color:rgb(66, 192, 73);     
    margin: 18px 0 18px 0;
}
.cargo-agency-nt h3{   
    font-size : 17px;
    color: white;
    text-align: center;
    margin: 3px 3px;        
}
.table-cargo-agent-list {
    width: 95%;
    margin: 0 auto;
}
.table-cargo-agent-list tbody{
    border: 1px solid rgb(192, 191, 191);
}
.table-cargo-agent-list td {    
    padding: 5px 0;
}
td.cargo-agent-infobtm {
    padding-bottom: 25px;
} 
td.cargo-agent-branch {
    font-size: 15px; 
    font-weight: bold;
    border-bottom: 1px solid rgb(192, 191, 191);    
}


/*responsive*/
@media screen and (max-width: 769px) {
    .cargo-contents {
        width: 95%;        
        margin: 0 auto;
    }
    .cargo-select-menu-1 p,
    .cargo-select-menu-2 p,
    .cargo-select-menu-3 p,
    .cargo-select-menu-4 p {
        font-size: 12px;
    }
    .cargo-top-img {
        display: block;
    }
    .cargo-top-img img {
        margin-top: 15px;
        width: 100%;
        height: auto;
    }
    .cargo-top-slide {
        display: none;
    }
    .cargo-infolist-inner{
        font-size:14px;
    }
    p.cargo-infolist-date {
        width: 25%;
    }
    p.cargo-infolist-text {
        width: 75%;
    }
    .cargo-menubtn:hover {         
        border: 1px solid #42ac4b;
        background-color: #42ac4b;                         
    }

    .cargo-menus-wrapper{
        display: none;
    }
}






/*運航再開情報*/

.resume_info_booking_wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.resume_info_onlytop_wrapper h1 {
    font-size: 18px 
}

.resume_info_booking_img_telbooking img{
    width:80%;
    padding:5px;
}
.resume_info_booking_icon_telbooking {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding:20px;
}
.resume_info_booking_icon_telbooking img{
    width:20%;            
    
}
.resume_info_intoro {
    margin: 40px 0;
}
.resume_info_parts {
    margin-bottom: 50px;
}
.keta_vj_btn_wrapper {
    display: flex;
    justify-content: center;                   
}
.keta_vj_btn_wrapper_top {
    display: flex;
    justify-content: left; 
}

.keta_vj_btn_space {
    margin: 20px 0 auto;
}
.btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 300px;
    height: 60px;
    color: rgb(78, 78, 78);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    text-align: center;                                            
}

.btn a:hover {
    color: rgb(78, 78, 78);
}
.keta_vj a {
    background-color: #fcfcfc;
    border: 1px solid transparent;
    border: 1px solid rgb(78, 78, 78);
}

.keta_vj a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #333;
}

.keta_vj a:hover {
    background-color: #fab7e9;
    border: 1px solid rgb(78, 78, 78);
}

.keta_vj a:hover::after {
    border-color: transparent transparent transparent rgb(78, 78, 78);
}
.kto_banner {
    text-align: center;
    margin-top: 15px;
}
.kto_banner img {
    width: 20%;
}
.keta_vj_img {
    display: flex;
    justify-content: center;
}
.keta_vj_img img{
    width: 25%;
}