@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  一般・共通設定
 ================================================*/
/* html,bodyタグの設定 */
html, body{
    margin: 0;         /* 余白の削除 */
    padding: 0;        /* 余白の削除 */
    width:100%;
    height:100%;
}


/* ヘッダーの固定 */
div#header-fixed
{
    position: fixed;            /* ヘッダーの固定 */
    top: 0px;                   /* 位置(上0px) */
    left: 0px;                  /* 位置(右0px) */
    width: 100%;                /* 横幅100%　*/
    height: 70px;              /* 縦幅70px */
}
 
 
div#header-bk { 
	background-color:#444;     /* 背景色(黒) */
	padding:10px 0 5px;       /* 上10px、下20pxをあける */
	height:50px;              /* 縦の高さ50px */
	width:100%;                /* 横の幅を100% */
}
 
 
div#header { 

	height: 100%;              /* 縦の表示領域はheader-bkと同じ */
	width: 960px;              /* 横の幅960px */
	margin: auto;              /* 中央揃え */
}


/* フッターの固定 */
div#footer-fixed
{
    position: fixed;            /* フッターの固定 */
    bottom: 0px;                /* 位置(下0px) */
    left: 0px;                  /* 位置(左0px) */
    width: 100%;                /* 横幅100%　*/
    height: 140px;              /* 縦幅140px */
}
 
div#footer-bk
{
	background-color:#444;     /* 背景色(黒) */
	padding:10px 0 20px;       /* 上10px、下20pxをあける */
	height:20px;              /* 縦の高さ140px */
	width:100%x;                /* 横の幅を100% */
	margin: 100px 0px 0px 0px;              /* 中央揃え */
}
 
div#footer { 
	height: 100%;              /* 縦の表示領域はheader-bkと同じ */
	width: 960px;              /* 横の幅970px */
	margin: auto;              /* 中央揃え */
}


.scroll-area {
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-scroll-behavior: smooth;
  scroll-behavior: smooth;
  -webkit-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
  -webkit-scroll-snap-points-y: repeat(100%);
  scroll-snap-points-y: repeat(100%);
}
.box {
  width: 100%;
  height: 100vh;
  color: #000;
  font-size: 14px;
  display: flex;
  align-items: center; /* 縦方向中央揃え */
  justify-content: center; /* 横方向中央揃え */
  flex-direction: column;
}
.box__bg_black {
  background-color: #333;
}
.box__bg_gray {
  background-color: #ccc;
}
.box__bg_photo {
	background-image: url(../img/model01.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


p {
  margin: 0;
  padding: 0px;
  line-height: 18px;

}

p a{
	      filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
p a:hover{
	      filter:alpha(opacity=100);
    -moz-opacity: 1.00;
    opacity: 1.00;
}

/* コンセプト */
.concept {

	height: 100%;              /* 縦の表示領域はheader-bkと同じ */
	width: 950px;              /* 横の幅970px */
	margin: auto;              /* 中央揃え */
	display: block;
}
.concept_box {

	height: 100%;              /* 縦の表示領域はheader-bkと同じ */
	width: 950px;              /* 横の幅970px */
	margin: 100px 0px 0px 0px;              /* 中央揃え */
	display: block;
	float: left;
	color:#FFF;
	}


/* ボタン */
.square_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #FFF;
    border: dashed 1px #FFF;
    border-radius: 3px;
    transition: .4s;

	opacity: 0.5;  
}

.square_btn:hover {
    border-style: dotted;
    color: #679efd;
}




/* トップメニュー */
#menu ul{ 
margin: 0; 
padding: 0; 
list-style: none; 
float:right;
}
#menu li{ 
display: inline; 
padding: 0; 
margin: 0; 
float: left;
height: 50px;              /* 縦の高さ50px */
}
#menu li a{
	display: table-cell;
	border-left: 8px solid #C97556;
	background-color: #444444;
	padding: 5px 10px;
	text-decoration: none;
	color: #E1E2CF;
	width: 100px;
	margin: 1px 0px;
	text-align: left;
	font-size: 14px;
	height: 25px;              /* 縦の高さ50px */
	vertical-align: middle;
}
#menu li a:hover{
border-left: 8px solid #990033;
background-color: #474655;
}