/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

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

audio,canvas,video {
	display: inline-block; 
}

audio:not([controls]) {
	display: none;
	height: 0; 
}
[hidden],template {
	display: none; 
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

html{
  scroll-behavior: smooth;
}
body {
	margin:0;
    font-family: "メイリオ","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック", Osaka;
	line-height: 1.4rem;
    /*font-size: 16px;*/
	color: #333;
  	background-color: #eaedf2;
	-webkit-font-smoothing: antialiased; 
}


/* ==========================================================================
   Links
   ========================================================================== */

a					{ background: transparent;text-decoration:none; color: #333;}
a:focus 			{ outline: thin dotted; }
a:active,a:hover 	{ outline: 0; }
a:hover 			{ opacity:0.6; }

/* ==========================================================================
   Typography
   ========================================================================== */

h1					{ font-size: 2em; margin: 0.67em 0; }
abbr[title]			{ border-bottom: 1px dotted; }
b,strong,.strong	{ font-weight: bold; }
dfn,em,.em 			{ font-style: italic; }
p					{ -webkit-hyphens: auto; -epub-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
small, .small		{ font-size: 75%; }

/* ==========================================================================
H1, H2, H3, H4, H5 STYLES
   ========================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 
					{ text-rendering: optimizelegibility;  }
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a 
					{ text-decoration: none; }
h1, .h1 			{ font-size: 2rem;		line-height: 2.8rem;	font-weight: normal; }
h2, .h2 			{ font-size: 2rem;		line-height: 2.8rem;	font-weight: normal; }
h3, .h3 			{ font-size: 1.4rem;	line-height: 2rem;		font-weight: normal; }
h4, .h4 			{ font-size: 1rem;		line-height: 1.4rem;						 }
h5, .h5 			{ font-size: 1rem; 		line-height: 1.4rem;						 }

@media only screen and (max-width:750px) {
h1, .h1 			{ font-size: 1.4rem;		line-height: 2rem;	font-weight: normal; }
h2, .h2 			{ font-size: 1.4rem;		line-height: 2rem;	font-weight: normal; }
h3, .h3 			{ font-size: 1rem;		line-height: 1.4rem;	font-weight: normal; }
h4, .h4 			{ font-size: 1rem;		line-height: 1.4rem;	}					 
h5, .h5 			{ font-size: 1rem; 		line-height: 1.4rem;	}
}


/*****************************************
type-page
*****************************************/

/***********
H1
***********/
.type-page h1,
.type-page .h1		{ margin: 2rem 0 1.4rem 0;}
.archive h1,
.single h1			{ position: relative; padding-bottom: .4em; border-bottom: .4rem solid #ccc; margin: 1.4rem 0 1rem 0; }
.archive h1:after,
.single h1:after 	{ position: absolute; bottom: -0.4rem; left: 0; z-index: 2; content: ''; width: 20%; height: .4rem;}
.single .h1-green:after		{ background-color: #59B224; }
.single .h1-blue:after		{ background-color: #0860A8; }
.single .h1-orange:after	{ background-color: #FF6600; }


/***********
H2
***********/

.type-page h2		{ position: relative; padding-bottom: .4em; border-bottom: .4rem solid #ccc; margin: 1.4rem 0 1rem 0; }
.type-page h2:after { position: absolute; bottom: -0.4rem; left: 0; z-index: 2; content: ''; width: 20%; height: .4rem; }

.type-page .h2-green:after	{ background-color: #59B224; }
.type-page .h2-blue:after	{ background-color: #0860A8; }
.type-page .h2-orange:after	{ background-color: #FF6600; }

.single-post h2				{ position: relative; font-size: 1.4rem; line-height:2rem; }
.single-post h2 span		{ position: relative; z-index: 2; background-color: #fff; text-align: left; padding-right: 1rem; }
.single-post h2::before 	{ position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: .2rem; background-color: #ccc;; }

/***********
H2
***********/
.type-page h3,
.single-gallery h3			{ position: relative; line-height:2rem; }
.type-page h3 span,
.single-gallery h3 span	{ position: relative; z-index: 2; background-color: #fff; text-align: left; padding-right: 1rem; }
.type-page h3::before,
.single-gallery h3::before 
{ position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: .2rem; background-color: #ccc;; }




/* ==========================================================================
  Lists
========================================================================== */
dl,menu,ol,ul		{  }
dd					{ margin: 0; }
menu				{ padding: 0 0 0 40px; }
ol					{ margin: 0; padding: 0 0 0 2rem;  }
ul					{ padding: 0; list-style-type: none; }
nav ul,nav ol 		{ list-style: none; list-style-image: none; }
ol li				{ }

ul.list-style-disc		{ list-style-type: disc		; }
ul.list-style-decimal	{ list-style-type: decimal	; }
ul.list-style-circle	{ list-style-type: circle	; }
[class *='list-style-'] { padding-left: 1.4rem;	}

/* ==========================================================================
  Embedded content
========================================================================== */

img 				{ border: 0 ;max-width:100%;}
svg:not(:root) 		{ overflow: hidden; }

/* ==========================================================================
   Figures
   ========================================================================== */

figure 				{ margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */

fieldset 				{ border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend 					{ border: 0; padding: 0; }
button,input,select,textarea 
						{ font-family: inherit; font-size: 100%; margin: 0; }
button,input 			{ line-height: normal; }
button,select 			{ text-transform: none; }
button,
html input[type="button"],
input[type="reset"],
input[type="submit"]	{ -webkit-appearance: button; cursor: pointer; }
button[disabled],
html input[disabled]	{ cursor: default; }
input[type="checkbox"],
input[type="radio"]		{ box-sizing: border-box; padding: 0; }
input[type="search"] 	{ -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea 				{ overflow: auto; vertical-align: top; }

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

.mw_wp_form input[type="submit"] {
    display: block;
    margin: 0 auto;
    padding: 1rem;
    color: #fff;
    background: #333;
}
.mw_wp_form input[type="submit"]:hover {
	opacity:0.6;

}

/* ==========================================================================
   Tables
   ========================================================================== */

table 					{ border-collapse: collapse; border-spacing: 0; }

* 						{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.image-replacement,.ir 	{ text-indent: 100%; white-space: nowrap; overflow: hidden; }

.clearfix, .cf, .comment-respond { zoom: 1; }
.clearfix:after, .cf:after, .comment-respond:after { clear: both; }

span.amp				{ font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important; font-style: italic; }


/* ==========================================================================
 font-size - フォントサイズ
   ========================================================================== */
.text70{font-size:70%}      /* フォントサイズ70% */
.text80{font-size:80%}
.text90{font-size:90%}
.text100{font-size:1rem;}
.text110{font-size:110%}
.text120{font-size:120%}
.text130{font-size:130%}
.text140{font-size:1.4rem;}
.text150{font-size:150%}
.text160{font-size:1.6rem;}
.text170{font-size:170%}
.text180{font-size:180%}
.text190{font-size:190%}
.text200{font-size:200%}
.text210{font-size:210%}
.text220{font-size:220%}
.b{font-weight:700}     /* 太字 */
.u{text-decoration:underline}     /* 下線 */
.del{text-decoration:line-through} /* 打ち消し線 */

/* ==========================================================================
 font-color - フォントカラー
   ========================================================================== */

.blue		{ color:#0860A8; }    /* 青色 */
.green		{ color:#59B224; }   /* 緑色 */
.orange		{ color:#FF6600; }    /* 橙色 */

.red		{ color:red ;}     /* 赤色 */
.yellow		{ color:#fff000 ;}    /* 黄色 */
.pink		{ color:#ff0084 ;}    /* ピンク */
.gray		{ color:#999999 ;}    /* グレー */
.white		{ color:#fff;}    /* グレー */


/* ==========================================================================
 background-color - 背景色
   ========================================================================== */
.bg-blue	{ background-color:#0860A8;}  /* 青色の文字背景 */  
.bg-green	{ background-color:#59B224;}  /* 緑色の文字背景 */  
.bg-orange	{ background-color:#FF6600;}  /* 橙色の文字背景 */  

.bg-yellow	{ background-color:#ff0;} /* 黄色の文字背景 */
.bg-red		{ background-color:red;} /* 赤色の文字背景 */
.bg-gray	{ background-color:#999999;}  /* 橙色の文字背景 */
.bg-white	{ background-color:#fff;}
/* ==========================================================================
 hover-color - 背景色
   ========================================================================== */

.hv-blue a:hover		{ background-color:#0860A8;opacity:1;}  /* 青色の文字背景 */  
.bv-green_top a:hover,
.bv-green a:hover		{ background-color:#59B224;opacity:1;}  /* 緑色の文字背景 */  
.bv-orange a:hover		{ background-color:#FF6600;opacity:1;}  /* 橙色の文字背景 */ 
   
.current-menu-item.hv-blue a		{ background-color:#0860A8;opacity:1;}  /* 青色の文字背景 */  
.current-menu-item.bv-green	a		{ background-color:#59B224;opacity:1;}  /* 緑色の文字背景 */  
.current-menu-item.bv-orange a		{ background-color:#FF6600;opacity:1;}  /* 橙色の文字背景 */ 

.current-page-ancestor.hv-blue a	{ background-color:#0860A8;opacity:1;}  /* 青色の文字背景 */  
.current-page-ancestor.bv-green	a	{ background-color:#59B224;opacity:1;}  /* 緑色の文字背景 */  
.current-page-ancestor.bv-orange a	{ background-color:#FF6600;opacity:1;}  /* 橙色の文字背景 */ 
 

/* ==========================================================================
 text-align - 配置
   ========================================================================== */
.align1		{ text-align:center !important} /* 中央寄せ */
.align2		{ text-align:right !important}  /* 右寄せ */
.align3		{ text-align:left !important} /* 左寄せ */

/* ==========================================================================
 float - 回り込み
   ========================================================================== */
.r-flo{float:right;margin:10px} /* 右に回り込み */
.l-flo{float:left;margin:10px}  /* 左に回り込み */
.f-clear{clear:both}      /* 回り込みの解除 */

/* ==========================================================================
 hover - 画像リンクマウスオーバー時の不透明度
   ========================================================================== */
a img.fade { background:none !important; outline:none; -webkit-transition:all .3s; transition:all .3s; }
a:hover img.fade { opacity:0.7; filter:alpha(opacity=70); -ms-filter:"alpha( opacity=70 )"; background:none !important; }

/* ==========================================================================
 text-style - テキストスタイル
   ========================================================================== */
.att {padding-left:1em;text-indent:-1em;} /* 注意書き等で二行目以降を字下げ */
.att_box { margin:2em 0 2.5em; padding:1em 1.2em; line-height:2.0; border:1px dotted #cccccc; background:#fcfcfc; box-shadow:0px 4px 0px 0px #f7f7f7; } /* テキストボックス */


/*********************
FONT FACE (IN YOUR FACE)
*********************/

p {
  -ms-word-break: break-all;
  -ms-word-wrap: break-all;
  word-break: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
  }

  

/*********************
BUTTON DEFAULTS
We're gonna use a placeholder selector here
so we can use common styles. We then use this
to load up the defaults in all our buttons.

Here's a quick video to show how it works:
http://www.youtube.com/watch?v=hwdVpKiJzac

*********************/
.blue-btn, .comment-reply-link, #submit {
  display: inline-block;
  position: relative;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: white;
  font-size: 0.9em;
  font-size: 2rem;
  line-height: 34px;
  font-weight: normal;
  padding: 0 24px;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  -webkit-transition: background-color 0.14s ease-in-out;
  transition: background-color 0.14s ease-in-out; }
  .blue-btn:hover, .comment-reply-link:hover, #submit:hover, .blue-btn:focus, .comment-reply-link:focus, #submit:focus {
    color: white;
    text-decoration: none; }
  .blue-btn:active, .comment-reply-link:active, #submit:active {
    top: 1px; }

.blue-btn, .comment-reply-link, #submit {
  background-color: #2980b9; }
  .blue-btn:hover, .comment-reply-link:hover, #submit:hover, .blue-btn:focus, .comment-reply-link:focus, #submit:focus {
    background-color: #2574a8; }
  .blue-btn:active, .comment-reply-link:active, #submit:active {
    background-color: #2472a4; }


/*********************
INPUTS
*********************/


/* ==========================================================================
   LAYOUT & GRID STYLES
   ========================================================================== */

/*********************
LAYOUT
*********************/
.wrap 						{    
	width: 90%;
    margin: 0 auto;
    max-width: 1024px;width: 96%; margin: 0 auto; }

/*********************
NAVIGATION STYLES
*********************/

.nav						{ border-bottom: 0; margin: 0; }
.nav li 					{ }
.nav li a 					{ display: block; color: white; text-decoration: none; padding: 0.75em; }
.nav li ul.sub-menu li a,
.nav li ul.children li a	{ padding-left: 30px; }
.top-nav 					{ margin:0 auto; }



/*********************
 drawer-menu - スマホメニュー
*********************/
.drawer-menu li a 	{ }
.drawer-nav							{ background-color: #333 !important; z-index: 1000 !important; opacity: 0.9 !important;}
.drawer-nav							{ width:80%;}
.drawer--left .drawer-nav 			{ left: -80%; }
.drawer-hamburger-icon, 
.drawer-hamburger-icon:after, 
.drawer-hamburger-icon:before		{ background-color:#fff !important; }
.drawer-open .drawer-hamburger-icon { background-color: transparent !important;}

.drawer-toggle.drawer-hamburger 	{ background-color: #333 !important; opacity: 0.9 !important; z-index: 1000 !important;}


/*********************
HEADER STYLES
*********************/
.header { }
#top-header {
    background-size: cover;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 100vh;
	overflow:hidden;
}
#top-header .top-background {
    width: 100%;
    height: 100vh;
    position: relative;
    min-width: 1024px;
    background: #000;
}
#top-header .top-background .overlay {
	z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
	background: rgba(0,0,0,0.1) url(https://www.nippon-maru.or.jp/wp-content/themes/nihonmaru/library/images/dot2.png);
}

#top-header .top-background .youtube-player {
    position: absolute;
    z-index: 0;
    min-width: 100%;
    min-height: 100%;
}

@media only screen and (min-width: 1030px){ 
#top-header .logo { width: 595px; }
}
.mobile_header {
	
}
.mobile_header img{
    height: 100vh;
    width: 100%;
    margin-left: calc( 50vw - 960px );
    margin-left: calc( 50vw - 100% /2 );
}



@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
#top-header .logo a 				{ color: white; }
#top-header .header_backgrond 		{
	position: absolute;
    top: 50%;
    top: -webkit-calc(50% - 20px);
    top: -moz-calc(50% - 20px);
    top: calc(50% - 20px);
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
#top-header .header_backgrond img 	{ width:100%;	}
#top-header .header_backgrond .header_backgrond_img { min-height: 100vh; }


#top-header .logo {width:90vw;}
@media only screen and (min-width:750px) {
#top-header .logo 					{ width: calc(100vw /2);}
}

#top-header .header_link {
	position: absolute;
    bottom: 1rem;
    opacity: 0.5;
    right: 1rem;
    display: block;
    height: 2rem;
    width: 2rem;
    border-radius: 100%;
    margin: 0 auto;
    text-decoration: none;
    background: #fff;
    -webkit-transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
    text-align: center;
    line-height: 2rem;
    font-size: 1rem;
}
#top-header .header_link span{ 
 visibility:hidden;
}
@media only screen and (min-width:750px) {
#top-header .header_link {
    height: 4rem;
    width: 4rem;
	line-height: 4rem;
	font-size:1.6rem;
    bottom: 5rem;
    right: 5rem;	
}
}


#top-header .header_link :before{
}

#header-nav 			{ position: absolute; bottom: 0; left: 0; width: 100%; margin: 0 auto; background-color:black; height: 2.8rem}
#header-nav.fixed 		{ position: fixed; top: 0; width: 100%; z-index: 9000;}

#inner-header			{ background-size: cover; position: relative; width: 100%; margin: 0; padding: 0;}
#inner-header .h1		{ position:relative; overflow: hidden; min-height: 35vh;}
#inner-header .h1 img	{ width: 100%; height: auto; position:absolute;top:0;right:0;} 

.custom_header_title		{ position: absolute; right: 0; left: 0; top: 25%; width: 35%; margin: 0 auto; padding: 1.4rem;}
.custom_header_title img	{ width:100% ; }

@media only screen and (max-width:750px) {
.custom_header_title		{ width: 90%;}
#inner-header .h1 img	{ width: auto; height:100%; position:absolute;top:0;right:0;} 	
}


.custom_header_title.grey	{ }
.custom_header_title.orange { background: #FF6600; }
.custom_header_title.blue 	{ background: #0860A8; }
.custom_header_title.green	{ background: #59B224; }




/******************************************************************
PAGE NAVI STYLES
******************************************************************/
.pagination,
.wp-prev-next 		{ margin: 1.5em 0; }

.pagination 		{ text-align: center; }
.pagination ul		{ display: inline-block; background-color: white; white-space: nowrap; padding: 0; clear: both; border-radius: 3px; }
.pagination li		{ padding: 0; margin: 0; float: left; display: inline; overflow: hidden; border-right: 1px solid #eaedf2; }
.pagination a, 
.pagination span 	{ margin: 0; text-decoration: none;	padding: 0; line-height: 1em; font-size: 1em; font-weight: normal; padding: 0.75em; min-width: 1em; display: block; color: #2980b9; }
.pagination a:hover, 
.pagination a:focus, 
.pagination span:hover, 
.pagination span:focus  { background-color: #2980b9; color: white; }
.pagination .current	{  cursor: default; color: #5c6b80; }
.pagination .current:hover, 
.pagination .current:focus { background-color: white; color: #5c6b80; }

/* end .bones_page_navi */

/* fallback previous & next links */
.wp-prev-next .prev-link 	{ float: left; }
.wp-prev-next .next-link 	{ float: right; }


/******************************************************************
BREADCRUMBS
******************************************************************/
#breadcrumbs			{ padding: 0.6rem 0; margin: 0 auto; position: relative; overflow: hidden; line-height: 1.3rem; font-size: 0.9rem; }
#breadcrumbs span		{ white-space: nowrap}
#breadcrumbs a 			{ color: #fff; }
#breadcrumbs a:hover 	{ text-decoration: underline; }

#breadcrumbs span:last-child::after{ content:none; }

#breadcrumbs span::after{ font-family:'Font Awesome 5 Free';content: "\f105";padding-left: 0.39em; font-weight:bold;}


/*********************
SIDEBARS & ASIDES
*********************/
.widget ul li {
}

.no-widgets {
  background-color: white;
  padding: 1.5em;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 2px;
  margin-bottom: 1.5em; }
  
#post-list 			{}
#post-list h4		{}
#post-list ul		{}
#post-list ul li	{}
#post-list ul li a  {}


/*********************
FOOTER STYLES
*********************/
.footer 			{ clear: both; background-color: #F08300; color: #f8f9fa; padding: 1rem 0; }

.footer-nav:after	{content:""; clear:both; }

/*********************
LARGER MOBILE DEVICES
*********************/
@media only screen and (min-width: 481px) {
	.menu {}
	.menu ul {}
	.menu ul li {}
    .menu ul li a {}
	
	.entry-content {}
    .entry-content .alignleft, .entry-content img.alignleft {
		margin-right: 1.5em;
		display: inline;
		float: left;
	}
	.entry-content .alignright, .entry-content img.alignright {
      margin-left: 1.5em;
      display: inline;
      float: right; }
    .entry-content .aligncenter, .entry-content img.aligncenter {
      margin-right: auto;
      margin-left: auto;
      display: block;
      clear: both; }
}
/*********************
TABLET & SMALLER LAPTOPS
*********************/
@media only screen and (min-width: 768px) {
  .wrap { }
  .nav {
    border: 0;
	}
    .nav ul {
      background: #323944;
      margin-top: 0; }
    .nav li {
      float: left;
      position: relative;
		}
      .nav li a {
        border-bottom: 0;
		}
        .nav li a:hover, .nav li a:focus {
          color: white;
		}
      .nav li ul.sub-menu,
      .nav li ul.children {
        margin-top: 0;
        border: 1px solid #ccc;
        border-top: 0;
        position: absolute;
        visibility: hidden;
        z-index: 8999;
         }
        .nav li ul.sub-menu li,
        .nav li ul.children li {
         }
          .nav li ul.sub-menu li a,
          .nav li ul.children li a {
            padding-left: 10px;
            border-right: 0;
            display: block;
            width: 180px;
            border-bottom: 1px solid #ccc; }
          .nav li ul.sub-menu li:last-child a,
          .nav li ul.children li:last-child a {
            border-bottom: 0; }
          .nav li ul.sub-menu li ul,
          .nav li ul.children li ul {
            top: 0;
            left: 100%; }
      .nav li:hover > ul {
        top: auto;
        visibility: visible; }

  /*********************
  SIDEBARS & ASIDES
  *********************/
.sidebar { }

.widgettitle {
    border-bottom: 2px solid #444;
    margin-bottom: 0.75em; }

.widget { }
.widget ul li {
	margin-bottom: 0.75em; }
.widget ul li ul {
        margin-top: 0.75em;
        padding-left: 1em; 
}


  /*********************
  FOOTER STYLES
  *********************/
	.footer-links ul li {}
}




/*********************
DESKTOP
*********************/
@media only screen and (min-width: 1030px) {
.wrap { width: 1040px; } 
}

/*********************
LARGE VIEWING SIZE

*********************/
@media only screen and (min-width: 1240px) {
}

/*********************
RETINA (2x RESOLUTION DEVICES)

*********************/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
}

/*********************
PRINT STYLESHEET

*********************/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }

  a, a:visited {
    color: #444 !important;
    text-decoration: underline; }
    a:after, a:visited:after {
      content: " (" attr(href) ")"; }
    a abbr[title]:after, a:visited abbr[title]:after {
      content: " (" attr(title) ")"; }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }

  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  tr, img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; }

  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none; } 
}



.cf:after, [class *= 'wrap-']:after, [class *= 'grid']:after, section:after, .section:after, #commonFooter-02:after {
    display: block;
    clear: both;
}

    
/* =========================================================== */
/*  grid                                                       */
/* =========================================================== */

[class *='grid'] { 
	width:100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: start;
    align-items: flex-start;
}


.col-1  { width: 7.33333333% ;}
.col-2  { width: 15.66666667% ;}
.col-3  { width: 24% ; }
.col-4  { width: 32.33333333% ;}
.col-5  { width: 40.66666667% ;}
.col-6  { width: 49%  ;}
.col-7  { width: 57.33333333% ;}
.col-8  { width: 65.66666667% ;}
.col-9  { width: 74% ;}
.col-10 { width: 83.33333333% ;}
.col-11 { width: 90.66666667% ;}
.col-12 { width: 100% ;}

.wp-caption.col-1  { width: 7.33333333% !important;}
.wp-caption.col-2  { width: 15.66666667% !important;}
.wp-caption.col-3  { width: 24% !important; }
.wp-caption.col-4  { width: 32.33333333% !important;}
.wp-caption.col-5  { width: 40.66666667% !important;}
.wp-caption.col-6  { width: 49%  !important;}
.wp-caption.col-7  { width: 57.33333333% !important;}
.wp-caption.col-8  { width: 65.66666667% !important;}
.wp-caption.col-9  { width: 74% !important;}
.wp-caption.col-10 { width: 83.33333333% !important;}
.wp-caption.col-11 { width: 90.66666667% !important;}
.wp-caption.col-12 { width: 100% !important;}

.col-ns-1  { width: 8.33333333%; }
.col-ns-2  { width: 16.66666667%; }
.col-ns-3  { width: 25%; }
.col-ns-4  { width: 33.33333333%; }
.col-ns-5  { width: 41.66666667%; }
.col-ns-6  { width: 50%; }
.col-ns-7  { width: 58.33333333%; }
.col-ns-8  { width: 66.66666667%; }
.col-ns-9  { width: 75%; }
.col-ns-10 { width: 84.33333333%; }
.col-ns-11 { width: 91.66666667%; }


@media only screen and (max-width:750px) {
  [class *='grid'] > [class *='col-']	{ width:100%; }
  .wp-caption[class *='grid'] > [class *='col-']	{ width:100% !important; }	
  [class *='grid'] > [class *='col-sm']	{ width:100%; }
  .col-sm-1  { width: 7.33333333% !important; }
  .col-sm-2  { width: 15.66666667% !important; }
  .col-sm-3  { width: 24% !important; }
  .col-sm-4  { width: 32.33333333% !important; }
  .col-sm-5  { width: 40.66666667% !important; }
  .col-sm-6  { width: 49% !important; }
  .col-sm-7  { width: 57.33333333% !important; }
  .col-sm-8  { width: 65.66666667% !important; }
  .col-sm-9  { width: 74% !important; }
  .col-sm-10 { width: 83.33333333% !important; }
  .col-sm-11 { width: 90.66666667% !important; }
  .col-sm-12 { width: 100% !important; } 

}



/* ==========================================================================
   PARTS
   ========================================================================== */
  /*********************
  TOP
  *********************/

#main-contnts									{ margin-bottom: 1rem;}
#main-contnts article							{ height: auto; overflow: hidden;    margin: 10px 0; }
#main-contnts article .contents-link			{ background: #fff;}
#sub-contents .sub-contents-link img,
#main-contnts article .contents-link img,		
.entry-content .sub-contents-link img			{ height:auto ;display: block;width:100%;}

#sub-contents .sub-contents-link a,
#main-contnts article .contents-link a ,
.entry-content article .sub-contents-link a		{ position: relative; display: block; }

#main-contnts article .contents-link .image-box{ position: relative; display: block; }

.sub-contents-link .contents-link-title,
.contents-link .contents-link-title				{  position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; z-index: 50; }

.sub-contents-link .contents-link-title			{ width:90% !important; }

.contents-link .contents-link-title				{ width:60% !important; }

.item-thumb.item-thumb-hover {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
.item-thumb-hover {
    background: transparent;
    height: 100%;
    color: #fff;
    font-size: 1.6em;
    transition: all .35s ease;
	position:absolute;
	top:0;
	z-index: 40;
	
}
.item-thumb .hover-item {
	border: 3px currentColor solid;
    padding: .4em;
    transform: translateY(0);
    transition: all .35s ease;
    opacity: 0;
    position: absolute;
    margin: 0 auto;
    display: block;
    bottom: 0;
    vertical-align: middle;
    width: 50%;
    text-align: center;
    right: 0;
    left: 0;
}
.item-thumb:hover .hover-item { transform: translateY(-30px); opacity: 1; }

.item-thumb:hover .item-thumb-hover.blue	{ background: rgba(8, 96, 168, 0.6);  }
.item-thumb:hover .item-thumb-hover.orange	{ background: rgba(255, 102, 0, 0.6); }
.item-thumb:hover .item-thumb-hover.green 	{ background: rgba(92, 181, 49, 0.6); }

#sub-contents 									{ margin-bottom: 2rem;}
#sub-contents article							{ margin: 10px 0; }
#sub-contents article .sub-contents-link		{ text-align: center; }
#sub-contents article .sub-contents-link a ,	
.entry-content article .sub-contents-link a		{ display: block; text-decoration: none; line-height: 2; color: #fff;position:relative;}
#sub-contents .sub-contents { margin-bottom: 1rem;}
#sub-contents .sub-contents:last-child { margin-bottom: 0;}
#top-info 				{ background: #09090909; padding: 1rem;}
#top-info ul 			{}
#top-info ul li			{ margin: 1rem 0;}

#top-info .info-time 	{ }
#top-info .info-cat 	{ background: #000; text-align: center; color: #fff;}
#top-info .info-title 	{}


#introduction 			{ position: relative; height: auto; overflow: hidden; margin: 4rem 0; }
#introduction .int-title {
	width:100%;
    margin: 1rem auto;
    text-align: center;
    position: absolute;
    z-index: 10;
    font-size: 1.5rem;
    line-height: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
#introduction .int-title .int-contents { color: #333; display: block; }
#introduction .int-image 		{ display:block;width: 100%; overflow: hidden; position: relative; height: 100%; opacity:0.15; }
#introduction .int-image img	{ /* position: absolute; right: 0; height: 100%; */}


@media only screen and (max-width:750px) {
#introduction  			{ margin: 0; padding:2rem 0;}
#introduction .int-title{
    position: relative;
    transform: none;
    left: 0;
    font-size: 1rem;
    line-height: 1.4rem;	
}
#introduction .int-image	{display:none;}
#sub-contents .sub-contents { margin-bottom: 0rem;}
}

#event-info 	{ margin:2rem auto; }
#map iframe		{ width: 100%;height: calc(100vh * 0.5);}

#slider-gallery			{     margin: 2rem auto;}

#sub-nav { }
#sub-nav ul { }

#sub-nav ul li					{ display: inline-block; margin-bottom:0.5rem; }
#sub-nav li:after				{ content:"|" ;}
#sub-nav li:last-child:after	{ content:"" ;}
#sub-nav ul li a{ }
#sub-nav .current_page_item	a	{ border-bottom:2px #333 solid ;}

/*********************
 swiper-slide - スライダー
*********************/

.swiper-slide a		{ position:relative;width: 100%; height: 300px; overflow: hidden; display: block;}
.swiper-slide span	{ position: absolute; color: #fff; top: 0; padding: 10px;}
.swiper-slide img	{ width: 100%; height: auto; }

@media only screen and (min-width: 1030px){
.swiper-slide a		{ height: 300px;}
}

.gallery-item 		{ display: inline-block; padding-right: 2rem;}

.list-calendar		{ /*font-size:0.2rem; */}


#footer-nav {
    background: black;
    color: #fff;
}
#footer-nav .footer-nav-inner {
}
#footer-nav ul {
}
#footer-nav ul li {
}
#footer-nav ul li a{
}
.footer-logo {
	text-align: center;
    margin: 0 auto;
}
.footer-logo img{
	margin: 0 auto;
    max-width: 100%;
}



.gotop          { position:fixed; right:20px; bottom:20px; }
.gotop a        { 
display: block; color: #fff; text-decoration: none; background: #333; padding: 1.2rem 1.4rem; font-size: 1.4rem; box-shadow: 2px 2px 4px grey;
}
.gotop i		{ display: block; text-align: center; padding: 0; }
.gotop a span	{ display:none; }

.text-contact { 
text-align:center;
}
.text-contact p {
	padding: 0;
    margin: 0;
}
.source-org.copyright	{
text-align: center;
    font-size: 0.8rem;
    padding: 1.4rem 0 4rem 0;
}
  /*********************
  JUMP MENU
  *********************/
#jump-menu 		{ padding: 0.4rem 1rem;	}
#jump-menu li 	{	}
#jump-menu li a	{ padding: 0.4rem; width: 100%; display: block; margin-bottom: 0.4rem;    border-bottom: 1px solid #0860A8	}	

#jump-menu li a:after { font-family: FontAwesome; content:"\f107";float: right;}

 /*********************
  archive
  *********************/
  
.archive .info-cat 	{ background: #000; text-align: center; color: #fff;}
  

/*********************
POSTS & CONTENT STYLES
*********************/

#content 	{ margin-bottom:4rem; }

.hentry 					{ background-color: white; border-radius: 3px; margin-bottom: 1.5em; }
.hentry header 				{ }
.hentry footer 				{ }
.hentry footer p 			{ margin: 0; }

/* end .hentry */


.byline 					{ color: #9fa6b4; font-style: italic; margin: 0; }

/* entry content */
.entry-content 				{ padding: 0 ; }
.entry-content p 			{ margin: 0 0 1.4rem 0; }
.entry-content a 			{ text-decoration: underline; }

.entry-content table				{ width: 100%; border: 1px solid #eaedf2; margin-bottom: 1.5em; }
.entry-content table caption		{ color: #fff; background: #000; padding: 0.4rem;}

.entry-content tr					{ } 	
.entry-content tr:nth-child(even)	{ }


.entry-content th,
.entry-content td					{ border-right: 3px solid #fff; border-bottom: 3px solid #fff; padding: 0.5rem 0.7rem; }
.entry-content td 					{ background: #f9f9f9; }
.entry-content th 					{ background: #f4f4f4; font-weight: normal; white-space: nowrap;}
.entry-content thead th				{ background: #ececec; text-align: center; white-space: nowrap; }
.entry-content th:last-child 		{ border-right: 0; }
.entry-content td:last-child		{ border-right: 0; }
.entry-content table img			{ margin: .5rem auto; display: block;width:100%; }


.entry-content blockquote 			{ margin: 0 0 1.5em 0.75em; padding: 0 0 0 0.75em; border-left: 3px solid #2980b9; font-style: italic; color: #9fa6b4; }
.entry-content dd 					{ margin-left: 0; font-size: 0.9em; color: #787878; margin-bottom: 1.5em; }

.entry-content img 					{ margin: 0; max-width: 100%; height: auto; }
.entry-content .text 				{ padding: 0.4rem; line-height:2rem; } 
.entry-content .size-auto,
.entry-content .size-full,
.entry-content .size-large,
.entry-content .size-medium,
.entry-content .size-thumbnail  { max-width: 100%; height: auto; }
.entry-content pre 				{ background: #323944; color: #f8f9fa; font-size: 0.9em; padding: 1.5em; margin: 0 0 1.5em; border-radius: 3px; }

/* end .entry-content */

/* wp-caption */
.wp-caption 					{ max-width: 100%; margin-bottom: 1rem; }
.wp-caption img 				{ max-width: 100%; margin-bottom: 0; width: 100%; }
.wp-caption p.wp-caption-text	{ font-size: 0.85em; margin: 4px 0 7px;    line-height: 1.4rem; }

.tags 							{ margin: 0; }

.pdf::before		{ font-family:'Font Awesome 5 Free';content: "\f1c1";padding-right: 0.4em;color:red;   font-weight: bold;}
.excel::before		{ font-family:'Font Awesome 5 Free';content: "\f1c3";padding-right: 0.4em;color:green; font-weight: bold;}	 
.word::before		{ font-family:'Font Awesome 5 Free';content: "\f1c2";padding-right: 0.4em;color:blue; font-weight: bold;}

@media only screen and (max-width:750px) {
.entry-content table			{ table-layout: fixed; font-size: 0.4rem;	}
.leftimg.col-4					{ text-align: center;} /* 暫定 */  
}

/*********************
faq
*********************/
.faq {}

.faq .question {
	margin: 1.4rem 0;
    padding-left: 4rem;
    position: relative;

}
.faq .question::before {
	content: "Q";
    background: orange;
    color: #fff;
    padding: 0 1rem;
    position: absolute;
    left: 0;
}

.faq .answer {
    padding-left: 4rem;
    position: relative;
    margin-left: 2.;
}

.faq .answer::before {
    content: "A";
    background: blue;
    color: #fff;
    padding: 0 1rem;
    position: absolute;
    left: 0;
}

 

/* ----------------------------------------------------------------------
 margin - 要素の外側の余白
---------------------------------------------------------------------- */
.m0{margin:0 !important}    /* margin 0px を指定するクラス */
.mt0{margin-top:0 !important}   /* margin-top0px を指定するクラス */
.mr0{margin-right:0 !important}   /* margin-right0px を指定するクラス*/
.mb0{margin-bottom:0 !important}  /* margin-bottom0px を指定するクラス*/
.ml0{margin-left:0 !important}    /* margin-left0px を指定するクラス*/

.m4{margin:.4rem !important}
.mt4{margin-top:.4rem !important}
.mr4{margin-right:.4rem !important}
.mb4{margin-bottom:.4rem !important}
.ml4{margin-left:.4rem !important}

.m10{margin:1rem !important}
.mt10{margin-top:1rem !important}
.mr10{margin-right:1rem !important}
.mb10{margin-bottom:1rem !important}
.ml10{margin-left:1rem !important}

.m14{margin:1.4rem !important}
.mt14{margin-top:1.4rem !important}
.mr14{margin-right:1.4rem !important}
.mb14{margin-bottom:1.4rem !important}
.ml14{margin-left:1.4rem !important}

.m20{margin:2rem !important}
.mt20{margin-top:2rem !important}
.mr20{margin-right:2rem !important}
.mb20{margin-bottom:2rem !important}
.ml20{margin-left:2rem !important}

.m25{margin:25px !important}
.mt25{margin-top:25px !important}
.mr25{margin-right:25px !important}
.mb25{margin-bottom:25px !important}
.ml25{margin-left:25px !important}

.m30{margin:30px !important}
.mt30{margin-top:30px !important}
.mr30{margin-right:30px !important}
.mb30{margin-bottom:30px !important}
.ml30{margin-left:30px !important}

.m35{margin:35px !important}
.mt35{margin-top:35px !important}
.mr35{margin-right:35px !important}
.mb35{margin-bottom:35px !important}
.ml35{margin-left:35px !important}

.m40{margin:40px !important}
.mt40{margin-top:40px !important}
.mr40{margin-right:40px !important}
.mb40{margin-bottom:40px !important}
.ml40{margin-left:40px !important}

.m45{margin:45px !important}
.mt45{margin-top:45px !important}
.mr45{margin-right:45px !important}
.mb45{margin-bottom:45px !important}
.ml45{margin-left:45px !important}

.m50{margin:50px !important}
.mt50{margin-top:50px !important}
.mr50{margin-right:50px !important}
.mb50{margin-bottom:50px !important}
.ml50{margin-left:50px !important}

.m55{margin:55px !important}
.mt55{margin-top:55px !important}
.mr55{margin-right:55px !important}
.mb55{margin-bottom:55px !important}

.ml55{margin-left:55px !important}
.m60{margin:60px !important}
.mt60{margin-top:60px !important}
.mr60{margin-right:60px !important}
.mb60{margin-bottom:60px !important}
.ml60{margin-left:60px !important}

.m65{margin:65px !important}
.mt65{margin-top:65px !important}
.mr65{margin-right:65px !important}
.mb65{margin-bottom:65px !important}
.ml65{margin-left:65px !important}

.m70{margin:70px !important}
.mr70{margin-right:70px !important}
.mb70{margin-bottom:70px !important}
.ml70{margin-left:70px !important}

.m75{margin:75px !important}
.mt75{margin-top:75px !important}
.mr75{margin-right:75px !important}
.mb75{margin-bottom:75px !important}
.ml75{margin-left:75px !important}

.m80{margin:80px !important}
.mt80{margin-top:80px !important}
.mr80{margin-right:80px !important}
.mb80{margin-bottom:80px !important}
.ml80{margin-left:80px !important}

/* ----------------------------------------------------------------------
 padding - 要素の内側の余白
---------------------------------------------------------------------- */
.p0{padding:0 !important}   /* padding-0px を指定するクラス */
.pt0{padding-top:0 !important}    /* padding-top0px を指定するクラス */
.pr0{padding-right:0 !important}  /* padding-right0px を指定するクラス */
.pb0{padding-bottom:0 !important} /* padding-bottom0px を指定するクラス */
.pl0{padding-left:0 !important}   /* padding-left0px を指定するクラス */

.p4{padding:.4rem !important}
.pt4{padding-top:.4rem !important}
.pr4{padding-right:.4rem !important}
.pb4{padding-bottom:4rem !important}
.pl4{padding-left:.4rem !important}

.p10{padding:1rem !important}
.pt10{padding-top:1rem !important}
.pr10{padding-right:1rem !important}
.pb10{padding-bottom:1rem !important}
.pl10{padding-left:1rem !important}

.p14{padding:1.4rem !important}
.pt14{padding-top:1.4rem !important}
.pr14{padding-right:1.4rem !important}
.pb14{padding-bottom:1.4rem !important}
.pl14{padding-left:1.4rem !important }




.shop-item { margin: 0 auto; }

.shop-item a{ }

.shop-item .wp-caption-text{ }

.shop-item .wp-caption-text strong {}


.xo-event-calendar table.xo-month .month-event-title {
	border-radius: unset;
	color:#fff !important;
}

.link_anchor {
    margin-top: -3rem;
    padding-top: 3rem;
	    display: block;
}
.pp_gallery {
	display:none!important;
	    opacity: 0!important;
}
.pp_nav {
	display:none!important;
}
div.facebook .pp_next:hover {
	display:none!important;	
}
div.facebook .pp_previous:hover {
	display:none!important;
}
/* ----------------------------------------------------------------------
 port-museum
---------------------------------------------------------------------- */
.port-museum-map {
	position:relative;	
}
.port-museum-map img{

}
.port-museum-map a{
    display: block;
    position: absolute;
    height: 2rem;
    width: 2rem;
    border-radius: 50%;	
}
.port-museum-map a:hover { 
	background:#fff;
}
.port-museum-map .map_link001{
    top: 11.8%;
    right: 33.6%;
}
.port-museum-map .map_link002{
    top: 8.8%;
    right: 23.5%;
}
.port-museum-map .map_link003{
    top: 2.4%;
    right: 39.2%;
}
.port-museum-map .map_link004{
    top: 1.5%;
    left: 43%;
}
.port-museum-map .map_link005{
    top: 4%;
    left: 33.5%;	
}
.port-museum-map .map_link006{
    top: 8.4%;
    left: 23.2%;
}
.port-museum-map .map_link007{
	top: 14.5%;
    left: 29.6%;
	
}
.port-museum-map .map_link011{
    top: 31.5%;
    right: 13.5%;
}
.port-museum-map .map_link012{
    top: 27.5%;
    right: 5.5%;
}
.port-museum-map .map_link013{
    top: 17.5%;
    right: 17%;
}
.port-museum-map .map_link014{
	top: 15.5%;
    left: 71.5%;
}
.port-museum-map .map_link015{
	top: 20.5%;
    left: 62.5%;
}
.port-museum-map .map_link016{
    top: 28.4%;
    left: 55%;
}
.port-museum-map .map_link017{
    top: 34.5%;
    left: 59%;
	
}
.port-museum-map .map_link021{
    top: 39.5%;
    right: 26.5%;
}
.port-museum-map .map_link022{
    top: 34%;
    right: 20%;
}
.port-museum-map .map_link023{
	top: 35%;
    right: 7.5%;
}
.port-museum-map .map_link024{
    top: 64.5%;
    left: 88%;
}
.port-museum-map .map_link025{
	top: 71.5%;
    left: 79.5%;
}
.port-museum-map .map_link026{
    top: 77.4%;
    left: 69%;
}




@media only screen and (max-width:750px) {
.port-museum-map a{
    height: 1rem;
    width: 1rem;
}
}
.slick-slide{
}
.slick-slide img{
	margin:0 auto;
	width:calc(100vw/3 - 1rem);
	height:auto;
}
.slick-slide a{
	
}
.slick-prev
{
    left: 1rem !important;
	z-index:50;
}
.slick-next
{
    right: 1rem !important;
	z-index:50;	
}
.slick-prev:before,
.slick-next:before
{

    color: black !important;

}
.slick-items{
    text-align: center;
}
.slick-title{
	
}
@media only screen and (max-width:750px) {
.slick-slide img{
	width:100%;	
}
}

#top-banner{
    z-index: 900;
	position: absolute;
    bottom: calc(100vw * 0.05);
    left: 10%;
    display: block;	
	
	
	
}
#top-banner a{
}
#top-banner a img{
    width: calc(100vw * 0.2);
    height: auto;
	max-width: 300px;
}
@media only screen and (max-width:750px) {
#top-banner{
	bottom: 1rem;
	left: 1rem;
}
#top-banner a img{
	width: calc(100vw * 0.5);
	height:auto;
}
}


.booking-form-people-number-row{
	display:none;
}
.content-form fieldset{
	width:100% !important;
}
.content-form table{
	width:99% !important;
}