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

/* Default style clear----------------------------------------------------------- */
@import "reset.css";
/* -----------------------------------------------------------Default style clear */




/*================================================
 *  一般・共通設定
 ================================================*/

/*---　レイアウト　---*/

html {
    font-size: 62.5%;
	box-sizing:border-box;
	
}


body{
	font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
	}

html *{
	box-sizing:border-box;
}



#CONTENTS{
	margin:auto;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.wrap{
	width:1200px;
	margin: auto;
}


header{
	display:flex;
	justify-content:space-between;
	padding:20px;
	text-shadow:2px -2px 5px #fff;
}


.top{
	width:100%;
	height:100vh;
	background-image: url("../images/topimg.webp");
	background-position: center;
	background-color:rgba(255,255,255,0.25);
	background-blend-mode:lighten;
	background-size:cover;
	animation:fadein 1s;
}

/*フェードイン*/
@keyframes fadein {
   0% { opacity: 0; }
   50% { opacity: 1; }
}

/*上からふわっ*/
@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*左からふわっ*/
@keyframes fadeleft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}



nav ul{
	display:flex;
	justify-content:flex-end;
	align-items:bottom;
	gap:20px;
	font-weight:900;
	margin-right:20px;
	 }

nav ul::before{
	content: url("../images/icon_home.gif");
	margin-top:-5px;
}

nav ul li a:hover{
	color:#399918;
}





h1.logo{
	font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
	line-height:1.5;
	font-weight:600;
}

.home header{
	display:block;
	height:100vh;
}

.home h1.logo{
	animation: 1s fadeleft ease-in-out forwards;
	animation-delay: 0.6s;
	opacity: 0;
	margin-bottom:clamp(4.8rem, calc(4.4rem + 0.625vw), 5.8rem);
}


h1.logo span{
	font-size:70%;
}

.catch{
	font-size: clamp(2.8rem, calc(2.6rem + 0.625vw), 3.3rem);
	font-weight:900;
	opacity: 0;
	animation: 1s fadeup ease-in-out forwards;
	animation-delay: 1.2s;
}

.catch span{
	font-size:130%;
}


main > section{
	padding:2.5rem 0;
	width:100%;
}




main > section > div{
	padding:2.5rem 1rem;
}




main > section:nth-child(odd){
	background:#f6fef4;
}

main > section:nth-child(2n){
	background:#fff;
}



main > section h2{
	/*writing-mode:vertical-rl;*/
	font-weight:900;
	font-size: clamp(2.3rem, calc(3.1rem + 0.625vw), 4.5rem) !important;
	margin-bottom:2rem;
}



/*色*/
.f-green{
	color:#399918;
}


h2::first-letter{
	color:#399918;
}


/* スクロールダウンマーク */

/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置*/
  position:absolute;
  bottom:3%;
  right:3%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
	text-shadow:2px -2px 2px #fff;
}
/*(下からの距離が変化して全体が下→上→下に動く)*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*(Scrollテキストの描写)*/
.scrolldown span{
    /*描画位置*/
  position: absolute;
  left:-20px;
  bottom:10px;
    /*テキストの形状*/
  color: #000;
  font-size: 1rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -16px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #000;
    transform: skewX(-31deg);
}

.scrolldown:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  right:-10px;
    /*矢印の形状*/
  width:1px;
  height: 60px;
  background:#000;
}

/*----------------------------
scroll_up ｜スクロールで左右から出現
----------------------------*/
.scroll_left {
  transition: 0.8s ease-in-out;
  transform: translateX(-60px);
  opacity: 0;
}
.scroll_left.on {
  transform: translateX(0);
  opacity: 1.0;
}

.scroll_right {
  transition: 0.8s ease-in-out;
  transform: translateX(60px);
  opacity: 0;
}
.scroll_right.on {
  transform: translateX(0);
  opacity: 1.0;
}



#com{
	z-index:1;
}

#map iframe{
	border:none;
	height:500px;
	max-width:1200px;
	width:100%;
}



#com th,#com td,#history th,#history td{
	padding:5px 15px;
}


#com th,#history th{
	border-bottom:1px solid #399918;
}

#com dd,#history dd{
	padding:5px 0;
}

footer{
	background:#eff0ef;
	padding:2.5rem 0;
	display: flex;
	justify-content: space-around;
	gap:50px;
}

aside{
	background:#eff0ef;
}

aside ul{
	display:flex;
	justify-content:center;
	gap:30px;
	padding-top:20px;
}

.tel{
	font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
	vertical-align: middle;
}

.tel::before{
	content: url("../images/icon_tel.gif");
	position:relative;
	top:0.5rem;
	margin-right:10px;
}

.to_form a{
	background:#399918;
	color:#fff;
	padding:5px 30px 20px;
	font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
	display: inline-block;
	transition:0.5s ease;
}

.to_form a:hover {
	transform: scale(1.1);
}

.to_form a::before{
	content: url("../images/icon_form.png");
	position:relative;
	top:1.5rem;
	margin-right:10px;
}