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

html, body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10000;
}

#header_logo { 
    width:100%;
    text-align: center;
 } 

#header_logo img { 
    width:1000px;
 }

.header_logo_grn {
    width:100%;
    text-align: center;
    background-color: #152c2a
}

.header_logo_grn img { 
    width:1000px;
 }

.header_logo_gry {
    width:100%;
    text-align: center;
    background-color: #dcdddd;
}

.header_logo_gry img { 
    width:1000px;
 }

#slider {
    width: 100%;
    height: 100vh;
}

#slider_logo{
        width:400px;
	position: absolute;
	z-index: 2;
	bottom: 8%;
	left: 10%;
	text-transform: uppercase;
	color: #fff;
}

.wrapper{
	position: relative;
}

.main { 
    width:1000px;
    margin:  0 auto;
    margin-top:  250px;
}

.main_online { 
    width:1000px;
    margin:  0 auto;
    margin-top:  0;
}

.main_online p{
    font-size: 30px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: left;
    letter-spacing: 0.5px;
    font-weight: bold;
    color: #000;
    margin:0 40px 1px 50px;
 
}

.main-inner{
    background-color: #471019;
}

.main-content{
    background-color: #142c2a;
}

.main-section{
    background-color: #142c2a;
}

.main a:hover {
	opacity:0.7;
        transition:0.3s;
}

.list {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.item img { 
    width:490px;
 }

.item-content{
    background-color: #b1a613;
    width:490px;
    height: 22px;
    margin-top:  50px;
}

.slide {
   width:80%;
   max-width:1500px;
   margin:0 auto;
   margin-top:  50px;
}

.slide li {
  list-style-type: none;
}

.slide img {
    width:100%;
    height:auto;
}

.slide .slick-slide {
    margin:0 10px 0 10px;
}

.slide a:hover {
	opacity:0.7;
        transition:0.3s;
}

.slick-prev, 
.slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    height: 15px;
    width: 15px;
}

.slick-prev {
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {
    right: -1.5%;
    transform: rotate(45deg);
}

.slide-content{
    background-color: #b1a613;
    width:100%;
    margin:0 auto;
    height: 40px;
}

.slide-contentfoot{
    background-color: #dcdddd;
    width:100%;
    margin:0 auto;
}

.slide-content_orange{
    background-color: #ce8100;
    width:100%;
    margin:0 auto;
    height: 40px;
}

.slide-content_purple{
    background-color: #925766;
    width:100%;
    margin:0 auto;
    height: 40px;
}

.slide-contentfoot_purple{
    background-color: #925766;
    width:100%;
    margin:0 auto;
    height: 100px;
    margin:  0;
}

.slide-contentfoot_purple p{
    font-size: 21px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    letter-spacing: 0.5px;
    font-weight:lighter;
    color: #fff;
    margin:0 0 50px 0;
 
}

.slide-content_purple2{
    background-color: #a174b0;
    width:100%;
    margin:0 auto;
    height: 40px;
}

.slide-content_lime{
    background-color: #b9c561;
    width:100%;
    margin:0 auto;
    height: 40px;
}

.container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.container img {
    width:400px;
    height: auto;
    margin:50px 30px 0 30px;
}

.container a:hover {
	opacity:0.7;
        transition:0.3s;
}

.footer {
 color: #808080;
 background: #e5e5e5;
 text-align: center;
 padding: 30px;
 margin-top: 200px;
}

.footer img{
   width:750px;
   padding: 30px 30px 100px 30px;
}

.footersns img{
    width:90px;
}
.footersns:hover {
  transform: translateY(-5px);
  transition-duration: 0.5s;
}
.footer .footermenu   {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.footer a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color:#385853;
  font-weight: bold;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 15px;
}
.footer .footermenu li {
 margin: 0;
 padding: 0 20px;
}
.footer .copyright {
 margin: 0;
 padding: 30px 0 0 0;
 font-size: 13px;
 color:#385853;
 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(10px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
 
.fadeUpTrigger{
    opacity: 0;
}

.scrolldown4{
	position:fixed;
	bottom:1%;
	right:3%;
	animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

.scrolldown4 span{
	position: absolute;
	left:-20px;
	bottom:10px;
	color: #e5e5e5;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.scrolldown4:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #e5e5e5;
    transform: skewX(-31deg);
}

.scrolldown4:after{
	content:"";
	position: absolute;
	bottom:0;
	right:0;
	width:1px;
	height: 50px;
	background:#e5e5e5;
}

.img-frame{
   position: relative;
    width: 100%;
    height: 100vh;
   overflow: hidden;
   margin: 0 auto;
}
.img-01, .img-02, .img-03, .img-04, .img-05, .img-06{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100vh;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}
.img-01{
   background-image: url('../img/img_07.jpg');
   animation: slide-animation-01 40s infinite;
}
.img-02{
   background-image: url('../img/img_02.png');
   animation: slide-animation-02 40s infinite;
}
.img-03{
   background-image: url('../img/img_03.png');
   animation: slide-animation-03 40s infinite;
}
.img-04{
   background-image: url('../img/img_04.png');
   animation: slide-animation-04 40s infinite;
}
.img-05{
   background-image: url('../img/img_05.png');
   animation: slide-animation-05 40s infinite;
}
.img-06{
   background-image: url('../img/img_06.png');
   animation: slide-animation-06 40s infinite;
}
@keyframes slide-animation-01 {
   0% {opacity: 1; transform: scale(1.0) ;}
   15% {opacity: 1;}
   20% {opacity: 0; transform: scale(1.15)}
   90% {opacity: 0}
   100% {opacity: 1; transform: scale(1.0)}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  15% {opacity: 0; transform: scale(1.15);}
  20% {opacity: 1;}
  30% {opacity: 1;}
  35% {opacity: 0; transform: scale(1.0);}
  40% {opacity: 0;}
  65% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  30% {opacity: 0;  transform: scale(1.0);}
  35% {opacity: 1;}
  45% {opacity: 1;}
  50% {opacity: 0; transform: scale(1.15)}
100% {opacity: 0; transform: scale(1.15);}
}
@keyframes slide-animation-04 {
    0% {opacity: 0;}
  45% {opacity: 0; transform: scale(1.15);}
  50% {opacity: 1;}
  60% {opacity: 1;}
  65% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-05 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  65% {opacity: 1;}
  75% {opacity: 1;}
  80% {opacity: 1; transform: scale(1.15)}
100% {opacity: 0; transform: scale(1.15);}
}
@keyframes slide-animation-06 {
    0% {opacity: 0;}
  75% {opacity: 0; transform: scale(1.15);}
  80% {opacity: 1;}
  90% {opacity: 1;}
  95% {opacity: 0.8; transform: scale(1.0);}
100% {opacity: 0;}
}

.news { 
    width:1000px;
    margin:  0 auto;
    margin-top:  200px;
}

.news_block h1{
    font-size: 23px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    letter-spacing: 0.5px;
    color: #000
    margin:0 0 50px 0;
 
}

.news_block h2{
    font-size: 18px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    font-weight:lighter;
    letter-spacing: 0.5px;
    color: #000
    margin:0 0 50px 0;
 
}

.news_block h3{
    font-size: 20px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center; 
    letter-spacing: 0.5px;
    color: #000
    margin:0px 0 50px 0;
 
}

.btn { 
    position: relative;
    margin-top:100px;
}

.btn_top {
    background-color: #bccad0;
    width: 340px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom :0;
    margin:  auto;
}

.btn_top p{
    font-size: 27px;
    font-family: "Sawarabi Mincho";
    text-align: center; 
    letter-spacing: 0.5px;
    color: #fff
    text-decoration: none;
 
}

.btn_top a:hover {
	opacity:0.7;
        transition:0.3s;
}







/* SP START */
@media (max-width: 768px){
  #header_logo{
    width:100%;
    text-align: center;
  }

#header_logo img { 
    width:100%;
 }

.header_logo_grn {
    width:100%;
    text-align: center;
    background-color: #152c2a;
}

.header_logo_grn img { 
    width:100%;
 }

.header_logo_gry {
    width:100%;
    text-align: center;
    background-color: #dcdddd;
}

.header_logo_gry img { 
    width:100%;
 }


#slider {
    width: 100%;
    height: 65vh;
}

#slider_logo{
        width:110px;
	position: absolute;
	z-index: 2;
	bottom: 5%;
	left: 7%;
	text-transform: uppercase;
	color: #fff;
}

.wrapper{
	position: relative;
}

.main { 
    width:100%;
    margin:  0 auto;
    margin-top:  50px;
}

.main_online { 
    width:100%;
    margin:  0 auto;
    margin-top:  0;
}

.main_online img { 
    width:100%;
    margin:  0 auto;
    margin-top:  0;
}

.main_online p{
    font-size: 13px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: left;
    letter-spacing: 0.5px;
    font-weight: bold;
    color: #000;
    margin:0 30px 1px 30px;
 
}

.main img{ 
    width:100%;
}

.main-inner{
    background-color: #471019;
}

.main-content{
    background-color: #142c2a;
}

.slide{
  display:inline; 
  list-style: none;
  padding-left:0;
  margin-left: 0;
}

.slide li {
    width:100%;
    margin:  0 auto;
}

.slide-content{
    background-color: #b1a613;
    width:100%;
    margin:0 auto;
    height: 20px;
    margin-top:  -10px;
}

.slide-contentfoot{
    background-color: #dcdddd;
    width:100%;
    margin:0 auto;
    margin-bottom:  50px;
}

.slide-contentfoot p{
    font-size: 15px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    letter-spacing: 0.5px;
    font-weight:lighter;
    color: #fff;
    margin:0 0 50px 0;
 
}

.slide-content_orange{
    background-color: #ce8100;
    width:100%;
    margin:0 auto;
    height: 20px;
    margin-top:  -10px;
}

.slide-contentfoot_orange{
    background-color: #ce8100;
    width:100%;
    margin:0 auto;
    height: 70px;
    margin-bottom:  50px;
}

.slide-contentfoot_orange p{
    font-size: 15px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    letter-spacing: 0.5px;
    font-weight:lighter;
    color: #fff;
    margin:0 0 50px 0;
 
}

.slide-content_purple{
    background-color: #925766;
    width:100%;
    margin:0 auto;
    height: 20px;
    margin-top:  -10px;
}

.slide-contentfoot_purple{
    background-color: #925766;
    width:100%;
    margin:0 auto;
    height: 70px;
    margin-bottom:  75px;
}

.slide-contentfoot_purple p{
    font-size: 15px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    letter-spacing: 0.5px;
    font-weight:lighter;
    color: #fff;
    margin:0 0 50px 0;
 
}

.slide-content_purple2{
    background-color: #a174b0;
    width:100%;
    margin:0 auto;
    height: 20px;
    margin-top:  -10px;
}

.slide-content_lime{
    background-color: #b9c561;
    width:100%;
    margin:0 auto;
    height: 20px;
    margin-top:  -10px;
}

.container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.container img {
    width: 170px;
    height: auto;
    margin:10px 5px 20px 5px;
}

.footer {
 color: #808080;
 background: #e5e5e5;
}

.footer img{
 width:95%;
 padding: 0;
}

.footersns img{
    width:50px;
    margin-bottom: 20px;
}
.footersns:hover {
  transform: translateY(-5px);
  transition-duration: 0.5s;
}
.footer .footermenu {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 justify-content: center;
}
.copyright {
 margin: 0;
 padding: 60px 0 20px 0;
 font-size: 7px;
 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(10px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
 
.fadeUpTrigger{
    opacity: 0;
}

.scrolldown4{
	position:fixed;
	bottom:10%;
	right:6%;
	animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

.scrolldown4 span{
	position: absolute;
	left:-20px;
	bottom:10px;
	color: #e5e5e5;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.scrolldown4:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #e5e5e5;
    transform: skewX(-31deg);
}

.scrolldown4:after{
	content:"";
	position: absolute;
	bottom:0;
	right:0;
	width:1px;
	height: 50px;
	background:#e5e5e5;
}

.img-frame{
   position: relative;
    width: 100%;
    height: 65vh;
   overflow: hidden;
   margin: 0 auto;
}
.img-01, .img-02, .img-03, .img-04, .img-05, .img-06{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 65vh;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}

.img-01{
   background-image: url('../img/img_sp_07.png');1
   animation: slide-animation-01 40s infinite;
}
.img-02{
   background-image: url('../img/img_sp_02-2.png');
   animation: slide-animation-02 40s infinite;
}
.img-03{
   background-image: url('../img/img_03.png');
   animation: slide-animation-03 40s infinite;
}
.img-04{
   background-image: url('../img/img_sp_04-2.png');
   animation: slide-animation-04 40s infinite;
}
.img-05{
   background-image: url('../img/img_05.png');
   animation: slide-animation-05 40s infinite;
}
.img-06{
   background-image: url('../img/img_sp_06-2.png');
   animation: slide-animation-06 40s infinite;
}

#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   z-index: 99;
}

#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

#sp-fixed-menu li img{
   display: block;
   width: 30%;
   margin:  0 auto;
   padding:5px 0 5px 0;
}

#sp-fixed-menu li:nth-child(-n+4){
   background: #dddd;
}




.news { 
    width:100%;
    margin:  0 auto;
    margin-top:  100px;
}

.news_block h1{
    font-size: 15px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    letter-spacing: 0.5px;
    color: #000
    margin:0 0 50px 0;
 
}

.news_block h2{
    font-size: 11px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    font-weight:lighter;
    letter-spacing: 0.5px;
    color: #000
    margin:0 0 50px 0;
 
}

.news_block h3{
    font-size: 13px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center; 
    letter-spacing: 0.5px;
    color: #000
    margin:0px 0 50px 0;
 
}

.btn { 
    position: relative;
    margin-top:50px;
}

.btn_top {
    background-color: #bccad0;
    width: 200px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom :0;
    margin:  auto;
}

.btn_top p{
    font-size: 15px;
    font-family: "Sawarabi Mincho";
    text-align: center; 
    letter-spacing: 0.5px;
    color: #fff
    text-decoration: none;
 
}


} 
/* SP FIN */

@media (min-width: 768px) {
   .for-sp{
      display:none;
    }
}