/*-------------
base
font-family: "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
-------------*/
body,div,h1,h2,h3,h4,h5,h6,
form,input,p,div {margin:0px;padding:0px;}
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
img {border:0;vertical-align: top;}
body{
	margin:0px;
	padding:0px;
	width: 100%;
	background-image:url(../img/body-bgimg.png);
	background-position:0px 0px;
	}
#products5{
	background-image:url(../img/bg-footer.gif);}
#wrapper{	
	position:relative;
	width:980px;
	margin: 0px auto;
     /*   background-color:#66FF99; */
        background-color:#FFFFFF; 
	}
#single_page_image{
	width:980px;
	height:735px; 
	}
.effect8
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}


header{
        position:relative;
        background-color:#66FF99;
        background-image:url(../img/autumn_sky.jpg); 
/*      background-image:url(../img/shiodome_tulips.jpg); */
/*      background-image:url(../img/uji_sakura.jpg); */
/*	height:235px; */
	height:100px;
	}
#contents{
	margin: 0px auto;
	}
#website_icon_list{
	padding:10px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-around;
	}
#contentss{
	padding:10px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-around;
	}
.tour{
	padding:9px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-around;
	}
footer{  
	margin: 0 auto;
        text-align:center;
	background-image:url(../img/bg.gif);}
	}
/* .scr{
	overflow: scroll;   
	} */
#aplmedialogo{
	position:absolute;
	margin: 0px;
	top: 50px;
        left:100px; 
	}
#hdr_date_info{
        text-shadow: 0 1px 0 #bbb,
		     0 2px 0 #b0b0b0,
		     0 3px 0 #aaa,
		     0 4px 0 #a0a0a0,
		     0 5px 0 #888,
		     0 6px 1px rgba(0, 0, 0, .1),
		     0 0 5px rgba(0, 0, 0, .1),
		     0 1px 3px rgba(0, 0, 0, .3),
		     0 3px 5px rgba(0, 0, 0, .2),
		     0 5px 10px rgba(0, 0, 0, .25),
		     0 10px 10px rgba(0, 0, 0, .2),
		     0 20px 20px rgba(0, 0, 0, .15);
	position:absolute;
	margin: 0px;
	top: 10px;
        right:10px; 
}
#hdr_date_info2{
	color: #fff;
	font-size:200%;
	font-weight: bold;
        text-shadow: 2px 2px 3px #888,
		    -2px 2px 3px #888,
		    2px -2px 3px #888,
		    -2px -2px 3px #888;
	position:absolute;
	margin: 0px;
	top: 10px;
        right:10px; 
}
#hdr_time_info2{
	color: #fff;
	font-size:200%;
	font-weight: bold;
        text-shadow: 2px 2px 3px #888,
		    -2px 2px 3px #888,
		    2px -2px 3px #888,
		    -2px -2px 3px #888;
	position:absolute;
	margin: 0px;
	top: 40px;
        right:10px; 
}
#logo{
	position:relative;
	margin: 0px;
	top: 10px;
        left:10px; 
	}
#pageTop{
	margin:0px;
	padding:0px;
	width: 100%;
	background-image:url(../img/bg-footer.gif);
	background-position:0px 0px;
	text-align: right;
	}
#to_prev_pagetop{
	position:fixed;
	left:20px;
        top:20px;
	z-index:12;
	}
#to_prev_pagetop_p{
	position:fixed;
	left:20px;
        top:20px;
	z-index:12;
	}
#to_photo_table{
	position:fixed;
	right:20px;
        top:20px;
	z-index:9;
	}
#to_prev_picture{
	position:fixed;
	left:50px;
        top:300px;
	z-index:12;
	}
#to_next_picture{
	position:fixed;
	right:50px;
        top:300px;
	z-index:12;
	}

#fullscreenSwitch{
	position:fixed;
	right:20px;
        top:20px;
	z-index:12;
	}
#enter-exit-fs{
	position:fixed;
	right:20px;
        top:20px;
	z-index:12;
	}
#to_pagetop{
	position:fixed;
	right:20px;
        bottom:20px;
	z-index:12;
	}
#toppage_main_image{
	position:relative;
	margin: 0px;
	height:400px;   
/*	height:477px;   */
	overflow: hidden;
	width: 100%;
/*	background-image:url(../img/tohyako_park4.jpg);   */
/*	background-image:url(../img/young_girl_statue.jpg);  */
/*	background-image:url(../img/MM21_umidoritachinokaze.jpg); */
        -webkit-animation: anime 10s linear 0s infinite ;
        animation: anime 10s linear 0s infinite ;
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
	}
#original_page_image_area{
	background-color:#DDDDDD;
}
.original_page_image{
	position:relative;
	margin: 0px;
	padding:0px;
	height:600px;
	overflow: hidden;
	width: 100%;
/*      -webkit-animation: anime 10s linear 0s infinite ;
        animation: anime 10s linear 0s infinite ;
        -webkit-animation-delay: 3s;
        animation-delay: 3s; */
	}
#resize_page_image_area{
	background-color:#DDDDDD;
}
.resize_page_image{
	position:relative;
	margin: 0px;
	padding:0px;
	height:600px;
	overflow: hidden;
	width: 100%;
/*      -webkit-animation: anime 10s linear 0s infinite ;
        animation: anime 10s linear 0s infinite ;
        -webkit-animation-delay: 3s;
        animation-delay: 3s; */
	}
#toppage_Thumbnail_list{
	position:relative;
	margin: 0px;
	width: 100%;
/*	background-image:url(../img/tohyako_park4.jpg);   */
/*	background-image:url(../img/young_girl_statue.jpg);  */
/*	background-image:url(../img/MM21_umidoritachinokaze.jpg); */
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-around;
	}
#footer_bg {
	clear: both;
	margin:0px;
	padding:0px;
	height: 100px; 
	width: 100%;
	background-image:url(../img/minatomirai_back.png);
	background-repeat: no-repeat;
	background-position:0px 0px;
	}
.frame img {
	background: #fff;
	padding: 5px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
img.frame2 {
        background: #fff;
        padding: 5px;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	width:150px;
	border-radius: 3px;
        }
mg.frame3 {
        background: #fff;
        padding: 5px;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	width:160px;
        }
img.trim {
	background: #fff;
	padding: 5px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	width: 200px;
	height: 100px;
	object-fit: cover; 
/* この一行を追加するだけ！
   画像の縦横比を維持したままボックスを埋めたい時は、object-fit: cover; を使います。
   画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされます。 
　　https://www.webcreatorbox.com/tech/object-fit
*/
}
img.trim2 {
  width: 100%;
  height: 300px; 
  object-fit: cover; 
/* 縦の高さのみを固定して、横幅は画面や親要素いっぱいに表示させたい場合の指定方法。 */
/* 画像を中央以外の位置でトリミングしたい時は object-position プロパティーを使う。左上を基準にして、object-position: 横の位置 縦の位置; を記述する。
　　画像の左下でトリミングする時は object-position: 0 100%; を、
　　右下でトリミングする時は object-position: 100% 100%; を記述する。
　　パーセント指定の他にpxで指定する方法もある。　*/
/* トリミングせずに余白を表示してボックスの中央に画像を表示することもできる。
　　object-fit: cover; を指定していたところを object-fit: contain; に変更する。　*/
}
img.trim3 {
  width:;
  height:;
  object-fit: cover;
  display: block; 
/* インライン要素はその下に少しスペースを確保するのでこれを排除する。 */
}
#ft_ul{
        text-align:center;
        }
.ft_li{
        display:inline;
        margin:10px;
	padding:0px;
        font-weight: bold;
        font-size:1.2em;
        }
.kakumaru_box{
	color:#0099FF;
	background-color:#99CCFF;
	text-align:center;
	text-shadow:3px 6px 8px #333333;
	width: 500px;
/*	margin:0px 0px 30px; */
	margin: 0 auto;
	padding:30px;
	border:5px solid #0099FF;
	font-family:"Expletus Sans",arial,serif;
	font-size:150%;
	-webkit-border-radius:10px;
	-moz-border-radius:10px; 
	border-radius:20px;
	}
/* mddNav（ドロップダウンメニュー全体とナビボタン）
------------------------------------- */
#mddNav {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 45px;
  background: #ebebeb;
  background: linear-gradient(to bottom,  #ebebeb 45%,#d8d8d8 55%);
  border-top: #aaa 1px solid;
  border-bottom: #aaa 1px solid;
}
#mddNav > ul {
  display: flex;
  margin: 0 auto;
  width: 800px;
  height: 45px;
  text-align: center;
}
#mddNav > ul  li {
  display:inline-block;
  width: 160px;
  height: 45px;
  border-left: #aaa 1px solid;
  box-sizing: border-box;
}
#mddNav > ul > li:last-child {
  border-right: #aaa 1px solid;
}
#mddNav > ul > li > a {
  display: block;
  height: 45px;
  font-weight: bold;
  line-height: 45px;
  text-align: center;
  border: #fff 1px solid;
  transition: all 0.2s linear;
}
#mddNav > ul > li:hover > a {
  background: #FFF;
}
/* mddWrap
------------------------------------- */
#mddNav .mddWrap {
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 100;
  overflow: scroll;   /* スクロール表示 */
  display: none;
  width: 100%;
  height: 0;
  text-align: center;
  background: #fff;
  background: linear-gradient(to bottom,  #fff 0%,#efefef 100%);
  border-bottom: #aaa 1px solid;
  box-shadow: 0 2px 2px #eee;
}
#mddNav .mddWrap .mddInner {
  margin: 0 auto;
  padding-top: 30px;
  width: 800px;
  height: 200px;
  line-height: 1.5em;
  text-align: left;
}
#mddNav .mddWrap .mddInner .dropContent {
  display: flex;
}
#mddNav .mddWrap .mddInner .dropContent > div {
  margin-right: 20px;
  width: 250px;
/*  float: left;*/
  border-right: #aaa 1px solid;
}
#mddNav .mddWrap .mddInner .dropContent div:last-child {
  margin-right: 0;
  border-right: none;
}
#mddNav .mddWrap .mddInner .dropContent div > ul > li {
  line-height: 1.8em;
  border-left: none;
}
#mddNav .mddWrap .mddInner .dropContent div > ul > li i {
  margin-right: 0.5em;
}
#mddNav .mddWrap .mddInner .dropContent div > ul > li a:link {
  text-decoration: underline;
}
#mddNav .mddWrap .mddInner .dropContent div > ul > li a:hover {
  text-decoration: none;
}
#mddNav .mddWrap .mddInner p {
  margin-bottom: 20px;
  padding-left: 10px;
  line-height: 1.6em;
  border-left: #000 5px solid;
}
#mddNav .mddWrap .mddInner p strong {
  font-size: 1.1em;
  display: block;
}
#mddNav .mddWrap .mddInner .dropContent div span {
  margin-bottom: 5px;
  font-weight: bold;
}
.fa-chevron-right {
  margin-right: 0.5em;
  color: #F00;
}
.button {
	/* 文字サイズを1.0emに指定 */
	font-size: 1.0em;
	/* 文字の太さをboldに指定 */
	font-weight: bold;
	/* 縦方向に10px、
	 * 横方向に5pxの余白を指定 */
	padding: 10px 10px;
	/* 背景色を濃い青色に指定 */
	background-color: #248;
	/* 文字色を白色に指定 */
	color: #fff;
	/* 透明度を80%に指定 */
	opacity: 0.2;
	/* ボーダーをなくす */
	border-style: none;
    /* ボタンの影の指定
	* 影の横幅を2px
	* 縦長を2px
	* ぼかしを3px
	* 広がりを1px
	* 色を#666（グレー）に指定 */
	box-shadow: 2px 2px 3px 1px #666;
	-moz-box-shadow: 2px 2px 3px 1px #666;
	-webkit-box-shadow: 2px 2px 3px 1px #666;
    /* テキストの影の指定
	* 影の横幅を1px
	* 縦長を1px
	* ぼかしを2px
	* 色を#000（黒）に指定 */
	text-shadow: 1px 1px 2px #000;
    /* グラデーションの指定 */
	background: -moz-linear-gradient(bottom, #36d, #248 50%, #36d);
	background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #248), to(#36d));
    /* 角丸の指定 */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.button:hover {
    /* 透明度を40%に指定 */
	opacity: 0.6;
}
.button3 {
	/* 文字サイズを3.0emに指定 */
	font-size: 3.0em;
	/* 文字の太さをboldに指定 */
	font-weight: bold;
	/* 縦方向に10px、
	 * 横方向に5pxの余白を指定 */
	padding: 10px 10px;
	/* 背景色を濃い青色に指定 */
	background-color: #248;
	/* 文字色を白色に指定 */
	color: #fff;
	/* 透明度を80%に指定 */
	opacity: 0.2;
	/* ボーダーをなくす */
	border-style: none;
    /* ボタンの影の指定
	* 影の横幅を2px
	* 縦長を2px
	* ぼかしを3px
	* 広がりを1px
	* 色を#666（グレー）に指定 */
	box-shadow: 2px 2px 3px 1px #666;
	-moz-box-shadow: 2px 2px 3px 1px #666;
	-webkit-box-shadow: 2px 2px 3px 1px #666;
    /* テキストの影の指定
	* 影の横幅を1px
	* 縦長を1px
	* ぼかしを2px
	* 色を#000（黒）に指定 */
	text-shadow: 1px 1px 2px #000;
    /* グラデーションの指定 */
	background: -moz-linear-gradient(bottom, #36d, #248 50%, #36d);
	background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #248), to(#36d));
    /* 角丸の指定 */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.button3:hover {
    /* 透明度を40%に指定 */
	opacity: 0.6;
}