@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: yusei;
    src: url(../fs/Yusei_Magic/YuseiMagic-Regular.ttf);
}

body {
    margin-top: 20vw;
    cursor: url(../images/cursor.png),auto;
    background-color: rgb(246, 208, 151);
}

h2 {
    font-size: 5vw;
    font-family: yusei;
    color: #202020;
}

p {
    font-size: 3.6vw;
    line-height: 1.6;
    color: #202020;
}

html {
    scroll-behavior: smooth;
}

/* ヘッダーここから */

header:nth-of-type(1) {
    display: none;
}

header:nth-of-type(2) {
    position: fixed;
    top: 0;
    width: 100%;
    margin-bottom: 2vw;
    background-color: rgb(241, 165, 114);
    z-index: 1000;
}

header div h1 {
    width: 80%;
    margin-left: 5vw;
    margin-right: auto;
}

header div h1 img {
    width: 100%;
    vertical-align: bottom;
}

nav ul {
    display: block;
}

nav ul li {
    background-color: bisque;
}

nav ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 2.4;
    color: #202020;
    font-size: 4vw;
}

/*ナビメニューのスタイルを指定*/
nav.NavMenu{
	position: fixed; /*表示位置を固定*/
	z-index: 2; /*重ね順を変更*/
	top: 0; /*表示位置を指定*/
	left: 0; /*表示位置を指定*/
	background: #fff;/*背景を白にする*/
	color: #000; /*文字色を黒にする*/
	text-align: center; /*テキストを中央揃え*/
	width: 100%; /*全幅表示*/
	transform: translateY(-100%); /*ナビを上に隠す上から出したい場合は、transform: translateYを使う。*/
	transition: all 0.6s; /*アニメーションの時間を指定*/
}

nav.NavMenu ul{
	background: #ccc; /*背景をグレーにする*/
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

header:nth-of-type(2) nav.NavMenu ul li{
	font-size: 1.1em;
	list-style-type: none;
	padding: 0;
	width: 100%;
	border-bottom: 1px dotted #333;
}

nav.NavMenu ul li:last-child{
	padding-bottom: 0;
	border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a{
	display: block; /*クリックできる領域を広げる*/
	color: #000;
	padding: 1em 0;
}


/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active{
	transform: translateY(0%);/*上から出したい場合は、transform: translateYを使う。*/
}


/*トグルボタンのスタイルを指定*/
.Toggle {
	position: fixed;    /* bodyに対しての絶対位置指定 */
	right: 13px;
	top: 20px;
	width: 42px;
	height: 42px;
	cursor: pointer;/*divだけどカーソルが変わるようにしている*/
	z-index: 3;/*ボタンを一番上にしている(押せなくなるから)*/
}

.Toggle span {
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 3px #000;
	transition: .35s ease-in-out;/*変化の速度を指定*/
	left: 6px;
}

.Toggle span:nth-child(1) {
	top: 9px;
}

.Toggle span:nth-child(2) {
	top: 18px;
}

.Toggle span:nth-child(3) {
	top: 27px;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
	top: 18px;
	transform: rotate(45deg);
}

header nav div h1 a:nth-of-type(1) {
    display: none;
}
/* ヘッダーここまで */

/* 猫ムーブ1ここから */
.move0 {
    display: none;
    width: 100%;
    overflow: hidden;
}

.move1 {
    width: 20vw;
    margin-left: -22vw;
    animation: move 10s linear infinite;
    animation-delay: 5s;
}

.move1 img {
    width: 100%;
}

@keyframes move {
    100% {
        margin-left: 100%;
    }
}
/* 猫ムーブ1ここまで */

/* お問合せメニューここから */
.menu-box {
    width: 100%;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;
}

.menu-box2 {
    position: relative;
    width: 40%;
}

.menu-box .menu-box2 img {
    position: absolute;
    bottom: 3vw;
    left: 26vw;
    width: 100%;
    vertical-align: bottom;
}
/* お問合せメニューここまで */

/* 猫ムーブ2ここから */
.move0-1 {
    width: 100%;
    margin-top: 20vw;
    overflow: hidden;
}

.move2 {
    width: 15vw;
    animation: move 14s linear infinite ;
}

.move2 img {
    width: 100%;
}

@keyframes move {
    0% {
        margin-left: -10%;
    }
    
    100% {
        margin-left: 95%;
    }
}
/* 猫ムーブ2ここまで */

/* フォームの説明ここから */
.application-box {
    width: 72%;
    margin-left: auto;
    margin-right: auto;
}
/* フォームの説明ここまで */

/* フォームここから */
.form-box2 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.form-box2 iframe {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.form-box {
    display: none;
}
/* フォームここまで */

/* 猫ムーブ4ここから */
.move0-2 {
    width: 100%;
    height: 8vw;
    overflow: hidden;
}

.move3 {
    width: 10vw;
    animation: move4 20s linear infinite ;
    transition: 1s;
}

.move3 img {
    width: 100%;
}

.move4 {
    position: relative;
    left: 1vw;
    bottom: 6vw;
    width: 12vw;
    animation: move5 20s linear infinite ;
    transition: 1s;
}

.move4 img {
    width: 100%;
}

.move5 {
    position: relative;
    left: 2vw;
    bottom: 12vw;
    width: 10vw;
    animation: move6 20s linear infinite ;
    transition: 1s;
}

.move5 img {
    width: 100%;
}

@keyframes move4 {
    0% {
        margin-left: -10%;
    }
    
    100% {
        margin-left: 100%;
    }
}

@keyframes move5 {
    0% {
        margin-left: -8%;
    }
    
    100% {
        margin-left: 100%;
    }
}

@keyframes move6 {
    0% {
        margin-left: -50%;
    }
    
    100% {
        margin-left: 100%;
    }
}
/* 猫ムーブ4ここまで */

/* フッターここから */
footer {
    width: 100%;
    background-color: rgb(0, 61, 0);
}

.footerbox1 h3 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5vw;
    text-decoration: none;
    text-align: center;
    font-size: 4.2vw;
    font-family: yusei;
    line-height: 2;
    border-bottom: 2px solid yellow;
}

.footerbox2 h3 {
    width: 80%;
    margin-top: 3.5vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5vw;
    text-decoration: none;
    text-align: center;
    font-size: 4.2vw;
    font-family: yusei;
    line-height: 2;
    border-bottom: 2px solid yellow;
}

.footerbox3 h3 {
    width: 80%;
    margin-top: 3.5vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5vw;
    text-decoration: none;
    text-align: center;
    font-size: 4.2vw;
    font-family: yusei;
    line-height: 2;
    border-bottom: 2px solid yellow;
}

h3 a {
    text-decoration: none;
    color: #fff;
    transition: .5s;
}

.footerbox0 {
    display: block;
    width: 95%;
    margin-bottom: 4vw;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5vw;
}

.footerbox0 .footerbox1 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.footerbox0 .footerbox2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.footerbox0 .footerbox3 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

footer .footerbox0 ul {
    list-style-type: none;
}

footer .footerbox0 ul a {
    display: block;
    text-decoration: none;
    line-height: 2.5;
    text-align: center;
    font-size: 3.7vw;
    color: #fff;
    transition: .5s;
}

footer p {
    padding-bottom: 1vw;
    text-align: center;
    color :#fff;
}

footer .footerbox4 {
    width: 100%;
    margin-bottom: 1vw;
    margin-left: auto;
    margin-right: auto;
}

footer .footerbox4 ul {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
}

footer .footerbox4 ul li:nth-of-type(1) {
    margin-left: auto;
}

footer .footerbox4 ul li:nth-of-type(4) {
    margin-right: auto;
}

footer .footerbox4 ul li:nth-of-type(1) a {
    display: block;
    padding-left: 1vw;
    padding-right: 1vw;
    text-decoration: none;
    font-size: 3.5vw;
    color :#fff;
    border-right: 2px solid yellow;
    transition: .5s;
}

footer .footerbox4 ul li:nth-of-type(2) a {
    display: block;
    padding-left: 1vw;
    padding-right: 1vw;
    text-decoration: none;
    font-size: 3.5vw;
    color :#fff;
    border-right: 2px solid yellow;
    transition: .5s;
}


footer .footerbox4 ul li:nth-of-type(3) a {
    display: block;
    padding-left: 1vw;
    padding-right: 1vw;
    text-decoration: none;
    font-size: 3.5vw;
    color :#fff;
    border-right: 2px solid yellow;
    transition: .5s;
}

footer .footerbox4 ul li:nth-of-type(4) a {
    display: block;
    padding-left: 1vw;
    padding-right: 1vw;
    text-decoration: none;
    font-size: 3.5vw;
    color :#fff;
    transition: .5s;
}

/* フッターここまで */

/* TOPへ戻るボタンここから */
.pagejump {
    display: none;
    width: 15%;
    position: fixed;
    bottom: 2vw;
    right: 1vw;
    transition: 1s;
}

.pagejump img {
    width: 100%;
    vertical-align: bottom;
}
/* TOPへ戻るボタンここまで */