@charset "UTF-8";

/* [ Base ]
===================================================================== */
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 62.5%;
	color:#fff;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-text-autospace: ideograph-parenthesis;
	-moz-text-autospace: ideograph-parenthesis;
	-ms-text-autospace: ideograph-parenthesis;
	-o-text-autospace: ideograph-parenthesis;
	text-autospace: ideograph-parenthesis;
	word-wrap: break-word;
	word-break: normal;
}
body{
	height: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0;
 	font-family: 'Lato';
	font-size:1.2rem;
	line-height: 1.5rem;
	letter-spacing: 0.09rem;
	color:#000;
}
/* =Link
----------------------------------------------- */
a{
	color: #000;
	opacity: 1;
	text-decoration: none;
	font-family: 'Lato';
	-webkit-transition: opacity .5s ease-out;
	-moz-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
	transition: opacity .5s ease-out;
	cursor: pointer;
	}
a[href]:hover{
	text-decoration:none;
	}
	
::-moz-selection{
	background: #fff;
	color: #ddd;
	text-shadow: none;
	}
::selection {
	background: transparent;
	color: #ddd;
	text-shadow: none;
}
ul {
	list-style: none
}

/* ---------------- WELCOME ----------------- */
.start { background: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9000;
    display: flex; /* Flexboxを使用して子要素を中央配置 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */ } 
.start p { font-family: 'Lato'; 
    font-size: 2rem;
    letter-spacing: 0.3rem;
    color: #000;
    font-weight: 500 !important;
    z-index: 9999; width: auto; /* 必要に応じて変更 */
    text-align: center; /* テキストの中央揃え */
    display: block; /* デフォルトを block に設定 */ }

/* ---------------- TOP ----------------- */

#nav_top .top_logo{
	position:fixed;
	top:4rem;
	left:8rem;
	font-size:2rem;
	letter-spacing: 0.3rem;
	font-weight: 500!important;
}

.menu {
	position:fixed;
	top:15rem;
	left:4rem;
}

.menu ul li {
	line-height: 2.4rem;
	font-size: 1.8rem;
	font-stretch:ultra-expanded;
	letter-spacing:0.08em;
	padding-bottom:18px;
}
.menu ul #contact{
	position: fixed;
	bottom:12rem;
	left:8rem;
	letter-spacing:0.12rem;
}

.top_img {
	width: 100%;
	position: absolute;
	top: 40%;
	left: 25%;
}
.top_img img{
	width: 1080px;
}
.ammonoidea_img{
	position: fixed;
	bottom:5rem!important;
	left: 55%;
}
.ammonoidea_img img{
	width: 800px;
}
.radius_img{
	position: fixed;
	bottom:5rem!important;
	left: 60%;
}
.radius_img img{
	width: 700px;
}
.fromrift_img{
	position: fixed;
	bottom:5rem!important;
	left: 32%;
}
.fromrift_img img{
	width: 1280px;
}
figcaption{
	font-family: 'Lato';
	font-size:1.4rem;
	letter-spacing:0.18rem;
	line-height:1.6;
	padding-top:1rem;
}

h3 {overflow: hidden;
     text-align: left;
	 font-size:13px;
	 line-height:6;
	 }

h3 span {
    display: inline-block;
    position: relative;

}

h3 span:before,
h3 span:after {
    border-top: 1px solid;
	border-color:#888;
    content: "";
    position: absolute;
    top: 50%;
    width:1.8em;
	filter:alpha(opacity=80);
    opacity:0.5;}

h3 span:before {
    right:100%;
}

h3 span:after {
    left: 0%;
}
	
#copyright{
	position:fixed;
	bottom:3rem;
	left:8rem;
	letter-spacing:0.12rem;
	line-height:1.6;
	font-weight: 550;
}
#copyright a{
	font-size:1.7rem;
	letter-spacing:0.3rem;
	line-height:1.6;
	font-weight: 550;
}

/* ---------------- about ----------------- */
nav{
	padding-top:30px;
}
nav h1{
	margin-bottom:70px;
}
nav li{
	margin-bottom:8px;
	height:16px;
}

/* ---------------- modal_win ----------------- */
#container{
 width:100%;
}
#modal{
	position:fixed;
	font-family: 'Lato';
	font-size:1.6rem;
	letter-spacing:0.09rem;
	top:12rem;
	left:5.5rem;
}

.window{
 margin: 0 auto;
 display:none;
 position:absolute;
 top:60%;
 left:50%;
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
 background-color: rgba(51, 51, 51, 0);
 color: #333;
 text-shadow:none;
 border-radius: 5px;
 z-index: 20;
}

/* ----------------hover----------------- */	
.intro:hover {  filter:alpha(opacity=60);opacity:0.3;
transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out; /* opera */
-moz-transition: opacity 0.3s ease-out; /* firefox */
-webkit-transition: opacity 0.3s ease-out; /* chrome, safari */
-ms-transition: opacityr 0.3s ease-out; /* ie */ }
#modal:hover {  filter:alpha(opacity=60);opacity:0.3;
transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out; /* opera */
-moz-transition: opacity 0.3s ease-out; /* firefox */
-webkit-transition: opacity 0.3s ease-out; /* chrome, safari */
-ms-transition: opacityr 0.3s ease-out; /* ie */;
cursor:pointer; }
.rama:hover {  filter:alpha(opacity=60);opacity:0.3;
transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out; /* opera */
-moz-transition: opacity 0.3s ease-out; /* firefox */
-webkit-transition: opacity 0.3s ease-out; /* chrome, safari */
-ms-transition: opacityr 0.3s ease-out; /* ie */;
cursor:pointer; }
.makitomonari:hover {  filter:alpha(opacity=60);opacity:0.3;
transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out; /* opera */
-moz-transition: opacity 0.3s ease-out; /* firefox */
-webkit-transition: opacity 0.3s ease-out; /* chrome, safari */
-ms-transition: opacityr 0.3s ease-out; /* ie */;
cursor:pointer; }
.makimiho:hover {  filter:alpha(opacity=60);opacity:0.3;
transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out; /* opera */
-moz-transition: opacity 0.3s ease-out; /* firefox */
-webkit-transition: opacity 0.3s ease-out; /* chrome, safari */
-ms-transition: opacityr 0.3s ease-out; /* ie */;
cursor:pointer; }
.aither:hover {  filter:alpha(opacity=60);opacity:0.3;
transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out; /* opera */
-moz-transition: opacity 0.3s ease-out; /* firefox */
-webkit-transition: opacity 0.3s ease-out; /* chrome, safari */
-ms-transition: opacityr 0.3s ease-out; /* ie */;
cursor:pointer; }
.guha:hover {  filter:alpha(opacity=60);opacity:0.3;
transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out; /* opera */
-moz-transition: opacity 0.3s ease-out; /* firefox */
-webkit-transition: opacity 0.3s ease-out; /* chrome, safari */
-ms-transition: opacityr 0.3s ease-out; /* ie */;
cursor:pointer; }
.store:hover {  filter:alpha(opacity=60);opacity:0.3;
transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out; /* opera */
-moz-transition: opacity 0.3s ease-out; /* firefox */
-webkit-transition: opacity 0.3s ease-out; /* chrome, safari */
-ms-transition: opacityr 0.3s ease-out; /* ie */;
cursor:pointer; }