@charset "UTF-8";
/* CSS Document */

body{
	margin: 0;
	padding: 0;
	color: #707070;
	text-align: center;
	font-family: "しっぽり明朝 B1", serif;フォントの太さ: 400;フォントスタイル: 通常;
        font-size: 12px;
}


li{
	list-style: none;
}

li a{
	color: currentColor;
	text-decoration: none;
}

nuv{
	text-align: right;
}

.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 70px;
    width: 70px;
    justify-content: center;
    align-items: center;
    z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 15px;
    background-color: #E3E3E3;
    position: absolute;
}
.menu-btn span:before {
    bottom: 5px;
}
.menu-btn span:after {
    top: 5px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}
.menu-content ul {
    padding: 100px 10px 0;
}
.menu-content ul li {
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#707070;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}

.menu-content ul li a:hover{
	color: #E3E3E3;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #ffffff;
	background: rgba(255, 255, 255, 0.4);
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}

p a{
	color: currentColor;
	text-decoration: none;
}

td ul li{
	text-align: left;
}

td{
	text-align: end;
}

.container{
  height: 330px;
  width: 100%;
  position: relative;
}

.image1,.image2,.image3,.image4,.image5,.image6 {
  height: 285px;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  animation: image-switch-animation 30s infinite;
}

.image1,.image2,.image3,.image4,.image5,.image6{
  object-fit: cover;
  position: absolute;
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}
.image1:nth-of-type(1) {
  animation-delay: 0s;
}
.image2:nth-of-type(2) {
  animation-delay: 5s;
}
.image3:nth-of-type(3) {
  animation-delay: 10s;
}
.image4:nth-of-type(4) {
  animation-delay: 15s;
}
.image5:nth-of-type(5) {
  animation-delay: 20s;
}
.image6:nth-of-type(6) {
  animation-delay: 25s;
}


section{
	margin:0 auto 100px;
}

.omoi{
	line-height: 2.5em;
	letter-spacing: 0.1em;
}

.instaglam{
	height: 20px;
	width: 20px;
}


h2{
	margin-top: 100px;
	margin-bottom: 50px;
}

table{
	table-layout: fixed;
	margin-bottom: 100px;
	margin-left: auto;
	margin-right: auto;
}

td{
	width:35%;
        Padding-right: 20px;
　　　　　line-height: 5em;
	letter-spacing: 0.1em;
         font-size: 0.75em;
}

.plofilephoto{
	height: auto;
	width: 45%;
}


.name{
	font-size: 1.45em;
}

.plofile{
        line-height: 2.5em;
　　　　　
}

h3{
	margin-bottom: 50px;
}

.planphoto1,.planphoto2,.planphoto3{
        height: auto;
	width: 90%;
        object-position: left top;
}

td ul{
	line-height: 2.5em;
	letter-spacing: 0.1em;
}

.contact{
	margin-bottom: 300px;
}

.contactimg{
	height: 40px;
}

.logo{
	height: 85px;
	margin-top: 0;
	padding-top: 0;
}

@media only screen and (min-width:600px) {
	body{
		font-size: 120%;
	}
	.logo{
		height: 200px;
	}
         .container{
                 height: 850px;
                 width: 100%;
                 position: relative;
}
.image1,.image2,.image3,.image4,.image5, .image6{
  Height: 750px;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  animation: image-switch-animation 30s infinite;
}
.planphoto1,.planphoto2,.planphoto3{
        height: auto;
	width: 70%;
        object-position: left top;
}
td{
	width:35%;
        Padding-right: 50px;
　　　　　line-height: 5em;
	letter-spacing: 0.1em;
         font-size: 1em;
}
.instaglam{
	height: 50px;
	width: 50px;
}
.plofile{
        line-height: 50px;
　　　　　
}
.contactimg{
	height: 55px;
}
}

.fadeIn {
animation-name: fadeInAnime;
animation-fill-mode:backwards;
animation-duration:3s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0.5s;
animation-direction:normal;
}

@keyframes fadeInAnime{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}