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

:root {
--color-primary: rgba(0,100,56,1);
--color-primary-light: rgba(200,240,222,1);
--color-primary-dark: rgba(0,46,168,1);

--color-secondary: rgba(33,33,33,1);
--color-accent: rgba(230,0,0,1);

--color-bg: #ffffff;
--color-bg-alt: #f5f5f5;

--color-text: #333333;
--color-text-light: #666666;
--color-text-muted: #999999;

--color-border: #dddddd;
--color-danger: #e53935;
--color-success: #43a047;
--color-warning: #fb8c00;
--color-info: #1e88e5;
}

body { font-family: "Noto Sans JP", sans-serif; font-weight: 500; background: #FFF; color: #000;}

a,
a:hover { transition: ease .5s; text-decoration: none;}

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

a img { transition: ease .5s;}
a:hover img { transition: ease .5s;}

/*文字ループ*/
	.loop-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 50px;
  background: #f8d224;
	border-top: 1px solid;
	border-bottom: 1px solid;
}
.loop-wrap-white {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 50px;
  background: #fff;
border-top: 1px solid;
	border-bottom: 1px solid;
}
.loop-area {
  display: flex;
  animation: loop-slide 30s infinite linear 1s both;
  list-style: none;
  margin: 0;
  padding: 0;
}
.loop-area-re {
  display: flex;
  animation: loop-slide 30s infinite linear reverse 1s both;
  list-style: none;
  margin: 0;
  padding: 0;
}
.loop-area .content,.loop-area-re .content {
font-size: 28px;
    letter-spacing: 2px;
    font-weight: 800;
}
.loop-area .long{
	 width: 610px;
}
.loop-area .short{
	 width: 560px;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.cinzel {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.w_section {
  box-sizing: content-box;
  max-width: 100%;
  margin: 0 auto;
}
.gutter>*:not(:last-child) {
  margin-bottom: 2rem;
}

.bg01 { background: #1ccadb;}
.bg02 { background: #1ccadb;}
.bg03 { background: #fd0707;}
.cont-kitchen{
	background-color: #f8d224;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

/*PC*/
@media screen and (min-width: 1680px) {


body { font-size: 18px;}

.pc { display: block;}
.pcBr { display: inline-block;}
.sp { display: none;}
.spBr { display: none;}



header { background: var(--color-bg); border-top: solid 12px #313131;}
header .inner { width: 100%; height: 105px; padding: 0 46px 0 21px; display: flex; justify-content: space-between; align-items: center;}
header .inner .logo { width: 400px;}
header .inner .tel { width: 476px;}


footer { background: #4eb02d;}
footer .inner { width: 1190px; margin: auto; display: flex; justify-content: space-between; padding: 137px 0 218px; position: relative;}
footer .inner::after { content: ""; background: url(../images/footer/character.png); background-size: cover; width: 231px; height: 107px; position: absolute; right: 0; bottom: -14px;}
footer .inner .innerL { width: 400px;}
footer .inner .innerR { width: 478px;}
footer .inner .innerR nav { width: 100%; display: flex; justify-content: space-between; align-items: flex-end;}
footer .inner .innerR nav ul:nth-of-type(1) {}
footer .inner .innerR nav ul:nth-of-type(1) li { margin-top: 16px;}
footer .inner .innerR nav ul:nth-of-type(1) li a { font-size: 18px; color: #FFF;}
footer .inner .innerR nav ul:nth-of-type(1) li a:hover { background: rgba(0,0,0,0.2);}
footer .inner .innerR nav ul:nth-of-type(2) {}
footer .inner .innerR nav ul:nth-of-type(2) li { margin-top: 5px; padding-left: 1.4em; position: relative;}
footer .inner .innerR nav ul:nth-of-type(2) li::before { font-size: 14px; content: "―"; color: #FFF; position: absolute; top: 5px; left: 0;}
footer .inner .innerR nav ul:nth-of-type(2) li:nth-of-type(1) { margin-top: 0;}
footer .inner .innerR nav ul:nth-of-type(2) li a { font-size: 14px; color: #FFF;}
footer .inner .innerR nav ul li a { display: inline-block; padding: 5px;}
footer .inner .innerR nav ul li a:hover { background: rgba(0,0,0,0.2);}
footer .cp { width: 100%; height: 58px; background: #171717; font-size: 13px; color: #FFF; text-align: center; align-content: center;        font-weight: normal;}


/*サイドメニュー*/
.side_link { position: fixed; top: 30%; right: 0; width: 100px; height: 490px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #212121; border-radius: 20px 0 0 20px; z-index: 1000; border: solid 2px #FFF; border-right: none;}
.side_link p { writing-mode: vertical-rl; font-size: 20px; color: #FFF; margin-bottom: 10px;}
.side_link ul { display: flex; flex-direction: column; width: 92px; margin: 10px 0 10px auto;}
.side_link ul li { width: 100%; margin-top: 10px;}
.side_link ul li a { display: block; transform: translateX(10px);}
.side_link ul li a:hover { transform: translateX(0px);}


.sp_menu { display: none;}


/*準備中*/
.preparation { width: 100%; height: 50vh; display: flex; justify-content: center; align-items: center;}
.preparation .txt { text-align: center; padding: 50px 100px; border: solid 2px #CCC;}
.preparation .txt h3 { font-size: 30px; margin-bottom: 30px;}
.preparation .txt p { font-size: 20px;}


/*トップへ*/
#page-top { position: fixed; bottom: 40px; right: 40px; z-index: 200;}
#page-top a { text-decoration: none; color: #FFF; background: #000; width: 90px; height: 90px; display: block; text-align: center; align-content: center; transition: all .3s ease; position: relative; cursor: pointer;}
#page-top a::before { content: ""; display: block; width: 20px; height: 20px; border-left: solid 2px #FFF; border-top: solid 2px #FFF; transform: rotate(45deg); position: absolute; top: 30px; left: 0; right: 0; margin: auto;}
#page-top a span { font-size: 16px; position: absolute; top: 45px; left: 0; right: 0; margin: auto;}
#page-top a:hover { opacity: .5;}
#page-top a:hover img { transform: scale(1);}


/*下層
-------------------------------*/

/*下層メニュー*/
.com_header_nav {}
.com_header_nav .inner { background: #0e8d2f; padding: 20px 50px;}
.com_header_nav .inner ul { display: flex; justify-content: flex-end;}
.com_header_nav .inner ul li { padding-left: 40px; position: relative;}
.com_header_nav .inner ul li:nth-child(n+2)::before { content: ""; top: 0; bottom: 0; width: 2px; background: #FFF; position: absolute; left: 20px;}
.com_header_nav .inner ul li a { display: block; font-size: 15px; color: #FFF; padding: 5px;}
.com_header_nav .inner ul li a:hover { background: rgba(0,0,0,0.2);}


/*下層ヘッダ*/
.com_header {}
.com_header .inner { width: 100%; padding: 60px 0; background: #54b535 url("../images/common/com_header_bg.png") center top no-repeat; position: relative;}
.com_header .inner .img { width: 826px; margin: 0 auto 30px;}
.com_header .inner p { font-size: 24px; text-align: center; color: #FFF;}
	.com_header .inner .btn{
		width: fit-content;
        margin: 0 auto;
        margin-top: 40px;
	}
		.com_header .inner .img01 {
	width: fit-content;
	margin: 0 auto;
	z-index: 1;
	position: relative;
}


/*コンテンツ
-------------------------------*/


.bg01 { background: #1ccadb; position: relative;}
.bg02 { background: #1ccadb; position: relative;}
.bg03 {  position: relative;}
	.bg-kikan{
		background: url("../images/kikangentei/bg-kikangentei.png") repeat-y;
        padding: 90px 0;
	}
	.cont-toilet .wrap,.cont-kitchen .wrap{
		padding: 90px 0;
		width: 1400px;
        margin: 0 auto;
	}

	.yellow-inner{
		background-color: #fff;
        border: 10px solid #f8d224;
        max-width: 1200px;
		border-radius: 20px;
        margin: 0 auto;
		padding: 50px 95px;
	}
	.yellow-inner .img img{
		width: fit-content;
        margin: 0 auto;
	}
	    .bg01::before,.bg02::before,.bg03::before {
        content: "";
        background: url(../images/index/after-neko.png) no-repeat;
        position: absolute;
        left: 0;
        top: 210px;
        width: 540px;
        height: 200px;
        z-index: 10;
    }
	.bg01::after,.bg02::after,.bg03::after {
        content: "";
        background: url(../images/index/after-neko.png) no-repeat;
        position: absolute;
        right: 0;
        top: 50px;
        width: 540px;
        height: 200px;
        z-index: 10;
    }
	.ttl-menu{
		width: fit-content;
		margin: 0 auto;
		        padding-bottom: 3em;
	}
	
.content {}
.content .inner { display: flex; flex-direction: column; padding: 70px 0 120px;}
.content .inner h2 {}
.content .inner h2 .img { width: 620px; margin: 0 auto 80px;position: relative;z-index: 20;}
.content .inner .box { width: 1300px; margin: 50px auto 0; display: flex; justify-content: space-between;}
.content .inner .box:nth-of-type(1) { margin-top: 0;}
.content .inner .box a { width: 635px; display: block; background: #FFF; padding: 0 50px 50px 52px; border-radius: 40px;border: 1px solid;}
.content .inner .box a:only-child { width: 100%; display: flex; align-items: flex-start; gap: 41px; /*filter: drop-shadow( 3px 5px 10px rgba( 0,0,0,0.27));*/border: 1px solid;}
.content .inner .box a:hover { transform: scale(102%);}
.content .inner .box a img:only-child {}
.content .inner .box a img:nth-of-type(1) { width: 603px;}
.content .inner .box a img:nth-of-type(2) { width: 554px; margin-top: 100px;}
.content .inner .box.otoku { position: relative;}
.content .inner .box.otoku::before { content: ""; background: url("../images/index/icon_otoku.png"); background-size: cover; width: 122px; height: 122px; position: absolute; top: 30px; right: 10px; z-index: 10; transition: ease .5s;}
.content .inner .box.otoku:hover::before { content: ""; background: url("../images/index/icon_otoku.png"); background-size: cover; width: 122px; height: 122px; position: absolute; top: 28px; right: 0px; z-index: 10; transform: scale(102%); transition: ease .5s;}



.c-box--line { padding: 30px; max-width: 640px; width: 100%; background: #fff;}
.c-box--line .-box1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.c-box--line .-box1 > div { width: 200px;}
.c-box--line .-box1 > p { padding-left: 20px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}
.c-box--line .-box1 > p strong { font-size: 1.2em;}
.c-box--line .-box2 { border-radius: 10px; background: #00b900; padding: 10px; margin: 20px 0;}
.c-box--line .-box2 p { text-align: center; color: #fff;}
.c-box--line .-box3 { text-align: center; margin-bottom: 20px;}
.c-box--line .-box3 a { display: block; width: 238px; margin: auto;}
.c-box--line .-box4 { padding: 20px; background: #efefef;}
.c-box--line .-box4 ul li + li { margin-top: 10px;}

	.cont-flex .flex{
		display: flex;
	}
	.cont-toilet .cont-flex .flex img{ 
		width: 295px;
	}
	.cont-flex .flex a { display: block; background: #FFF; padding: 0 20px 30px 20px; border-radius: 10px;border: 1px solid;margin: 40px 15px;}
	.cont-flex .flex a:hover { transform: scale(102%);}


}



/*PC*/
@media print, screen and (min-width: 768px) and ( max-width: 1679px) {


.pc { display: block;}
.pcBr { display: inline-block;}
.sp { display: none;}
.spBr { display: none;}



header { background: var(--color-bg); border-top: solid 0.7143vw #313131;}
header .inner { width: 100%; height: 6.2500vw; padding: 0 2.7381vw 0 1.2500vw; display: flex; justify-content: space-between; align-items: center;}
header .inner .logo { width: 23.8095vw;}
header .inner .tel { width: 28.3333vw;}


footer { background: #4eb02d;}
footer .inner { width: 70.8333vw; margin: auto; display: flex; justify-content: space-between; padding: 8.1548vw 0 12.9762vw; position: relative;}
footer .inner::after { content: ""; background: url(../images/footer/character.png); background-size: cover; width: 13.7500vw; height: 6.3690vw; position: absolute; right: 0; bottom: -0.8333vw;}
footer .inner .innerL { width: 23.8095vw;}
footer .inner .innerR { width: 28.4524vw;}
footer .inner .innerR nav { width: 100%; display: flex; justify-content: space-between; align-items: flex-end;}
footer .inner .innerR nav ul:nth-of-type(1) {}
footer .inner .innerR nav ul:nth-of-type(1) li { margin-top: 0.9524vw;}
footer .inner .innerR nav ul:nth-of-type(1) li a { font-size: 1.0714vw; color: #FFF;}
footer .inner .innerR nav ul:nth-of-type(1) li a:hover { background: rgba(0,0,0,0.2);}
footer .inner .innerR nav ul:nth-of-type(2) {}
footer .inner .innerR nav ul:nth-of-type(2) li { margin-top: 0.2976vw; padding-left: 1.4em; position: relative;}
footer .inner .innerR nav ul:nth-of-type(2) li::before { font-size: 0.8333vw; content: "―"; color: #FFF; position: absolute; top: 0.2976vw; left: 0;}
footer .inner .innerR nav ul:nth-of-type(2) li:nth-of-type(1) { margin-top: 0;}
footer .inner .innerR nav ul:nth-of-type(2) li a { font-size: 0.8333vw; color: #FFF;}
footer .inner .innerR nav ul li a { display: inline-block; padding: 0.2976vw;}
footer .inner .innerR nav ul li a:hover { background: rgba(0,0,0,0.2);}
footer .cp { width: 100%; height: 3.4524vw; background: #171717; font-size: 0.7738vw; color: #FFF; text-align: center; align-content: center; font-weight: normal;}


/*サイドメニュー*/
.side_link { position: fixed; top: 30%; right: 0; width: 5.9524vw; height: 29.1667vw; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #212121; border-radius: 1.1905vw 0 0 1.1905vw; z-index: 1000; border: solid 0.1190vw #FFF; border-right: none;}
.side_link p { writing-mode: vertical-rl; font-size: 1.1905vw; color: #FFF; margin-bottom: 0.5952vw;}
.side_link ul { display: flex; flex-direction: column; width: 5.4762vw; margin: 0.5952vw 0 0.5952vw auto;}
.side_link ul li { width: 100%; margin-top: 0.5952vw;}
.side_link ul li a { display: block; transform: translateX(0.5952vw);}
.side_link ul li a:hover { transform: translateX(0.0000vw);}


.sp_menu { display: none;}


/*準備中*/
.preparation { width: 100%; height: 50vh; display: flex; justify-content: center; align-items: center;}
.preparation .txt { text-align: center; padding: 2.9762vw 5.9524vw; border: solid 0.1190vw #CCC;}
.preparation .txt h3 { font-size: 1.7857vw; margin-bottom: 1.7857vw;}
.preparation .txt p { font-size: 1.1905vw;}


/*トップへ*/
#page-top { position: fixed; bottom: 2.3810vw; right: 2.3810vw; z-index: 200;}
#page-top a { text-decoration: none; color: #FFF; background: #000; width: 4.1667vw; height: 4.1667vw; display: block; text-align: center; align-content: center; transition: all .3s ease; position: relative; cursor: pointer;}
#page-top a::before { content: ""; display: block; width: 1.1905vw; height: 1.1905vw; border-left: solid 0.1190vw #FFF; border-top: solid 0.1190vw #FFF; transform: rotate(45deg); position: absolute; top: 1.1905vw; left: 0; right: 0; margin: auto;}
#page-top a span { font-size: 0.9524vw; position: absolute; top: 2.0833vw; left: 0; right: 0; margin: auto;}
#page-top a:hover { opacity: .5;}
#page-top a:hover img { transform: scale(1);}


/*下層
-------------------------------*/

/*下層メニュー*/
.com_header_nav {}
.com_header_nav .inner { background: #0e8d2f; padding: 1.1905vw 2.9762vw;}
.com_header_nav .inner ul { display: flex; justify-content: flex-end;}
.com_header_nav .inner ul li { padding-left: 2.3810vw; position: relative;}
.com_header_nav .inner ul li:nth-child(n+2)::before { content: ""; top: 0; bottom: 0; width: 0.1190vw; background: #FFF; position: absolute; left: 1.1905vw;}
.com_header_nav .inner ul li a { display: block; font-size: 0.8929vw; color: #FFF; padding: 0.2976vw;}
.com_header_nav .inner ul li a:hover { background: rgba(0,0,0,0.2);}


/*下層ヘッダ*/
.com_header {}
.com_header .inner { width: 100%; padding: 3.8462vw 0; background: #54b535 url("../images/common/com_header_bg.png") center top no-repeat; position: relative;}
.com_header .inner .img { width: 52.9487vw; margin: 0 auto 1.9231vw;}
.com_header .inner p { font-size: 1.5385vw; text-align: center; color: #FFF;}
	.com_header .inner .btn{
		width: fit-content;
        margin: 0 auto;
        margin-top: 40px;
	}
	.com_header .inner .img01 {
	width: fit-content;
	margin: 0 auto;
	z-index: 1;
	position: relative;
}
/*コンテンツ
-------------------------------*/


.bg01 { background: #1ccadb; position: relative;}
.bg02 { background: #1ccadb; position: relative;}
.bg03 { position: relative;}
	
	.bg-kikan{
		background: url("../images/kikangentei/bg-kikangentei.png") repeat-y;
		padding: 90px 0;
	}
	.cont-toilet .wrap,.cont-kitchen .wrap{
		padding: 90px 0;
		margin: 0 auto;
	}
		.yellow-inner{
		background-color: #fff;
        border: 10px solid #f8d224;
        max-width: 1200px;
        margin: 0 auto;
		padding: 50px 95px;
			border-radius: 20px;
	}
	.yellow-inner .img img{
		width: fit-content;
        margin: 0 auto;
	}
	    .bg01::before,.bg02::before,.bg03::before {
        content: "";
        background: url(../images/index/after-neko.png) no-repeat;
        position: absolute;
        left: 0;
        top: 210px;
        width: 540px;
        height: 200px;
        z-index: 10;
    }
	.bg01::after,.bg02::after,.bg03::after {
        content: "";
        background: url(../images/index/after-neko.png) no-repeat;
        position: absolute;
        right: 0;
        top: 50px;
        width: 540px;
        height: 200px;
        z-index: 10;
    }
		.ttl-menu{
		width: fit-content;
		margin: 0 auto;
        padding-bottom: 3em;
	}

	
.content {}
.content .inner { display: flex; flex-direction: column; padding: 4.4872vw 0 7.6923vw;}
.content .inner h2 {}
.content .inner h2 .img { width: 39.7436vw; margin: 0 auto 5.1282vw;position: relative;z-index: 20;}
.content .inner .box { width: 77.3810vw; margin: 2.9762vw auto 0; display: flex; justify-content: space-between;}
.content .inner .box:nth-of-type(1) { margin-top: 0;}
.content .inner .box a { width: 37.7976vw; display: block; background: #FFF; padding: 0 2.9762vw 2.9762vw 3.0952vw; border-radius: 2.3810vw;border: 1px solid;}
.content .inner .box a:only-child { width: 100%; display: flex; align-items: flex-start; gap: 2.4405vw; /*filter: drop-shadow( 0.1786vw 0.2976vw 0.5952vw rgba( 0,0,0,0.27));*/border: 1px solid;}
.content .inner .box a:hover { transform: scale(102%);}
.content .inner .box a img:only-child {}
.content .inner .box a img:nth-of-type(1) { width: 35.8929vw;}
.content .inner .box a img:nth-of-type(2) { width: 32.9762vw; margin-top: 5.9524vw;}
.content .inner .box.otoku { position: relative;}
.content .inner .box.otoku::before { content: ""; background: url("../images/index/icon_otoku.png"); background-size: cover; width: 7.2619vw; height: 7.2619vw; position: absolute; top: 1.7857vw; right: 0.5952vw; z-index: 10; transition: ease .5s;}
.content .inner .box.otoku:hover::before { content: ""; background: url("../images/index/icon_otoku.png"); background-size: cover; width: 7.2619vw; height: 7.2619vw; position: absolute; top: 1.6667vw; right: 0.0000vw; z-index: 10; transform: scale(102%); transition: ease .5s;}



.c-box--line { padding: 1.7857vw; max-width: 38.0952vw; width: 100%; background: #fff;}
.c-box--line .-box1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.c-box--line .-box1 > div { width: 11.9048vw;}
.c-box--line .-box1 > p { padding-left: 1.1905vw; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}
.c-box--line .-box1 > p strong { font-size: 1.2em;}
.c-box--line .-box2 { border-radius: 0.5952vw; background: #00b900; padding: 0.5952vw; margin: 1.1905vw 0;}
.c-box--line .-box2 p { text-align: center; color: #fff;}
.c-box--line .-box3 { text-align: center; margin-bottom: 1.1905vw;}
.c-box--line .-box3 a { display: block; width: 14.1667vw; margin: auto;}
.c-box--line .-box4 { padding: 1.1905vw; background: #efefef;}
.c-box--line .-box4 ul li + li { margin-top: 0.5952vw;}

	.cont-flex .flex{
		display: flex;
	}
	.cont-flex .flex a{
		padding: 0px 15px;
	}
	.cont-flex .flex img{ 
		width: fit-content;
	}
	.cont-flex .flex a { display: block; background: #FFF; padding: 0 20px 30px 20px; border-radius: 10px;border: 1px solid;margin: 40px 15px;}
	.cont-flex .flex a:hover { transform: scale(102%);}

}



/*sp*/
@media only screen and (max-width: 767px) {
.loop-area .short {
width: 450px;
}
.loop-area .long {
width: 490px;
}
.loop-area .content, .loop-area-re .content {
	font-size: 22px;
}

.pc { display: none;}
.pcBr { display: none;}
.sp { display: block;}
.spBr { display: inline-block;}

body { font-size: 4.0000vw; padding-bottom: 23.3333vw;}


header { background: var(--color-bg); border-top: solid 1.6000vw #313131;}
header .inner { width: 100%; height: 14.0000vw; padding: 0 6.1333vw 0 2.8000vw; display: flex; justify-content: space-between; align-items: center;}
header .inner .logo { width: 66.6667vw;}
header .inner .hamburger { width: 10.4000vw; height: 10.4000vw; padding: 0.5333vw; position: relative; z-index: 1000;}
header .inner .hamburger a { display: block; width: 100%; height: 100%; position: relative; text-align: center; align-content: flex-end; font-size: 2.1333vw; color: #006438; cursor: pointer;}
header .inner .hamburger a span { width: 9.3333vw; height: 0.8000vw; display: block; background: #47c900; position: absolute; transform-origin:50% 50%; transition: ease .5s;}
header .inner .hamburger a span:nth-of-type(1) { top: 0;}
header .inner .hamburger a span:nth-of-type(2) { top: 2.4000vw;}
header .inner .hamburger a span:nth-of-type(3) { top: 4.8000vw;}

header .inner .hamburger a.active span { transition: ease .5s;}
header .inner .hamburger a.active span:nth-of-type(1) { top: 2.6667vw; transform: rotate( 30deg);}
header .inner .hamburger a.active span:nth-of-type(2) { top: 2.4000vw; transform:translateX(-6.6667vw); opacity: 0;}
header .inner .hamburger a.active span:nth-of-type(3) { top: 2.6667vw; transform: rotate( -30deg);}


footer {}
footer { position: fixed; bottom: 0; left: 0; width: 100%; transform: translateY(100%); transition: transform 0.3s ease; z-index: 50;}
footer.is-show { transform: translateY(0);}
footer .inner { height: 15.2000vw; display: flex; justify-content: center; align-items: center; background: #212121;}
footer .inner p { font-size: 4.0000vw; color: #FFF; padding: 0 10.6667vw 0 5.3333vw; position: relative; white-space: nowrap;}
footer .inner p::after { content: ""; background: url(../images/footer/icon_arrow.png); background-size: cover; width: 3.4667vw; height: 2.5333vw; position: absolute; top: 0; bottom: 0; right: 4.0000vw; margin: auto;}
footer .inner ul { display: flex; justify-content: flex-end; align-items: center;}
footer .inner ul li { padding: 0 4.0000vw; border-left: solid 0.2667vw #FFF;}
footer .inner ul li a { display: block; width: 8.0000vw; height: 8.0000vw;}
footer .cp { width: 100%; height: 7.7333vw; background: #171717; font-size: 1.7333vw; color: #FFF; text-align: center; align-content: center;}


.kv {}
.kv .slider { margin-bottom: 6.6667vw;}





/*サイドメニュー*/
.side_link { display: none;}


.sp_menu { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); z-index: 900; transform: translateX(100%); transition: ease .5s;}
.sp_menu.active { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); z-index: 900; transform: translateX(0); transition: ease .5s;}
.sp_menu .inner { background: #FFF; width: 66.6667vw; margin-left: auto; padding: 16.0000vw 0 0;}
.sp_menu .inner ul {}
.sp_menu .inner ul li {}
.sp_menu .inner ul li a { display: block; padding: 2.6667vw 2.6667vw 2.6667vw 5.3333vw; border-top: solid 1px #333333; color: #000; font-size: 4.0000vw; position: relative;}
.sp_menu .inner ul li a::after { content: "→"; position: absolute; right: 2.6667vw; top: 0; bottom: 0; align-content: center;}
.sp_menu .inner ul:nth-of-type(2) {}
.sp_menu .inner ul:nth-of-type(2) li a { background: #DDD;}


/*準備中*/
.preparation { width: 100%; height: auto; display: flex; justify-content: center; align-items: center; padding: 13.3333vw 0;}
.preparation .txt { text-align: center; padding: 6.6667vw 13.3333vw; border: solid 0.2667vw #CCC;}
.preparation .txt h3 { font-size: 4.0000vw; margin-bottom: 4.0000vw;}

.preparation .txt p { font-size: 2.6667vw;}


/*トップへ*/
#page-top { position: fixed; bottom: 26.6667vw; right: 5.3333vw; z-index: 200;}
#page-top a { text-decoration: none; color: #FFF; background: #000; width: 13.3333vw; height: 13.3333vw; display: block; text-align: center; align-content: center; transition: all .3s ease; position: relative; cursor: pointer;}
#page-top a::before { content: ""; display: block; width: 4.0000vw; height: 4.0000vw; border-left: solid 0.2667vw #FFF; border-top: solid 0.2667vw #FFF; transform: rotate(45deg); position: absolute; top: 4.2667vw; left: 0; right: 0; margin: auto;}
#page-top a span { font-size: 2.6667vw; position: absolute; top: 6.4000vw; left: 0; right: 0; margin: auto;}
#page-top a:hover { opacity: .5;}
#page-top a:hover img { transform: scale(1);}


/*下層
-------------------------------*/

/*下層メニュー*/
.com_header_nav { display: none;}
.com_header_nav .inner { background: #0e8d2f; padding: 2.6667vw 6.6667vw;}
.com_header_nav .inner ul { display: flex; justify-content: flex-end;}
.com_header_nav .inner ul li { padding-left: 5.3333vw; position: relative;}
.com_header_nav .inner ul li:nth-child(n+2)::before { content: ""; top: 0; bottom: 0; width: 0.2667vw; background: #FFF; position: absolute; left: 2.6667vw;}
.com_header_nav .inner ul li a { display: block; font-size: 2.0000vw; color: #FFF; padding: 0.6667vw;}
.com_header_nav .inner ul li a:hover { background: rgba(0,0,0,0.2);}


/*下層ヘッダ*/
.com_header {}
.com_header .inner { width: 100%; padding: 8.0000vw 0; background: #54b535 url("../images/common/com_header_bg.png") center top no-repeat; position: relative;}
.com_header .inner .img { width: 80.0000vw; margin: 0 auto 4.0000vw;}
.com_header .inner p { font-size: 4.2667vw; text-align: center; color: #FFF;}
	.com_header .inner .btn{
		width: fit-content;
        margin: 0 auto;
        margin-top: 40px;
	}

/*コンテンツ
-------------------------------*/


.content {}
.content .inner { display: flex; flex-direction: column; padding: 0 0 24.0000vw;}
.content .inner h2 { width: 69.3333vw; margin: 6.6667vw auto 0;        margin-bottom: 2em;}
.content .inner h2 .img { width: 100%;}
.content .inner .box { width: 86.6667vw; margin: 6.6667vw auto 0; display: flex; justify-content: space-between; flex-direction: column;}
.content .inner .box:nth-of-type(1) { margin-top: 0;}
.content .inner .box a { width: 100% !important; display: block; background: #FFF; padding: 0 4.0000vw 6.6667vw 4.2667vw; border-radius: 5.3333vw; margin-top: 6.6667vw; /*filter: drop-shadow( 0.4000vw 0.6667vw 1.3333vw rgba( 0,0,0,0.27));*/border: 1px solid;}
.content .inner .box a:nth-of-type(1) { margin-top: 0;}
.content .inner .box a:only-child { width: 100%; display: flex; align-items: flex-start; gap: 5.4667vw; flex-direction: column;}
.content .inner .box a:hover { transform: scale(102%);}
.content .inner .box a img:only-child {}
.content .inner .box a img:nth-of-type(1) { width: 80.4000vw;}
.content .inner .box a img:nth-of-type(2) { width: 73.8667vw; margin: 4.0000vw auto 0;}
.content .inner .box.otoku { position: relative;}
.content .inner .box.otoku::before { content: ""; background: url("../images/index/icon_otoku.png"); background-size: cover; width: 16.2667vw; height: 16.2667vw; position: absolute; top: 48.0000vw; right: 1.3333vw; z-index: 10; transition: ease .5s;}
.content .inner .box.otoku:hover::before { content: ""; background: url("../images/index/icon_otoku.png"); background-size: cover; width: 16.2667vw; height: 16.2667vw; position: absolute; top: 3.7333vw; right: 0.0000vw; z-index: 10; transform: scale(102%); transition: ease .5s;}



.c-box--line { padding: 4.0000vw; max-width: 85.3333vw; width: 100%; background: #fff;}
.c-box--line .-box1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.c-box--line .-box1 > div { width: 26.6667vw;}
.c-box--line .-box1 > p { padding-left: 2.6667vw; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}
.c-box--line .-box1 > p strong { font-size: 1.2em;}
.c-box--line .-box2 { border-radius: 1.3333vw; background: #00b900; padding: 1.3333vw; margin: 2.6667vw 0;}
.c-box--line .-box2 p { text-align: center; color: #fff;}
.c-box--line .-box3 { text-align: center; margin-bottom: 2.6667vw;}
.c-box--line .-box3 a { display: block; width: 31.7333vw; margin: auto;}
.c-box--line .-box4 { padding: 2.6667vw; background: #efefef;}
.c-box--line .-box4 ul li + li { margin-top: 1.3333vw;}
#cboxContent { padding: 0 !important;}



}




/*sp*/
@media only screen and (width: 750px) {


.pc { display: none;}
.pcBr { display: none;}
.sp { display: block;}
.spBr { display: inline-block;}

body { font-size: 30px; padding-bottom: 100px;}


header { background: var(--color-bg); border-top: solid 12px #313131;}
header .inner { width: 100%; height: 105px; padding: 0 46px 0 21px; display: flex; justify-content: space-between; align-items: center;}
header .inner .logo { width: 500px;}
header .inner .hamburger { width: 78px; height: 78px; padding: 4px; position: relative; z-index: 1000;}
header .inner .hamburger a { display: block; width: 100%; height: 100%; position: relative; text-align: center; align-content: flex-end; font-size: 16px; color: #006438; cursor: pointer;}
header .inner .hamburger a span { width: 70px; height: 6px; display: block; background: #47c900; position: absolute; transform-origin:50% 50%; transition: ease .5s;}
header .inner .hamburger a span:nth-of-type(1) { top: 0;}
header .inner .hamburger a span:nth-of-type(2) { top: 18px;}
header .inner .hamburger a span:nth-of-type(3) { top: 36px;}

header .inner .hamburger a.active span { transition: ease .5s;}
header .inner .hamburger a.active span:nth-of-type(1) { top: 20px; transform: rotate( 30deg);}
header .inner .hamburger a.active span:nth-of-type(2) { top: 18px; transform:translateX(-50px); opacity: 0;}
header .inner .hamburger a.active span:nth-of-type(3) { top: 20px; transform: rotate( -30deg);}


footer {}
footer { position: fixed; bottom: 0; left: 0; width: 100%; transform: translateY(100%); transition: transform 0.3s ease; z-index: 50;}
footer.is-show { transform: translateY(0);}
footer .inner { height: 114px; display: flex; justify-content: center; align-items: center; background: #212121;}
footer .inner p { font-size: 30px; color: #FFF; padding: 0 80px 0 40px; position: relative; white-space: nowrap;}
footer .inner p::after { content: ""; background: url(../images/footer/icon_arrow.png); background-size: cover; width: 26px; height: 19px; position: absolute; top: 0; bottom: 0; right: 30px; margin: auto;}
footer .inner ul { display: flex; justify-content: flex-end; align-items: center;}
footer .inner ul li { padding: 0 30px; border-left: solid 2px #FFF;}
footer .inner ul li a { display: block; width: 60px; height: 60px;}
footer .cp { width: 100%; height: 58px; background: #171717; font-size: 13px; color: #FFF; text-align: center; align-content: center;}


.kv {}
.kv .slider { margin-bottom: 50px;}





/*サイドメニュー*/
.side_link { display: none;}


.sp_menu { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); z-index: 900; transform: translateX(100%); transition: ease .5s;}
.sp_menu.active { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); z-index: 900; transform: translateX(0); transition: ease .5s;}
.sp_menu .inner { background: #FFF; width: 500px; margin-left: auto; padding: 120px 0 0;}
.sp_menu .inner ul {}
.sp_menu .inner ul li {}
.sp_menu .inner ul li a { display: block; padding: 20px 20px 20px 40px; border-top: solid 1px #333333; color: #000; font-size: 30px; position: relative;}
.sp_menu .inner ul li a::after { content: "→"; position: absolute; right: 20px; top: 0; bottom: 0; align-content: center;}
.sp_menu .inner ul:nth-of-type(2) {}
.sp_menu .inner ul:nth-of-type(2) li a { background: #DDD;}


/*準備中*/
.preparation { width: 100%; height: auto; display: flex; justify-content: center; align-items: center; padding: 100px 0;}
.preparation .txt { text-align: center; padding: 50px 100px; border: solid 2px #CCC;}
.preparation .txt h3 { font-size: 30px; margin-bottom: 30px;}
.preparation .txt p { font-size: 20px;}


/*トップへ*/
#page-top { position: fixed; bottom: 200px; right: 40px; z-index: 200;}
#page-top a { text-decoration: none; color: #FFF; background: #000; width: 100px; height: 100px; display: block; text-align: center; align-content: center; transition: all .3s ease; position: relative; cursor: pointer;}
#page-top a::before { content: ""; display: block; width: 30px; height: 30px; border-left: solid 2px #FFF; border-top: solid 2px #FFF; transform: rotate(45deg); position: absolute; top: 32px; left: 0; right: 0; margin: auto;}
#page-top a span { font-size: 20px; position: absolute; top: 48px; left: 0; right: 0; margin: auto;}
#page-top a:hover { opacity: .5;}
#page-top a:hover img { transform: scale(1);}


/*下層
-------------------------------*/

/*下層メニュー*/
.com_header_nav { display: none;}
.com_header_nav .inner { background: #0e8d2f; padding: 20px 50px;}
.com_header_nav .inner ul { display: flex; justify-content: flex-end;}
.com_header_nav .inner ul li { padding-left: 40px; position: relative;}
.com_header_nav .inner ul li:nth-child(n+2)::before { content: ""; top: 0; bottom: 0; width: 2px; background: #FFF; position: absolute; left: 20px;}
.com_header_nav .inner ul li a { display: block; font-size: 15px; color: #FFF; padding: 5px;}
.com_header_nav .inner ul li a:hover { background: rgba(0,0,0,0.2);}


/*下層ヘッダ*/
.com_header {}
.com_header .inner { width: 100%; padding: 60px 0; background: #54b535 url("../images/common/com_header_bg.png") center top no-repeat; position: relative;}
.com_header .inner .img { width: 600px; margin: 0 auto 30px;}
.com_header .inner p { font-size: 32px; text-align: center; color: #FFF;}


/*コンテンツ
-------------------------------*/


.content {}
.content .inner { display: flex; flex-direction: column; padding: 0 0 180px;}
.content .inner h2 { width: 520px; margin: 50px auto 0;        margin-bottom: 2em;}
.content .inner h2 .img { width: 100%;}
.content .inner .box { width: 650px; margin: 50px auto 0; display: flex; justify-content: space-between; flex-direction: column;}
.content .inner .box:nth-of-type(1) { margin-top: 0;}
.content .inner .box a { width: 100% !important; display: block; background: #FFF; padding: 0 30px 50px 32px; border-radius: 40px; margin-top: 50px; /*filter: drop-shadow( 3px 5px 10px rgba( 0,0,0,0.27));*/border: 1px solid;}
.content .inner .box a:nth-of-type(1) { margin-top: 0;}
.content .inner .box a:only-child { width: 100%; display: flex; align-items: flex-start; gap: 41px; flex-direction: column;}
.content .inner .box a:hover { transform: scale(102%);}
.content .inner .box a img:only-child {}
.content .inner .box a img:nth-of-type(1) { width: 603px;}
.content .inner .box a img:nth-of-type(2) { width: 554px; margin: 30px auto 0;}
.content .inner .box.otoku { position: relative;}
.content .inner .box.otoku::before { content: ""; background: url("../images/index/icon_otoku.png"); background-size: cover; width: 122px; height: 122px; position: absolute; top: 360px; right: 10px; z-index: 10; transition: ease .5s;}
.content .inner .box.otoku:hover::before { content: ""; background: url("../images/index/icon_otoku.png"); background-size: cover; width: 122px; height: 122px; position: absolute; top: 28px; right: 0px; z-index: 10; transform: scale(102%); transition: ease .5s;}



.c-box--line { padding: 30px; max-width: 640px; width: 100%; background: #fff;}
.c-box--line .-box1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.c-box--line .-box1 > div { width: 200px;}
.c-box--line .-box1 > p { padding-left: 20px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}
.c-box--line .-box1 > p strong { font-size: 1.2em;}
.c-box--line .-box2 { border-radius: 10px; background: #00b900; padding: 10px; margin: 20px 0;}
.c-box--line .-box2 p { text-align: center; color: #fff;}
.c-box--line .-box3 { text-align: center; margin-bottom: 20px;}
.c-box--line .-box3 a { display: block; width: 238px; margin: auto;}
.c-box--line .-box4 { padding: 20px; background: #efefef;}
.c-box--line .-box4 ul li + li { margin-top: 10px;}
#cboxContent { padding: 0 !important;}



}