@charset "utf-8";

/* ヘッダー背景 */
.index-bg {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: -1;
}

.index-bg li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    -webkit-animation: anime 40s linear 0s infinite ;
    animation: anime 40s linear 0s infinite ;
}

.index-bg li:nth-child(1) { 
    background-image:url(../images-home/bg1.png);
}

.index-bg li:nth-child(2) {
    background-image: url(../images-home/bg2.png);
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

.index-bg li:nth-child(3) {
    background-image:url(../images-home/bg3.png);
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}

.index-bg li:nth-child(4) {
    background-image: url(../images-home/bg4.png);
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}

@-webkit-keyframes anime { 
    0% {
        -webkit-animation-timing-function: ease-in;
        opacity: 0;
    }
    10% {
        -webkit-transform: scale(1.1);
        opacity: 1;
    }
    40% {
        -webkit-transform: scale(1.2);
            -webkit-animation-timing-function: ease-out;
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(1.3);
        opacity: 0;
    }
    100% { opacity: 0 }
}

@keyframes anime { 
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
    }
    10% {
        transform: scale(1.1);
        opacity: 1;
    }
    40% {
        transform: scale(1.2);
            animation-timing-function: ease-out;
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0;
    }
    100% { opacity: 0 }
}
/* ヘッダー背景終わり */

/* トップロゴ */
.top-logo img{
    width: 300px;
    top: 3%;
	left: 1%;
    position: fixed;
}

.top-logo{
    float: left;
}

.top-logo a:hover{
    opacity: 0.5;
}

@media (max-width: 768px){
.top-logo img{
    width: 250px;
    top: 1%;
	left: 1%;
    position: fixed;
}
.top-logo{
    float: left;
}

.top-logo a:hover{
    opacity: 0.5;
} 
}
/* トップロゴ終わり */

/* ヘッダー */
header {
    position: ;
	width: 100%;
    height: 100vh;
   	font-size: 16px;
	text-align: left;
    z-index: 1;
    padding-top: 0px;
    opacity: 1;
}

.top-header{
    position: fixed;
    right: 2%;
    top: 1%;
    float: right;
    display: ;
    z-index: 100;
    width: auto;
}

@media (max-width: 768px){
.top-header{
    position: fixed;
    right: 3%;
    top: 1%;
    float: right;
    display: ;
    z-index: 100;
    width: auto;
}
}

.ms-header01{
    position: relative;
    top:65%;
    float: left;
    text-align: right;
    left: 100px;
    color: #ffffff;
    font-size: 36px;
    font-family:'Noto Serif JP', cursive;
    width: auto;
}

@media (max-width: 768px){
.ms-header01{
    position: relative;
    top:55%;
    float: left;
    text-align: right;
    left: 30px;
    color: #ffffff;
    font-size: 20px;
    font-family:'Noto Serif JP', cursive;
    width: auto;
    }
}
/* ヘッダー終わり */

/* ハンバーガーメニュー*/
.hamburger-menu div {
  width: 49px;
  height: 7px;
  background-color: #f08080;
  margin: 6px 0;
  transition: .5s;
  transform:rotateY(0deg);
  }

@media (max-width: 768px){
.hamburger-menu div {
  width: 49px;
  height: 7px;
  background-color: #f08080;
  margin: 6px 0;
  transition: .5s;
  transform:rotateY(0deg);
  }
}

.hamburger-menu:hover div {
  opacity:0.5;
    transform:rotateY(180deg);
}

.hamburger-menu + .sidenavs:target {
  overflow-x: visible;
  width: 35%;
  display:block;
}

@media (max-width: 768px){
.hamburger-menu + .sidenavs:target {
  overflow-x: visible;
  width: 100%;
  display:block;
}
}

.sidenavs:target {
  overflow-x: hidden;
    width: 0;
}


/* ハンバーガーメニュー表示時 */
.sidenavs {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color:#f08080;
  opacity: 0.9;
  font-family:'Roboto','Noto Serif JP', serif, cursive;
  overflow-x: hidden;
  padding-top: 30px;
  transition: 0.5s;
}

.sidenavs h1{
    font-size: 14px;
    padding-left: 20px;
    color: #f0f0f0;
}

@media (max-width: 768px){
.sidenavs h1{
    font-size: 16px;
    padding-left: 20px;
    color: #f0f0f0;
}
}

/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 16px;
  color: white;
  display: block;
  transition: 0.3s;
  font-weight:bold;
  transform:rotate(0deg) translate(0px,0px);
}

/* マウスオーバー後のリンク */
.sidenavs a:hover {
  color: white;
  opacity: 0.5;
  transform:rotate(-1deg) translate(2px,2px);
}

/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* ハンバーガーメニュー終わり*/


/* --- フッター ----- */
.f-t001 {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(3, 0.25fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 225px;
background: transparent;
position: relative;
z-index: 20;
font-family:'Roboto','Noto Serif JP', serif, cursive;
border-top: 1px solid #ffffff;
}

.f-t001 a{
text-decoration: none;
color: #ffffff;
}

.f-t001 a:hover{
color: #ffffff;
opacity: 0.5;
}

.f-t1 { grid-area: 1 / 1 / 2 / 11; 
background-color: transparent;
opacity: 1;
font-size: 24px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 50px;  
}

.f-t2 { grid-area: 2 / 3 / 3 / 5; 
background-color: transparent;
opacity: 1;
font-size: 20px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}

.f-t3 { grid-area: 2 / 5 / 3 / 7; 
background-color: transparent;
opacity: 1;
font-size: 20px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}

.f-t4 { grid-area: 2 / 7 / 3 / 9;
background-color: transparent;
opacity: 1;
font-size: 20px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}

.f-t5 { grid-area: 1 / 4 / 2 / 5; 
text-align: left;
opacity: 1;
z-index: 10;
padding-top: 40px;
}

.f-t6 { grid-area: 4 / 1 / 5 / 11;
background-color: transparent;
opacity: 1;
text-align: center;
color: #ffffff;
font-family:'Roboto','Noto Serif JP', serif, cursive;
padding-top: 15px;
}

.f-t7 { grid-area: 3 / 3 / 4 / 5;
background-color: transparent;
opacity: 1;
font-size: 16px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}

.f-t8 { grid-area: 3 / 5 / 4 / 7;
background-color: transparent;
opacity: 1;
font-size: 20px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}

.f-t9 { grid-area: 3 / 7 / 4 / 9;
background-color: transparent;
opacity: 1;
font-size: 20px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}



@media (max-width: 768px){
.f-t001 {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(3, 0.25fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 200px;
background: transparent;
position: relative;
z-index: 20;
font-family:'Roboto','Noto Serif JP', serif, cursive;
border-top: 1px solid #ffffff;
}

.f-t001 a{
text-decoration: none;
color: #ffffff;
}

.f-t001 a:hover{
color: #ffffff;
opacity: 0.5;
}

.f-t1 { grid-area: 1 / 1 / 2 / 11; 
background-color: transparent;
opacity: 1;
font-size: 16px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 50px;  
}

.f-t2 { grid-area: 2 / 1 / 3 / 4; 
background-color: transparent;
opacity: 1;
font-size: 14px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}

.f-t3 { grid-area: 2 / 4 / 3 / 8; 
background-color: transparent;
opacity: 1;
font-size: 14px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}

.f-t4 { grid-area: 2 / 8 / 3 / 11;
background-color: transparent;
opacity: 1;
font-size: 14px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}

.f-t5 { grid-area: 1 / 1 / 2 / 5; 
text-align: left;
opacity: 1;
z-index: 10;
padding-top: 40px;
}

.f-t6 { grid-area: 4 / 1 / 5 / 11;
background-color: transparent;
opacity: 1;
text-align: center;
color: #ffffff;
font-family:'Roboto','Noto Serif JP', serif, cursive;
padding-top: 35px;
}

.f-t7 { grid-area: 3 / 1 / 4 / 3;
background-color: transparent;
opacity: 1;
font-size: 12px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}

.f-t8 { grid-area: 3 / 3 / 4 / 7;
background-color: transparent;
opacity: 1;
font-size: 20px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}

.f-t9 { grid-area: 3 / 7 / 4 / 11;
background-color: transparent;
opacity: 1;
font-size: 20px;
text-align: center;
color: #ffffff;
z-index: 1;
padding-top: 10px;
}
}   

.topIcon {
  display       : inline-block;
  position      : fixed;       /* ボタン固定 */
  bottom        : 10px;        /* 下から位置 */
  right         : 5px;        /* 右から位置 */
  padding       : 15px 15px;   /* 余白     */  
  background    : #ffcc00;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  opacity       : 0.9;         /* 透明度     */
  border-radius : 10%;        /* 角丸       */
  font-size     : 18pt;        /* 文字サイズ */
  font-weight   : bold;        /* 太字       */
  line-height   : 1em;       /* 行の高さ   */
  letter-spacing: 1px;         /* 文字間隔   */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  z-index       : 99999;         /* 重ね順位   */
 font-family:'Roboto','Noto Serif JP', serif, cursive;
}

.topIcon:hover {
  opacity       : 0.5;  
}

.topIcon a{
    text-decoration: none;
    color: #ffffff;
}
/* --- フッター終わり ----- */