@charset "utf-8";
/* CSS Document */
html{
	font-size: 100%;
	scroll-behavior: smooth;
}
body{
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
	background-color: #FAEEDD;
}
header{
	width: 100%;
	height: 80px;
	position: fixed;
	background-color: #aa641e;
	z-index: 500;
}
#top{
	display: flex;
}
header .container{
	width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo-1{
	width: auto;
	height: 80px;
}

.header ul{
	width: 800px;
	display: flex;
	margin: 0 auto;
	justify-content: flex-end;
	align-items: center;
	list-style-type: none;
}

.header ul li a::before{
	content: url("../images/list.jpg");
	display: inline-block;
}
.header ul li a{
	font-size: 150%;
	margin-right: 50px;
	text-decoration: none;
	color: #000;
}
.header ul li a:hover{
	color: #FF6B00;
}
.bgimg-slider h1{
	margin-left: 250px;
}
.bgimg-slider img{
	width: 100%;
}  
.sbu_title{
	text-align: center;
	font-family: "YuGothic", "Yu Gothic medium", "Hiragino Sans", "Meiryo", sans-serif;
	font-weight: normal;
}
main{
	width: 100%;
}
.main_img{
	width: 400px;
	height: auto;
	margin-left: 50px;
}
.sbu_title{
	margin-top: 20px;
}

figcaption{
	width: 500px;
}
.box {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}
.box_item {
  position: relative;
  padding: 20px;
	margin: 30px;
}
.box_item .right{
  position: absolute;
  top: 120px;
  right: -500px;
}
.box_item .right-2{
  position: absolute;
  top: 0;
  right: -500px;
}
.box_item .right-3{
  position: absolute;
  top: 250px;
  right: -500px;
}
.detail{
	display:block;
	width:262px;
	height: 96px;	
	background:url("../images/button_on.jpg") no-repeat;
	position: absolute;
	top: 300px;
  	right: -500px;
	}
.down{
	top: 350px;
}
	.detail:hover img{
		display:none;
	}

.left{
	top: 200px;
  	left: 200px;
	}

section .container{
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 600px;
	box-sizing: border-box;
	padding-top: 50px;
}

.center{
	margin-top: 150px;
	text-align: center;
}
.container{
	position: relative;
}
.container p{
	position: absolute;
}

.wrapper{
	width: 1200px;
	margin: 0 auto;
}
.wrapper section{
	width: 1200px;
}
.wrapper img{
	height: 40px;
	width: auto;
}
.btn{
	top: -200px;
  	left: 800px;
	}
.wrapper section ul{
	list-style-type: none;
	display: flex;
	text-align: center;
	justify-content: flex-end;
}
.wrapper section ul li{
	margin-right: 30px;
}
footer{
	text-align: center;
}
.bgimg-slider {
    width: 100vw;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*ふわっと出現*/
.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
/* ===== 落ち葉を表示するコンテナのスタイル ===== */
.leaves-container {
  position: relative;
  /*height: 100vh;  コンテナの高さ */
  width: 100%; /* コンテナの横幅 */
  overflow: hidden; /* コンテナからはみ出した要素を隠す */
}

/* ===== 落ち葉のスタイル ===== */

/* 落ち葉の共通スタイル */
.leaf {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  animation: animate-leaf 25s linear;
}

/* 落ち葉1 */
.leaf-1 {
  background-image: url("../images/leaf-1.png"); /* 任意のパスを記入 */
}

/* 落ち葉2 */
.leaf-2 {
  background-image: url('../images/leaf-2.png'); /* 任意のパスを記入 */
}

/* 落ち葉3 */
.leaf-3 {
  background-image: url('../images/leaf-3.png'); /* 任意のパスを記入 */
}

/* ===== 落ち葉が降るアニメーション ===== */
@keyframes animate-leaf {
  0% {
    opacity: 0;
    top: 0;
    transform: rotate(0);
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: 100%;
    transform: rotate(1080deg);
  }
}
/*====================
スマホを基本設計にする
 - 〜479px：スマートフォン縦!
 - 480px〜599px：スマートフォン横
 - 600px〜959px：タブレット
 - 960px〜1279px：小型PC
 - 1280px〜：大型PC
====================*/

/* 〜479px：スマートフォン縦!
------------------------------ */
@media screen and (max-width:480px) {

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
	html{
		max-width: 480px;
	}
	header{
	max-width: 480%;
	height: 70px;
	position: fixed;
	z-index: 500;
	overflow: hidden;
	}
#top{
	display: flex;
}
header .container{
	max-width: 480px;
	margin: 0 auto;
	box-sizing: border-box;
	margin-bottom: 15px;
	height: 70px;
	overflow: hidden;
	display: flex;
	justify-content:flex-start;
	align-items: center;
}
.logo-1{
	width: auto;
	height: 50px;
	padding-right: 0;
	margin-top: 10px;
}
	.header ul li a::before{
	transform: scale(0.6);
}
.header ul{
	max-width: 300px;
	display: flex;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	list-style-type: none;
}
	.header ul li a{
	font-size: 70%;
	text-decoration: none;
	color: #000;
		margin: 0 auto;
}
	.bgimg-slider {
	width: 100vw;
	height: 100vh;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
	.bgimg-slider img{
		width:30%;
		height: auto;
		overflow: hidden;
		box-sizing: border-box;
	}
	.bgimg-slider h1{
		flex: none;
		display: flex;
		justify-content: center;
		margin-right: 180px;
	}

main{
	max-width: 480px;
}
.main_img{
	width: 80%;
	height: auto;
	margin-left: 0;
}
.sbu_title{
	margin-top: 10px;
}
figcaption{
	width: 100%;
}
	figure{
		max-width: 480px;
		margin: 0 auto;
	}
.bottom{
	margin-top: 400px;
	padding-right: 0;
}
.box {
  max-width: 480px;
  margin: 0 auto;
}
.box_item {
  position: relative;
  padding:0;
margin: 0;
}
.box_item .right{
  position: absolute;
  top: 350px;
  right: -10px;
}
.box_item .right-2{
  position: absolute;
  top: 0;
  right: 60px;	
}
.detail img{
		width: 150px;
		height: 50px;
	}
.detail{
	display:block;
	width: 150px;
	height: 50px;
	background:url("../images/button_on.jpg") no-repeat;
	background-size: 150px 50px;
	position: absolute;
	top: 430px;
  	right: 0;
	}
	.detail:hover img{
		display:none;
	}
.down{
	top:400px;
  	right: 0;
	}

#nakatu{
	margin-top: 150px;
	}
.box_item .right-3{
 	 position: absolute;
 	 top: 300px;
  	right:0;
	margin: 0 auto;
}
	#yado{
		margin-top: 140px;
	}
	#last{
		margin-top: 0px;
	}
	#tori{
		margin: 350px auto 0 auto;
	}
	.left{
	top: 540px;
  	left: 300px;
	}
	.btn{
	top: -100px;
  	left: 200px;
	}
	.center{
	text-align: center;
	margin-top: 65px;
}
section .container{
	max-width: 480px;
	margin: 0 auto;
	padding-bottom: 0;
	box-sizing: border-box;
	padding-top: 0;
}

	.center img{
	width: 100%;
	height: auto;	
	opacity: 1;
	visibility: visible;
	}
.wrapper{
	max-width: 480px;
	margin: 0 auto;
}
.wrapper section{
	max-width: 480px;
}
	.wrapper ul{
		margin-right: 100px;
	}
.wrapper img{
	height: 30px;
	width: auto;
}
	footer{
		font-size: 80%;
	}
	/*ハンバーガー*/
	/*ナビゲーション*/
	nav ul{
		flex-direction: column;
	}
	nav ul li{
		margin-left: 0;
		display: block;
		border: none !important;
		height: 40px;
	}
	
	/*＝＝＝＝＝＝ハンバーガーメニュー＝＝＝＝*/
.global-nav {
  position: fixed;
  right: -320px; /* これで隠れる */
  top: 0;
  width: 150px; /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 40px;
  background-color: rgba(255,255,255,0.30);
  transition: all .6s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
  position: absolute;
  right: 100px;
  top: 0;
  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
}
.global-nav__list {
  margin: 0;
  padding-right: 100px;
  list-style: none;
	text-align: center;
}
.global-nav__item {
  text-align: center;
  border-bottom: 1px solid #eee !important;
padding-bottom: 10px;
}
.global-nav__item a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: #111;
}
.global-nav__item a:hover {
  background-color: #eee;
}
.hamburger__line {
  position: absolute;
  left: 0px;
  width: 18px;
  height: 2px;
  background-color: #fff;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 14px;
}
.hamburger__line--2 {
  top: 20px;
}
.hamburger__line--3 {
  top: 26px;
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
}
.header ul li a::before{
	display: none;
}
}
/* 600px〜959px：タブレット
------------------------------ */
/*@media screen and (min-width:600px) and (max-width:959px) {
.sample{
  font-size: 1.5rem;
}
}

/* 960px〜1279px：小型PC
------------------------------ */
/*@media screen and (min-width:960px) and (max-width:1279px) {
.sample{
  font-size: 1.5rem;
}
}

/* 1280px〜：大型PC
------------------------------ */
/*@media screen and (min-width:1280px) {
.sample{
  font-size: 1.6rem;

}*/