/* 　全ページ共通　 */


/*全体*/

* {
    box-sizing: border-box;
}
body {
    font-family: "Helvetica Neue",
      Arial,
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      Meiryo,
      sans-serif;
    color :#333333; 
    font-size: 15px; 
    background-color: #fcfcfc ;
    width: 100%;    
    margin: 0 auto;
    padding-top:100px;
}
#header {    
    margin: 0 auto;
}
#main {
    /* max-width: 1200px; */
    margin: 0 auto;    
    margin-top: 30px;
    padding: 0 3%;                   
}  
/*#footerの指定は、このCSSファイルの下部、/＊フッター＊/ 部分参照　*/
.main_subpage_pc {
    margin-top: 130px
}



/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　header :会社ロゴや言語選択部分
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/

.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* max-width: 1200px; */
    margin: 0 auto;
    background-color: #fcfcfc;
    z-index: 999; 
}

.header-logo-pc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    height: 45px;
    background-color: #fcfcfc;
    padding: 0 15px;    
}

.header-logo {
    display: flex;
    flex-direction: column; 
}
.kampuferry-logo {
    height: 35px;
}
.kampuferry-logo-sp {
    height: 30px;
}
.kampuferry-logo-sp {
    display: none;
}
.header-kampuferry-logo {
    margin-left: 25px;
}
.header-kampuferry-logo img {
    align-items: center;
    margin-bottom: 0;
}
.header-middle-right {
    display: flex;
}
.header-middle img {
    height: 45px;
    margin-right: 10px;
}
.header-middle img:hover {
    opacity: 0.7;
    transition-duration: 0.1s;
} 
.header-right {
    display: flex;
    /* align-items: center;   */
    margin-top: 0;    
    /* flex-direction: column;     */
}
.header-right-lang {
    display: flex;
    flex-direction: column;
    justify-content: space-around;        
    margin-right: 25px;
}
.header-right-lang img {
    height:13px;
    margin-right: 8px;     
}
.header-right-lang li {
    margin-left: 15px;
    font-size: 18px;
    list-style: none;
    font-weight: bolder;
}
.header-right-lang a {
    text-decoration: none;
    color: #0025c0;
}
.header-right-lang a:hover { 
    color: #fab7e9;
}
.triangle-blue-logo {
    height: 13px;
    width: 13px;
}
.btn-open img {
    height:35px; 
    width:37px;
}
.sns-logo-pc {
    display: flex;
    align-items: flex-end;
}
.sns-logo-pc img {
    height: 35px;
    width: 35px;
    margin-right: 20px;      
}
/*タブレット・スマホ時 pc時は隠す*/
.lang-logo {
    display: none;
}
.sns-logo-sp {
    display: none;
}


/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　header :mypage logo
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/


/*======= pc時hambergermenu時Logo非表示*/
.lang-logo-ham-menu img {
    display: none;
}
@media screen and (max-width: 1000px) {
    .lang-logo-ham-menu img{
        display: block;               
    }
    .lang-logo-ham-menu .mypage_logo img {
        width: 34px;
        margin-right: 5px;
    }


}

/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　header :language logo pop up(responsive）
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/

.popup {
    background-color: #fcfcfc;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
    display: none;
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 5%;
    z-index: 999;
    width: 85%;
    height: 45%;
    margin: 0 auto;
}

    /* チェックボックスの初期設定 */
#popup-on{
    display: none;
}
    /* チェックされたらポップアップウインドウを開く */
#popup-on:checked + .popup{
    display: block;
}
    /* 閉じるボタン */
.btn-close{
    background: #0025c0;
    border-radius: 10px;
    color: #fcfcfc;
    padding: 10px;
    cursor: pointer;
    margin: 10px auto;
    width: 85%;
    text-align: center;
}
   /* 開くボタン */
.btn-open{
    background: #fcfcfc;
    border-radius: 10px;
    color: #fcfcfc;
    padding: 10px;
    cursor: pointer;
    margin: 10px auto;
    width: 95%;
    text-align: center;
}
   /* ポップアップの内容 */
.popup-content{    
    margin: 4px auto 4px auto;
    width: 90%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
p.korean {
    padding: 4px 100px;
    margin: 20px 0 13px 0;    
    border: #0025c0 2px solid;
    background-color: #fcfcfc;
}
p.english {
    padding: 6px 95px;
    margin: 13px 0; 
    border: #0025c0 2px solid;
    background-color: #fcfcfc;    
}
p.japanese {
    padding: 4px 100px;
    margin: 13px 0;    
    border: #0025c0 2px solid;
    background-color: #fcfcfc;
}
.popup-content p a {
    color: #0025c0;    
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}
.lang-logo label {
    padding:0;
    background-color: #fcfcfc;
}
.btn-open {
    margin: 0;
    padding: 0;
}




/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　⚓フッター
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/

#footer {
    color: #fcfcfc;      
    height: 300px;
    font-size: 13px;
    background: url(../img/footer_bg3.png) repeat-x center 50px;
}
.fotter-wrapper {
    padding-top:60px;
}
.footer-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;    
    padding-top: 30px; 
    padding-left: 0;   
}
ul.footer-menu li {
    display: inline;    
    text-decoration: none;
}
ul.footer-menu li a{
    color:#fcfcfc;
    
}
.footer-c-info {
    text-align: center;
    margin: 15px 0;
}
.footer-c-info img {
    height: 25px;
}
.footer-copyright {
    text-align: center;
    font-size: 10px;
}



/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　⚓スクロール時に出現する下部メニュー　候補1
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/

/* .under-menu-sp {
    display: none;
}
.under-menu {
    display: none;
    width: 100%;
    margin: 0 auto;
    height: 60px;            
    background: rgba(68, 153, 204, 0.9);           
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 999;           
} 

.under-menu .under-menu-btn {
    color :#fcfcfc;
    font-weight: bold;           
    padding :10px;      
    background: brown;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;      
    margin-top: 10px;
    margin-left: 15px;
    line-height: 20px;         
}
.under-menu .under-menu-btn-top {
    color :darkblue;
    font-weight: bold;           
    padding :10px;
    background: #fcfcfc;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block; 
    margin-top: 10px; 
    line-height: 20px; 
}
.under-menu .under-menu-btn:hover{
    background-color: rgb(165, 84, 84);   
}       */


/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　⚓スクロール時に出現する下部メニュー　候補2
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/

/*右側（トップに戻る）*/
#top_scroll_right{ 
    position: relative; 
    z-index: 100; 
    margin: 0; 
    padding: 0; 
}
 
#page-top1{
    display: block;
    position: fixed;
    z-index: 9999;
    bottom: -85px;
    right: 65px;
    width: 120px;
    height: 35px;
    padding: 0;
    color: #222;
    text-align: center;
    text-decoration: none;
    transition: 1s;
        -webkit-transition: 1s;
}
#page-top1 img{
    width: 120px;
}
img.right_hover {
    display: none;
}
#page-top1:hover{ 
    /* background: ; */
    transform: translateY(-10px);    
} 
#top_scroll_right:hover{
    background: #fff;
}


/*左側（予約）*/
#top_scroll_left{ 
    position: relative; 
    z-index: 100; 
    margin: 0; 
    padding: 0; 
} 
#page-top2{
    display: block;
    position: fixed;
    z-index: 9999;
    bottom: -85px;
    left: 35px;
    width: 150px;
    height: 35px;
    padding: 0;
    color: #222;
    text-align: center;
    text-decoration: none;
    transition: 1s;
        -webkit-transition: 1s;
} 
#page-top2 img {
    width: 120px;
} 
#page-top2:hover{ 
    /* background: ; */
    transform: translateY(-10px);
} 
#top_scroll_left:hover{
    background: #fff;
}

.top_scroll_left_tbsp {
    display: none;
}


/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　⚓各ページ共通 要素のスライドイン（下から上）
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/

/* .animation-slideup{
    animation: SlideIn 1.6s;
  }

  @keyframes SlideIn {
    0% {
      opacity: 0;
      transform: translateY(75px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  } */



/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　⚓index.html以外のページ　全体的なレイアウト
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/

.subpage_contents_wrapper {
    width: 100%;
    padding: 0 20px;        
}

/*=====　各ページ：最大幅を950pxに指定し中央寄せ　=====*/
.contents-wrapper {
    max-width: 80%;
    margin: 0 auto;    
}
@media screen and (max-width: 1000px) { 
    .contents-wrapper {
        max-width: 100%;
    }
}    

/*=====　各ページ：メインタイトル表示（水色背景に白文字）　=====*/
.title-background {
    background-color: #41c1fc;    
    height: 80px;       
}
.title-background h2{
    color: #fcfcfc;
    font-weight: normal;
    text-align: center;
    padding-top: 25px;    
}

/*=====　各ページ：サブタイトル表示=====*/ 
.sub-title {
    background-color: #0025c0;
    margin-top: 50px;
    margin: 20px 0;
    text-align: center;
}
.sub-title h3 {
    color: #fcfcfc;
    font-weight: bolder;    
    line-height: 40px;
    font-size: 20px;
    padding-left: 15px;    
}

/*=====　各ページ：サブのサブタイトル表示=====*/ 
.subsub-title h3 {
    padding-left: 15px;
    /* text-align: center; */
    color: #0025c0;
    font-size: 20px;
    background: linear-gradient(transparent 50%, #41c1fc 70%);
    margin: 20px 0;
}

/*===== 各ページ：ページ内リンク用のメニュー選択ボタン（背景薄黄色、しおり風デザイン）=====*/
.mainselect-menus {
    display: flex;
    flex-wrap: wrap;    
    width: 100%
}
.mainselect-menu-wrapper {
    width: 33.3%;  
}
.mainselect-menus a {   
    text-decoration: none;        
}
.mainselect-menu {
    display: flex;     
    height: 80px; 
    padding: 0 20px;         
    text-align: center;
    align-items: center;
    border-left: 8px solid #ddb73a;
    background-color: rgb(253, 253, 168); 
    margin: 10px 10px;  
}  
.mainselect-menu:hover {    
    border-left: 8px solid #ddb73a;
    background-color: #fab7e9; 
}
.mainselect-menu-icon {
    margin:0;
}
.mainselect-menu-icon img {
    width: 30px;
    height: 30px;
    margin-top: 0;      
}   
.mainselect-menu-text {
    text-align: left;
    margin: 0 auto;
               
} 
.mainselect-menu-text p {
    color: rgb(150, 93, 14);
	font-weight: bolder;
    font-size: 16px;
    text-align: center;       
} 


/*===== 各ページ：ページ内リンク用 アンカー=====*/

a.head-blank{
    display: block;
    margin-top:-130px;
    padding-top:130px;    
}




/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　⚓便利裏技
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/

/*===== 上下に空白を入れるclass指定(margin：要素外に)=====*/
.blank10 {
    margin-top: 10px;
}
.blank20 {
    margin-top: 20px;
}
.blank30 {
    margin-top: 30px;
}
.blank40 {
    margin-top: 40px;
}
.blank50 {
    margin-top: 50px;
}
.blank70 {
    margin-top: 70px;
}
.blank100 {
    margin-top: 100px;
}

/*===== 左右に空白を入れる指定（padding：要素内で）=====*/
.padding-side10px {
    padding: 0 10px;
}
.padding-side15px {
    padding: 0 15px;
}

/*===== アンダーライン =====*/
.underline {
    background: linear-gradient(transparent 70%, yellow 70%);
}
.underline_blue {
    background: linear-gradient(transparent 70%, skyblue 70%);
}


/*===== <span></span> フォントカラー（大切な点を伝える単語や文章、記号などの色付け用）　===== */
.fc-ord { /*色：オレンジレッド*/
    color: orangered;
} 

/*===== <span></span> ▶ のマーク　===== */
.triangle {
    font-size: 9px;
}