@charset "utf-8";
/*************************************
* ローディング画面
*************************************/
/*ローディング画面*/
html{
	overflow-y:scroll;
}
/* ローディングの背景部分のCSS */
.loader{
	background-color: #000;
	height:100%;
	left:0;
	position:fixed;
	top:0;
	width:100%;
	z-index:1005;
	animation-name:loadinganm;
	animation-duration:1.5s;
	animation-delay: 2s;
	animation-fill-mode:forwards;
	transform-origin: center bottom;
	transform: scaleX(1);
	opacity: 1;
}
@keyframes loadinganm{
  from {
	  opacity: 1
  }

  to {
	  opacity: 0;
	  display: none
}
}
.loarder-logo { width: 80px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) }

@keyframes zoomin{
  from {
	transform: scale(1.2);
  }

  to {
	transform: scale(1);  
  }
}


/*スクロールアニメーション*/
@-webkit-keyframes sdb2 {
  0% {
    transform: translate(0, -60px);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 300px) scaleY(0.3);
  }
}
@-ms-keyframes sdb2 {
  0% {
    transform: translate(0, -60px);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 300px) scaleY(0.3);
  }
}
@-moz-keyframes sdb2 {
  0% {
    transform: translate(0, -60px);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 300px) scaleY(0.3);
  }
}
@keyframes sdb2 {
  0% {
    transform: translate(0, -60px);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 300px) scaleY(0.3);
  }
}


/*==================================================
シャッ
===================================*/

/*背景色が伸びて出現 共通*/
.bgextend{
animation-name:bgextendAnimeBase;
animation-duration:0.5s;
animation-delay: 0.7s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden;/*　はみ出た色要素を隠す　*/
opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}
@-webkit-keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
animation-name:bgextendAnimeSecond;
animation-duration:0.5s;
animation-delay: 0.7s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes bgextendAnimeSecond{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes bgextendAnimeSecond{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/*--------- 左から --------*/
.bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;/*伸びる背景色の設定*/
    transform:scaleX(0);
    transform-origin:left;
    opacity: 0
}
@keyframes bgLRextendAnime{
0% {
transform-origin:left;
transform:scaleX(0);
opacity: 0
}
20% {
transform-origin:left;
transform:scaleX(1);
opacity: 1
}
55% {
transform-origin:right;
transform:scaleX(1);
opacity: 1
}
60% {
transform-origin:right;
transform:scaleX(1);
opacity: 1
}
100% {
transform-origin:right;
transform:scaleX(0);
opacity: 0
}
}
@-webkit-keyframes bgLRextendAnime{
0% {
transform-origin:left;
transform:scaleX(0);
opacity: 0
}
20% {
transform-origin:left;
transform:scaleX(1);
opacity: 1
}
55% {
transform-origin:right;
transform:scaleX(1);
opacity: 1
}
60% {
transform-origin:right;
transform:scaleX(1);
opacity: 1
}
100% {
transform-origin:right;
transform:scaleX(0);
opacity: 0
}
}


@media screen and (min-width: 801px) ,print {
/*************************************
* 共通
*************************************/
main { display: block }
.small { font-size: 12px }
.area-c-pc { text-align: center }
/*デザインによって数値を設定*/
.content-inner { width: 70%; margin: auto; padding: 0; max-width: 1000px; height: 100%;  position: relative; z-index: 1 }
.detail-inner { margin: auto; padding: 0; width: 95%; height: 100%; }
section,article { padding-top: 6rem;  display: block; }
section:last-child,article:last-child { padding-bottom: 6rem; }
/*電話番号タグに追加（PCのときはリンクボタン機能なし）*/
.tel { pointer-events: none; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; color: #000 }
/*PCのみ非表示*/
.dsp-no-pc { display: none !important; }
/*ぱんくず*/
#breadcrumbs { padding: 5px 0 5px 0; text-align: right; font-size: 0.8rem; font-family: DNPShueiMinPr6-L, serif; }
#breadcrumbs .content-inner * { display: inline-block; } 
#breadcrumbs a, #breadcrumbs a:visited { color: #000 }
/*************************************
* スクロールでフェードイン
*************************************/
/*左から出現*/
.effect-l-pc {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  opacity: 0;
  transform: translateX(-50px);
}
/*右から出現*/
.effect-r-pc {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  opacity: 0;
  transform: translateX(50px);
}
/*下から出現*/
.effect-u-pc {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  opacity: 0;
  transform: translateY(60px);
}
/*ただの出現*/
.effect-o-pc {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  opacity: 0;
}
/*フェードインの実行*/
.fadein {
	opacity: 1;
	transform: translateX(0px) !important;
}
/*************************************
* 見出し
*************************************/
.h2-01 { font-size: 1.3rem; line-height: 2.3rem; margin-bottom: 1rem; font-weight: 700; letter-spacing: 0.1rem }
.h2-02 { font-size: 2rem; line-height: 3.5rem; margin-bottom: 2rem; font-weight: 700; letter-spacing: 0.1rem }
.h3-01 { margin-bottom: 0.5rem; text-align: justify }
/*************************************
* テーブル
*************************************/

/*************************************
* リスト
*************************************/
ul.list-01, ul.list-01 li { list-style: none; } 
ul.list-01 li { padding-left: 1.2em; text-indent: -1.2em; }
ul.list-01 li:before {
	font-family: 'Font Awesome 5 Free';
	content: '\f111';
	color: #ddd;
	margin-right: 0.3em;
	font-weight: bold;
}
/*************************************
* ボタン
*************************************/
.btn-01 { font-family: "Noto Sans JP", sans-serif; text-decoration: underline }
.btn-02 { font-family: "Noto Sans JP", sans-serif; background-color: #000; color: #fff; font-weight: 700; border-radius: 30px; padding: 5px; display: block; text-align: center; margin-top: 1rem }
/*************************************
* header
*************************************/
body#home .h-logo {
	position: fixed;
	left: 40px;
	top: 30px;
	width: 130px;
	z-index: 1000;
	transform-origin: left top
}
body#home #header-top.smaller .h-logo {
	transform-origin: left top;
	transform: scale(0.6)
}
body#home nav a {
	display: inline-block;
	background-color: #2e005a;
	color: #fff;
	padding: 5px 30px;
	border-radius: 30px;
	font-size: 14px;
	text-decoration: underline;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
	font-family: "Noto Sans JP", sans-serif;
}

body#noto .h-logo {
	position: fixed;
	left: 40px;
	top: 30px;
	width: 90px;
	z-index: 1000;
}
body#noto nav a {
	display: inline-block;
	background-color: #000;
	color: #fff;
	padding: 5px 30px;
	border-radius: 30px;
	font-size: 14px;
	text-decoration: underline;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
	font-family: "Noto Sans JP", sans-serif;
}
/*************************************
* footer
*************************************/
footer { text-align: center; padding: 6rem 0 6rem 0 }
.f-logo { width: 60px; margin: 0 auto 2rem auto }
.f-01 { padding: 3rem 0 3rem 0; }
.f-01 p { text-align: center }
.f-02 {  padding: 3rem 0 3rem 0; border-top: 1px solid #ddd; }
.f-03 {  padding: 3rem 0 3rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.copy { text-align: center; padding-top: 6rem; font-size: 12px; }
/*************************************
* home
*************************************/
body#home { background-color: #e4e4e4 }
section#c-home-00 { padding: 0 !important }
.c-main-img {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden
}
.c-main-img:after {
	content: " ";
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../img/c-main-01.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: scale(1.2);
	left: 0;
	top: 0;
	animation-name:zoomin;
	animation-duration:5s;
	animation-delay: 1s;
	animation-fill-mode:forwards;
}
/*スクロールバー*/
.top-main-scroll-00 {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 100;
	width: 1px;
	height: 200px;
}
.top-main-scroll-00 p { color: #fff; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 12px }
.scroll {
    bottom: 0;
    height: 200px;
    position: absolute;
    width: 1px;
    overflow: hidden;
    background-color: rgba(255,255,255,0.3);
}
.scroll-wheel {
    animation: sdb2 3s ease-in-out infinite;
    background-color: #fff;
    height: 60px;
    position: absolute;
    width: 1px;
    top: -40px;
}
.scroll::before {
    background-color: rgba(255,255,255,0.3);
    content: " ";
    display: block;
    height: 200px;
    top: 0;
    position: absolute;
    width: 1px;
    left: 50%;
}

.kaitori-point { display: flex; justify-content: space-between }
.kaitori-point-detail { width: 30%; margin-top: 2rem }
.kaitori-point-detail .img { margin-bottom: 1rem }

.c-product-inner .txt { max-width: 600px; margin: 0 auto 1rem auto }
.map-detail { display: flex; justify-content: space-between }
.map-detail > * { width: 48% }
.kaitori-jirei { font-size: 0; text-align: center }
.kaitori-jirei > * {
	display: inline-block;
	vertical-align: top;
	width: 30.333%;
	margin-right: 4.5%;
	font-size: 1rem;
	margin-bottom: 2rem;
}
.kaitori-jirei > *:nth-child(3n) { margin-right: 0 }
.kaitori-jirei .h3-01 { text-align: center !important }
.bnr-area { text-align: center; max-width: 500px; margin: auto }
.bnr-area .h3-01 { text-align: center !important }

/*************************************
* 能登home
*************************************/
.home-main {
	display: flex;
	justify-content: space-between;
	align-items: flex-end
}
.home-main .txt { width: 35%; padding-left: 18%; text-align: justify }
.slider { width: 43%; }
.slider p {
	height: 400px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.product-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.product-inner .txt {
	width: 35%;
	padding-right: 10%;
	order: 2;
}
.product-inner .loopslider { width: 50%; order: 1; }
.jouken-inner { display: flex; justify-content: space-between }
.jouken-detail { width: 30%; text-align: justify }
.jouken-detail p { font-size: 14px; line-height: 28px }

section#home-03,section#c-home-04 {
	background-color: #FFF8E3;
	margin-top: 6rem
}
.contact-inner {
	display: flex;
	justify-content: space-between;
}
.contact-inner .txt {
	width: 50%;
	text-align: justify
}
.contact-inner .img {
	width: 45%;
}
ul.list-flow { text-align: center }
ul.list-flow li {
	background-color: #54BC37;
	color: #FFF500;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	padding: 7px;
	display: block;
	position: relative;
	border-radius: 40px;
	margin-bottom: 20px
}
ul.list-flow li:after {
	content: " ";
	height: 20px;
	width: 100%;
	border-left: 3px solid #54BC37;
	position: absolute;
	left: 50%;
	bottom: -20px;
}
ul.list-flow li:last-child:after { display: none }








}



@media screen and (max-width: 800px) {
/*************************************
* 共通
*************************************/
body { font-size: 12px; line-height: 24px; }
main { display: block; }
.small { font-size: 10px }
.area-c-sp { text-align: center !important }
/*デザインによって数値を設定*/
body#home .content-inner { width: 90%; margin: auto; padding: 0; max-width: 500px; height: 100%; }
body#noto .content-inner { width: 65%; margin: 0 10% 0 25%; padding: 0; max-width: 500px; height: 100%; }
.detail-inner { margin: auto; padding: 0; width: 80%; height: 100%; }
section,article { padding-top: 4rem;  display: block; }
section:last-child,article:last-child { padding-bottom: 4rem; }
/*電話番号タグに追加（PCのときはリンクボタン機能なし）*/
.tel { font-family: 'Roboto Condensed', sans-serif; font-weight: bold; }
/*PCのみ非表示*/
.dsp-no-sp { display: none !important; }
/*ぱんくず*/
#breadcrumbs { padding: 5px 0 5px 0; text-align: right; font-size: 11px; font-family: DNPShueiMinPr6-L, serif; }
#breadcrumbs .content-inner * { display: inline-block; } 
#breadcrumbs a, #breadcrumbs a:visited { color: #000 }
/*************************************
* スクロールでフェードイン
*************************************/
/*左から出現*/
.effect-l-sp {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  opacity: 0;
  transform: translateX(-50px);
}
/*右から出現*/
.effect-r-sp {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  opacity: 0;
  transform: translateX(50px);
}
/*下から出現*/
.effect-u-sp {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  opacity: 0;
  transform: translateY(30px);
}
/*ただの出現*/
.effect-o-sp {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  opacity: 0;
}
/*フェードインの実行*/
.fadein { opacity: 1; transform: translateX(0px); }
/*************************************
* 見出し
*************************************/
.h2-01 { font-size: 1.3rem; line-height: 2.3rem; margin-bottom: 1rem; font-weight: 700; letter-spacing: 0.1rem; text-align: justify }
.h2-02 { font-size: 1rem; margin-bottom: 1rem; font-weight: 700; letter-spacing: 0.1rem }
.h3-01 { font-size: 1rem; margin-bottom: 0.3rem; text-align: justify }
/*************************************
* テーブル
*************************************/

/*************************************
* リスト
*************************************/
ul.list-01, ul.list-01 li { list-style: none; } 
ul.list-01 li { padding-left: 1.2em; text-indent: -1.2em; }
ul.list-01 li:before {
	font-family: 'Font Awesome 5 Free';
	content: '\f111';
	color: #ddd;
	margin-right: 0.3em;
	font-weight: bold;
}
/*************************************
* ボタン
*************************************/
.btn-01 { font-family: "Noto Sans JP", sans-serif; text-decoration: underline }
.btn-02 { font-family: "Noto Sans JP", sans-serif; background-color: #000; color: #fff; font-weight: 700; border-radius: 30px; padding: 5px; display: block; text-align: center; margin-top: 1rem }
.btn-02:visited { color: #fff; }
/*************************************
* header
*************************************/
body#home .h-logo {
	position: absolute;
	left: 50%;
	top: 100px;
	width: 100px;
	transform: translateX(-50%);
	z-index: 1000;
}
body#home nav a {
	display: block;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	background-color: #2e005a;
	color: #fff;
	padding: 15px 0;
	font-size: 12px;
	line-height: 15px;
	text-decoration: underline;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	font-family: "Noto Sans JP", sans-serif;
	cursor: none;
}
body#home nav a:hover { opacity: 1 }

body#noto .h-logo {
	position: fixed;
	left: 10px;
	top: 60px;
	width: 50px;
	z-index: 1000;
}
body#noto nav a {
	text-align: center;
	display: block;
	width: 100%;
	box-sizing: border-box;
	background-color: #000;
	color: #fff;
	padding: 5px;
	font-size: 10px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	font-family: "Noto Sans JP", sans-serif;
}
/*************************************
* footer
*************************************/
footer { text-align: center; padding: 3rem 0 3rem 0 }
.f-logo { width: 60px; margin: 0 auto 2rem auto }
.f-01 { padding: 1rem 0 1rem 0; }
.f-01 p { text-align: center }
.f-02 {  padding: 1rem 0 1rem 0; border-top: 1px solid #ddd; }
.f-03 {  padding: 1rem 0 1rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.copy { text-align: center; padding-top: 3rem; font-size: 12px; }
/*************************************
* home
*************************************/
body#home { background-color: #fff }
section#c-home-00 { padding: 0 !important }
.c-main-img {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden
}
.c-main-img:after {
	content: " ";
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../img/c-main-01.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: scale(1.2);
	left: 0;
	top: 0;
	animation-name:zoomin;
	animation-duration:5s;
	animation-delay: 1s;
	animation-fill-mode:forwards;
}
/*スクロールバー*/
.top-main-scroll-00 {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 100;
	width: 1px;
	height: 200px;
}
.top-main-scroll-00 p { color: #fff; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 12px }
.scroll {
    bottom: 0;
    height: 200px;
    position: absolute;
    width: 1px;
    overflow: hidden;
    background-color: rgba(255,255,255,0.3);
}
.scroll-wheel {
    animation: sdb2 3s ease-in-out infinite;
    background-color: #fff;
    height: 60px;
    position: absolute;
    width: 1px;
    top: -40px;
}
.scroll::before {
    background-color: rgba(255,255,255,0.3);
    content: " ";
    display: block;
    height: 200px;
    top: 0;
    position: absolute;
    width: 1px;
    left: 50%;
}
.c-product-inner .txt { width: 90%; margin: 0 auto 1rem auto }
.c-product-inner .txt .h2-01 { text-align: center !important }
.map-detail .img { max-width: 250px; margin: 1rem auto 0 auto }
.kaitori-jirei { font-size: 0; text-align: center }
.kaitori-jirei > * {
	display: inline-block;
	vertical-align: top;
	width: 30.333%;
	margin-right: 4.5%;
	font-size: 1rem;
	margin-bottom: 2rem;
}
.kaitori-jirei > *:nth-child(3n) { margin-right: 0 }
.kaitori-jirei .h3-01 { text-align: center !important }
.bnr-area { text-align: center; max-width: 500px; margin: auto }
.bnr-area .h3-01 { text-align: center !important }

.kaitori-point {  }
.kaitori-point-detail {margin-bottom: 1rem }
.kaitori-point-detail .img { margin-bottom: 0.5rem }
/*************************************
* noto-home
*************************************/
.home-main {

}
.home-main .txt { text-align: justify; width: 60%; padding-left: 30% }
.slider { width: 100%; margin-top: 2rem }
.slider p {
	height: 300px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.product-inner {
	
}
.product-inner .txt {
	width: 65%; margin: 0 10% 0 25%; padding: 0; max-width: 500px; height: 100%;
}
.jouken-inner {  }
.jouken-detail { margin-bottom: 2rem }
.jouken-detail .img { margin-bottom: 0.7rem }
section#home-03,section#c-home-04 {
	background-color: #FFF8E3;
	margin-top: 3rem
}
.contact-inner {

}
.contact-inner .txt {
	text-align: justify
}
.contact-inner .img {
}
ul.list-flow { text-align: center }
ul.list-flow li {
	background-color: #54BC37;
	color: #FFF500;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	padding: 7px;
	display: block;
	position: relative;
	border-radius: 40px;
	margin-bottom: 20px
}
ul.list-flow li:after {
	content: " ";
	height: 20px;
	width: 100%;
	border-left: 3px solid #54BC37;
	position: absolute;
	left: 50%;
	bottom: -20px;
}
ul.list-flow li:last-child:after { display: none }









}