@charset "UTF-8";


body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;  /* 背景カラー */
  z-index: 9999;  /* 一番手前に */
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値では非表示 */
  -webkit-transition: opacity .8s ease;  /* アニメーション時間は 0.8秒 */
 -ms- transition: opacity .8s ease;
 -moz- transition: opacity .8s ease;
  transition: opacity .8s ease;
}
 
 
/*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを１に設定します。*/
 
body.fadeout::after {
  opacity: 1;
}
 
 
/*お好みで、.fadeoutセレクタ以下の他の要素にもアニメーション用のCSSを定義します*/
/*DEMOではページ遷移時にarticle要素のスケールもアニメーションさせています*/
 
body.fadeout article{
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
}

.c-video{
  position: relative;
  width: 100%;
top:150px;
}

  .c-video__title{
    position: absolute;
    top: 80%;
    left: 20%;
    z-index: 10;
    transform: translate(-50%, -50%);
    padding: 30px;
    text-align: left;
    font-size: 15px;
    line-height: 1.6;
    white-space: nowrap;
    color: #fff;
    background: rgba(#000, .3);
    backdrop-filter: blur(3px);
  }

  .c-video__embed{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font-family: 'Work Sans', Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
  text-align: center;
  margin: 0 auto;
}
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  -webkit-transition: opacity .8s ease;
  transition: opacity .8s ease;
}
body.fadeout::after {
  opacity: 1;
}
body.fadeout article{
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
}
section {
    position: absolute;
    width: 100%;
    height: 100%;
    display: table;
    color: #464646;
    background-color: #fff;
    overflow: hidden;
	padding: 0 20px;
}

section.page.two {
  color: #fff;
  background-color: #1CBABC;
}
section.page.three {
  color: #fff;
  background-color: #CE5973;
}
article {
  display: table-cell;
  vertical-align: middle;
  -webkit-transition: transform .8s ease-out;
  transition: transform .8s ease-out;
}
article h1 {
  font-size: 60px;
  font-weight: normal;
  margin-bottom: 3vw;
}

p{
	color: #676767;
	  font-size: 14px;
 	 font-weight: normal;
	padding: 5px;
	  text-align: center;
	line-height: 1.3;
}

a{
	color: #676767;
    text-decoration: none;
}

a:hover{
	color: #804F21;
    text-decoration: underline;
}


article .navigate-anchor {
  display:inline-block;
  font-size: 22px;
  padding: 0 14px;
  text-decoration:none;
  color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.top30{
	margin-top: 30px;
	
}

article .navigate-anchor:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}


	
.flexbox {
  text-align: center;
  margin: 100px 20px 20px 20px;
} 

 .flexbox ul {
display: flex;
  flex-wrap: wrap; /* 要素を折り返す */
align-items: center;
	justify-content: center;
  gap: 20px;
  }

 .flexbox  li {
flex: 0 0 calc(18% - 10px); 
  text-align: center;
  }


 .flexbox li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
	 padding: 5px;
	 margin-bottom: 5px;
}

@media (max-width: 768px) {

 .flexbox  li {
flex: 0 0 calc(65% - 10px); 
  text-align: center;
  }
p{
 font-size: 14px;
}

}

@media screen and (max-width:801px){
 .flexbox  li {
flex: 0 0 calc(98% - 10px); 
  text-align: center;
  }
	p{
 font-size: 13px;
}
	}

.top30{
	margin-top: 30px;
}
	
.bottom30{
	margin-bottom: 30px;
}


.bottom100{
	margin-bottom:100px;
}


*{margin:0;padding:0;
	vertical-align:baseline;
	font-size:100%;
	font:inherit;
	border:0;
	outline:0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box}::before,::after{-webkit-box-sizing:border-box;
		box-sizing:border-box
}

main{display:block}

body{line-height:1}ol,ul{list-style:none}li{list-style-type:none}

blockquote,q{quotes:none}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0;empty-cells:show}

img{vertical-align:middle
}
iframe[name=google_conversion_frame]

{display:block;height:0}

@font-face
{
	font-family:"MyYuGothicM";
	font-weight:400;src:local("YuGothic-Medium"),
		local("Yu Gothic Medium"),
		local("YuGothic-Regular")}
@font-face{
	font-family:"MyYuGothicM";
	font-weight:700;
	src:local("YuGothic-Bold"),
		local("Yu Gothic")
}
html{min-height:100vh;
	-ms-touch-action:manipulation;touch-action:manipulation;text-rendering:optimizeSpeed
}
body{
	min-height:100vh;font-size:3.2vw;
	font-family:Hiragino Sans,MyYuGothicM,YuGothic,-apple-system,BlinkMacSystemFont,Avenir,"Open Sans","Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-weight:400;
	-webkit-font-feature-settings:"kern";
	font-feature-settings:"kern";
	-webkit-font-kerning:normal;
	font-kerning:normal;
	color:#000;
	background:#fff;
	word-wrap:break-word;word-wrap:break-word;
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing:subpixel-antialiased;-
	moz-osx-font-smoothing:unset;text-rendering:optimizeSpeed}
a{text-decoration:none;
	color:#676767;
	-webkit-transition:.3s cubic-bezier(.39,.575,.565,1);
	transition:.3s cubic-bezier(.39,.575,.565,1);
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:transparent}

a img{-webkit-transition:.3s cubic-bezier(.39,.575,.565,1);
	transition:.3s cubic-bezier(.39,.575,.565,1)}input,select,textarea,button{cursor:pointer;
		-webkit-appearance:none;-moz-appearance:none;
		appearance:none;
		font-weight:300;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;line-height:1;
		background:0 0;
		border:0;outline:0;
		border-radius:0;
		-webkit-transition:.3s cubic-bezier(.39,.575,.565,1);
		transition:.3s cubic-bezier(.39,.575,.565,1);
		-webkit-touch-callout:none;
		-webkit-tap-highlight-color:transparent;
		-webkit-font-smoothing:subpixel-antialiased;
		-moz-osx-font-smoothing:unset}input:placeholder-shown,
select:placeholder-shown,textarea:placeholder-shown,button:placeholder-shown{font-family:Hiragino Sans,MyYuGothicM,YuGothic,-apple-system,BlinkMacSystemFont,Avenir,"Open Sans","Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}input::-webkit-input-placeholder,select::-webkit-input-placeholder,textarea::-webkit-input-placeholder,button::-webkit-input-placeholder{font-family:Hiragino Sans,MyYuGothicM,YuGothic,-apple-system,BlinkMacSystemFont,Avenir,"Open Sans","Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}input:-moz-placeholder,select:-moz-placeholder,textarea:-moz-placeholder,button:-moz-placeholder{opacity:1;font-family:Hiragino Sans,MyYuGothicM,YuGothic,-apple-system,BlinkMacSystemFont,Avenir,"Open Sans","Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}input::-moz-placeholder,select::-moz-placeholder,textarea::-moz-placeholder,button::-moz-placeholder{opacity:1;font-family:Hiragino Sans,MyYuGothicM,YuGothic,-apple-system,BlinkMacSystemFont,Avenir,"Open Sans","Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}input:-ms-input-placeholder,select:-ms-input-placeholder,textarea:-ms-input-placeholder,button:-ms-input-placeholder{font-family:Hiragino Sans,MyYuGothicM,YuGothic,-apple-system,BlinkMacSystemFont,Avenir,"Open Sans","Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}input:disabled,select:disabled,textarea:disabled,button:disabled{cursor:default}input,select,textarea{line-height:1.6}select::-ms-expand{display:none}img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100%;height:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden}picture{display:block;max-width:100%;height:auto}svg{overflow:visible;position:absolute;top:0;left:0;display:block;width:100%;height:100%;transform-box:fill-box}svg path,svg rect,svg circle,svg polygon{transform-box:fill-box;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.l-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;height:60px;text-align:center;color:#fff;background:#000}.l-header__title{font-size:4vw}.l-footer{padding:60px;text-align:center;color:#fff;background:#000}.l-footer__nav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.l-footer__nav a{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:15px;margin-left:15px;color:currentColor}
.l-footer__nav .current{
	padding:3px;
	color:#000;
	background:#fff
}
.l-footer__back{
	margin-top:60px;
	display:inline-block;
	letter-spacing:.09em;color:currentColor
}
.c-video{
	position:relative;
	width:100%
}
.c-video__title{
	position:absolute;
	top:90%;
	left:90%;
	z-index:10;	
	text-align:center;
	padding:10px;
	font-size:1.8vw;
	font-weight:200;
	line-height:1.2;
	white-space:nowrap;
	color:#fff;
	background:rgba(0,0,0,.3);
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%)
}
.c-video__embed{display:block;
		width:100%;
		height:100%;
		-o-object-fit:cover;
		object-fit:cover
}
.c-video__frame{
	overflow:hidden;
	position:relative;
	width:100%;
	height:0;
	padding-top:56.25%;
	background:#000
}
.c-video__frame--vimeo{
	overflow:hidden;
	position:relative;
	height:56.25vw;
	background:#000
}
.c-video__frame--vimeo.is-loaded iframe{
	opacity:1;visibility:visible
}
.c-video__frame.is-loaded iframe{
	opacity:1;visibility:visible
}
.c-video iframe{
	pointer-events:none;opacity:0;
	visibility:hidden;
	position:absolute;
	top:-60px;
	left:0;
	width:100%;
	height:calc(100% + 120px);
	-webkit-transition:.3s cubic-bezier(.39,.575,.565,1);
	transition:.3s cubic-bezier(.39,.575,.565,1);
	-webkit-transition-property:opacity,visibility;
	transition-property:opacity,visibility
}
.u-noscroll{
	overflow:hidden;height:100%
}
.u-overflowHidden{
		overflow:hidden
}
.u-noevent{pointer-events:none
}
.u-exSp{
	display:none
}
.u-preload *{
	-webkit-transition:none!important;transition:none!important}
.u-preline{
	white-space:pre-line
}
@media screen and (min-width:801px)
{
	body{
	font-size:.83333vw
	}a[href^=tel]{
		pointer-events:none;
		cursor:default}
	.l-header__title{
		font-size:1.25vw
	}

	.c-video__title{
		font-size:3.125vw;
		font-weight:100}
	.u-frame{
		max-width:calc(100% - 13.88889vw);
		margin-right:auto;
		margin-left:auto}.u-exSp{display:block}.u-sp{display:none}
	
	section {
    position: absolute;
    width: 100%;
    height: auto;
	padding: 0 20px;
}
	.c-video{
  position: relative;
  width: 100%;
	top:150px;
}

}


@media screen and (min-width:1440px){
			body
			{
				font-size:12px
			}
			.l-header__title{
				font-size:18px}
			.c-video__title{
				font-size:45px}
			.u-frame{max-width:1240px}

	
	section {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    top: 4px;
    left: 0px;
}
	
	.c-video{
  position: relative;
  width: 100%;
}

}
@media only screen and (-webkit-min-device-pixel-ratio:2),
	(-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx)
{
	body{
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale}input,select,textarea,button
	{
		-webkit-font-smoothing:antialiased;
			-moz-osx-font-smoothing:grayscale}}
@media screen\0 {
	body{
	font-family:"Segoe UI",Meiryo,sans-serif}
	input,select,textarea,button{font-family:"Segoe UI",Meiryo,sans-serif}}
@media (any-hover:hover){
		.l-footer__nav a:hover{text-decoration:underline}.l-footer__back:hover{text-decoration:underline}

}