@charset "utf-8";
/******************************************************************************
/* Greenapple-room  common css file
*******************************************************************************/

/******************************************************************************
/* body
*******************************************************************************/
body {
	background:				#f6f3ec;
}

/******************************************************************************
/* ヘッダ
*******************************************************************************/
.header h1{
	margin:					0;
	padding:				5px 0 5px 0;
	font-size:				14px;
}
.header p{
	margin:					0;
	padding:				0;
}

.logo p{
	color:					#8aaa16;
	font-size:				24px;
	font-weight:			bold;
}

/******************************************************************************
/* バナー
*******************************************************************************/
.banner {
	margin:					10px 0 0 0;
	padding:				5px 5px 5px 5px;
	background:				#ffffff;
}
.banner img{
	margin:					0 auto;
}

/******************************************************************************
/* ナビゲーション
*******************************************************************************/
.my_nav li{
	margin:					5px 0 0 0;
	width:					188px;
	text-align:				center;
	border-radius:			5px;
	background-color:		#dddddd;
}

/******************************************************************************
/* コンテンツ
*******************************************************************************/
.my_contents {
	margin:					10px 0 0 0;
	padding:				0;
	background-color:		#ffffff;
}
.my_contents h2{
	margin:					0;
	padding:				10px 5px 10px 10px;
	background-color:		#f4a460;
	color:					#fefefe;
	font-size:				14px;
}
.my_contents p{
	margin:					0;
	padding:				5px 10px 5px 10px;
}
.my_contents a{
	text-decoration:		none;
}
.my_contents dl{
	margin:					0;
	padding:				5px 0 5px 0;
}
.my_contents dt{
	width: 					90px;
	font-weight:			normal;
}
.my_contents dd{
	margin-left:			105px;
}


/******************************************************************************
/* サムネイル
*******************************************************************************/
.thumbnail {
	margin:					10px 0 0 0;
	padding:				0;
}
.thumbnail h2 {
	padding:				10px 0 10px 0;
	margin:					0;
	text-align:				center;
	background-color:		#f4a460;
	color:					#fefefe;
	font-size:				14px;
}

/******************************************************************************
/* フッタ
*******************************************************************************/
.footer {
	margin:					10px 0 0 0;
	padding:				20px 0 20px 0;
	background-color:		#dddddd;
	font-size:				14px;
}
.footer a{
	text-decoration:		none;
}
.footer h2{
	padding:				8px 0 8px 0; 
	margin:					5px 0 10px 0;
	text-align:				center;
	border-radius:			3px;
	background-color:		#888888;
	color:					#fefefe;
	font-size:				14px;
}

/******************************************************************************
/* copyright
*******************************************************************************/
.copyright {
	padding:				10px 0 10px 0;
	color:					#fefefe;
	background-color:		#222222;
}
.copyright p {
	padding:				0;
	margin:					0;
}
.copyright a {
	text-decoration:		none;
	color:					#fefefe;
}
.copyright a:hover {
	color:					#acacee;
}

/******************************************************************************
/* ヒーロートップ表示 クロスフェード　2020.4
*******************************************************************************/
.main_imgBox {
    height: 600px;
    overflow: hidden;
    position: relative; }

  .main_logo {
    z-index:11;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50%;
    height:auto;
}

  .main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 600px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

  .main_imgM {
    opacity: 0;
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_imgM:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_imgM:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_imgM:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_imgM:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_imgM:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         transform: scale(1.1);
                    z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         -webkit-transform: scale(1.1);
            z-index:9;
    }
    100% { opacity: 0 }
}


/******************************************************************************
/*　要素ふわっと　2020.4
*******************************************************************************/

.effect-fade {
　opacity : 0;
　transform : translate(0, 20px);
　transition : all 300ms;
}

.effect-fade.effect-scroll {
　opacity : 1;
　transform : translate(0, 0);
}

/******************************************************************************
/*　要素ふわっと その２ 　2020.4
*******************************************************************************/

.fadein {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.fadein.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
/******************************************************************************
/*　フィルターエフェクト 　2020.5
*******************************************************************************/

.img_wrap{
  border: 0px solid #ddd;
 
  margin: 0 auto;
  overflow: hidden;

}
.img_wrap img{

  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

/******************************************************************************
/*　お知らせ  　2020.5
*******************************************************************************/
dt{
  float: left;
}

dd{
  margin-left: 80px;
}


/******************************************************************************
/*　画像サイズを画面幅に合わせる  　2020.5
*******************************************************************************/
.resizeimage img { width: 100vw; }


/* スマートフォン表示用のスタイル */
@media (max-width: 767px) {
  .main_logo {
    width: 80% !important; /* 親要素に対して50%の幅に設定 */
    max-width: 200px !important; /* ただし、最大でも200pxまでにする */
    min-width: 150px !important; /* どんなに小さくても150pxは確保する */
    height: auto !important; /* 高さは自動調整して縦横比を維持 */
  }
}