@charset "UTF-8";

body {
	background:#FFF;
	color: #231815;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-size:90%;
	margin: 0 auto;
}
a {  
  color: inherit;
text-decoration: none; 
}

figcaption{
	font-size: 1em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	margin: 0.3em 0 0;
}
.sp {
  display: none !important;
}

.pc {
  display: block !important;
}
#wrapper{
	/*overflow: hidden;*/
}

.cont{
	width: 960px;
	margin: 0 auto;
}

.absolute{
	position: absolute;
}
.relative{
	position: relative;
}
.mt-20{
	margin-top: -4rem;
}
#opening01{
	width: 100%;
}
/*#opening01-bg{
	width: 100%;
	height: auto;
}*/

/*#opening01-bg{
  position: relative;
  width:100%;
  height:100vh;
  background: url(../img/opening_01.jpg) no-repeat left top/cover;
  background-attachment:fixed;
}*/
#opening01-bg{
  position: relative;	
  width:100%;
  height:auto;
  min-height:100vh;
  background: url(../img/opening_01.jpg) no-repeat center top/cover;
  //background-attachment:fixed;
}


#opening01-bg h1{
	text-align: left;
	font-weight: normal;
	font-size: 3rem;
	line-height: 5rem;
	letter-spacing: 0.1rem;
	color: #fff;
	position: absolute;
	bottom: 3rem;
	left: 3rem;
}

#toplogo{
	position: absolute;
	top:10px;
	right: 0;
	width: 120px;
	opacity: 0.7;
}
#opening02{
	position: relative;
	text-align: right;
}
#opening02 h1{
	text-align: left;
	font-weight: normal;
	font-size: 3rem;
	line-height: 5rem;
	letter-spacing: 0.1rem;
	color: #fff;
	position: absolute;
	top: -16rem;
}
#opening_02_a{
	width: 70%;
	height: auto;
	/*margin: 20px 10px;*/
	margin: 2% 1%;
}
#opening_02_copy{
	text-align: left;
	background-color: #f7f2dd;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 3rem;
	padding: 0rem 2rem;
}
#opening_02_copy p{
	font-size: 1.3rem;
	line-height: 1.5rem;
	letter-spacing: 0.2rem;
	border-bottom: dotted 1px #918b8a;
	padding-bottom: 10px;
}
#opening03{
	position: relative;
	text-align: center;
}
#opening03 h2{
	font-size: 2.2rem;
	font-weight: normal;
	letter-spacing: 0.1em;
	margin: 3em 0;
}
#opening03 h3{
	font-size: 2rem;/*1.8rem;*/
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	margin: 4em 0;
}
#opening03_img{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
#opening03_img img{
	width: 33%;
	height: auto;
}
#koto{
	/*background: url(../img/main_bg.gif) 0 0 no-repeat;*/
	background: url(../img/koto_bg01.jpg) center center no-repeat;
	background-size: cover;
	text-align: center;
}

#koto h2{
	color: #231815;
	font-size: 6rem;
	letter-spacing: -0.5rem;
	line-height: 1em;
	padding: 2rem 0rem 0rem;
	margin-bottom: 0;
}

#koto h3{
	font-size: 1.1rem;
	line-height: 1.2em;
	font-weight: normal;
	letter-spacing: 0rem;
	color: #606060;
	margin-bottom: 5rem;
}
#koto h4{
	text-align: left;
	color: #231815;
	font-size: 2rem;
	font-weight: normal;
	letter-spacing: 0rem;/*-0.1rem;*/
	line-height: 1.2em;
	padding: 2rem 0rem 0rem;
	margin-bottom: 1rem;
	position: relative;
	left: 25%;	
}
.no-padding{
	padding: 0;
}
.no-margin{
	margin: 0;
}
.main-base{
	position: relative;
	margin-top: 3em;
}
.fillsub{
	font-size: 1.1rem;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-weight: normal;
	color: #fff;
	letter-spacing: 0.15em;
/*padding: 0.2em 1em;*/
padding: 0.6em 1em 0.5em;	
display: inline-block;
line-height: 1.3;
background: #555555;
vertical-align: middle;
border-radius: 25px;
}
#onayami{
	position: absolute;
	top: 3%;
	left: 4.2%;
	z-index: 2;
	width: 18.75%;
}
#onayami img{
	width: 100%;
	height: auto;
}
#arrow_01{
	position: absolute;
	top: 11%;
	left: 11.5%;
	width: 4.16%;
	height: auto;
}
#arrow_01 img{
	width: 100%;
	height: auto;
}
#arrow_05{
	position: absolute;
	top: -7%;
	left: 11.5%;
	width: 4.16%;
	height: auto;
	z-index: 0;
}
#arrow_05 img{
	width: 100%;
	height: auto;
}
#goiken{
	position: absolute;
	top: 32%;
	left: 6%;
	z-index: 2;
	width: 15%;
}
#goiken img{
	width: 100%;
	height: auto;
}
#omoi{
	position: absolute;
	top: 65%;
	left: 6%;
	z-index: 2;
	width: 15%;
}
#omoi img{
	width: 100%;
	height: auto;
}
#arrow_02{
	position: absolute;
	/*top: 820px;*/
	top: 70%;
	left: 13.5%;
	width: 20.83%;
	height: auto;
}
#arrow_02 img{
	width: 100%;
	height: auto;
}
.img_box{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	/*margin-bottom: 50px;*/
	margin-bottom: 5%;
}
.img_box figure{
	width: 24%;
	margin: 0 0 0 5px;
	text-align: left;
}
.img_box figure img{
	width: 100%;
}
.img_l{
	width: 33% !important;
}
.img_ml{
	margin-right: 20% !important;
}
.img_box_2s{
	display: flex;
	justify-content: space-between;
}
.img_box_2s figure{
	width: 48%;
	margin: 0;
}
.img_box_2s figure img{
	width: 100%;
}
.ex_box_all{
	display: flex;
	justify-content: space-between;
	padding: 20% 0 5%;
}
.ex_box{
	width: 40%;
}
.title-banner{
	padding: 0px;
	position: relative;
	z-index: 3;
}
.title-banner-main{
	text-align: center;
}
.title-banner-sub{
	text-align: center;
}
.title-banner h2{
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size: 3.8rem;
	font-weight: normal;
	color: #525252;
	margin: 0;
}
.title-banner h3{
	font-size: 1rem;
	font-weight: normal;
	margin: 0;
	z-index: 3;
}
.title-banner p{
	font-size: 1.8rem;
	padding: 0;
	margin: 0 2rem;
	line-height: 2rem;
}
.title-banner-cont{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.quoto-l{
	color: #fff;
	padding: 2.5rem 0 0;
	margin: 0;
	text-align: left;
	font-size: 6rem !important;
line-height: 0rem;
}
.quoto-r{
	color: #fff;
	padding: 0;
	margin: 2.5rem 0 0;
	text-align: right;
	font-size: 6rem !important;
	line-height: 0rem;
}
.bg-yellow{
	background-color: #dadf00;
}
.bg-green{
	background-color: #a6d7c7;
}
.bg-purple{
	background-color: #ADA3CE;
}
.flexbox-between{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.design-three{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem 4.6rem;
}
.design-five{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem 0 -2rem;
}
.design-three img{
	width: 30%;
	height: auto;
	z-index: 999;		
}
.design-five img{
	width: 16%;
	height: auto;
	z-index: 999;		
}
.mono240-base{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.mono240-base img{
	width: 24%;
	height: auto;
}
#mono{
/*	background: url(../img/main_bg.gif) 0 0 no-repeat;*/
	background: url(../img/mono_bg01.jpg) 0 0 no-repeat;	
	background-size: cover;
	text-align: center;
	padding: 0px 0 0px;
	/*padding: 2% 0;*/
}

#mono_concept{
	background: url(../img/mono_bg02.jpg) 0 0 no-repeat;	
	background-size: cover;
	text-align: center;
	padding: 0px 0 0px;
}
#mono_design{
	background: url(../img/mono_bg03.jpg) 0 0 no-repeat;	
	background-size: cover;
	text-align: center;
	padding: 0px 0 0px;
}


#mono h2,
#mono_concept h2,
#mono_design h2{
	color: #231815;
	font-size: 6rem;
	letter-spacing: -0.5rem;
	line-height: 1em;
	padding: 2rem 0rem 0rem;
	margin-bottom: 0;
}

#mono h3,
#mono_concept h3,
#mono_design h3{
	font-size: 1.1rem;
	line-height: 1.2em;
	font-weight: normal;
	letter-spacing: 0rem;
	color: #606060;
	margin-bottom: 5rem;
}
.design-copy p{
	font-size: 2.8rem;
	position: relative;
}

.design-copy p:before {
font-size: 4.4em;
font-weight: normal;
position: absolute;
top: -70px;
left: 0px;
content: '“';
color: #ADA3CE;
}

.design-copy p:after {
font-size: 4.4em;
font-weight: normal;
line-height: 100px;
position: absolute;
z-index: 1;
top: 100%;
right: 0px;
display: inline-block;
width: 160px;
height: 100px;
line-height: 100px;
content: '”';
color: #ADA3CE;
}

/*
#mono h2{
	color: #80a59a;
	font-size: 1.9rem;
	line-height: 1em;
	border-bottom: solid 1px;
	padding: 1rem;
}

#mono h3{
	font-size: 1.1rem;
	line-height: 1.2em;
	font-weight: normal;
	color: #606060;
	margin-bottom: 5rem;
}
*/
#sozai{
	position: absolute;
	top: 0px;
	left: 18.75%;
	z-index: 2;
	width: 18.75%;
}
#sozai img{
	width: 100%;
	height: auto;
}
#chie{
	position: absolute;
	top: 0px;
	right: 18.75%;
	z-index: 2;
	width: 18.75%;
}
#chie img{
	width: 100%;
	height: auto;
}
#arrow_03{
	position: absolute;
	top: 10px;
	left: 39%;
	width: 21.875%;
	height: auto;
}
#arrow_03 img{
	width: 100%;
	height: auto;
}
#arrow_04{
	position: absolute;
	bottom: 50px;
	left: 48%;
	width: 4.16%;
	height: auto;
}
#arrow_04 img{
	width: 100%;
	height: auto;
}
#arrow_06{
	position: absolute;
	top: -10%;
	left: 48%;
	width: 4.16%;
	height: auto;
}
#arrow_06 img{
	width: 100%;
	height: auto;
}
#arrow_07{
	position: absolute;
	bottom: 0;
	left: 48%;
	width: 4.16%;
	height: auto;
}
#arrow_07 img{
	width: 100%;
	height: auto;
}
#arrow_08{
	position: absolute;
	top: -1.8%;
	left: 48%;
	width: 4.16%;
	height: auto;
}
#arrow_08 img{
	width: 100%;
	height: auto;
}
#arrow_09{
	position: absolute;
	top: 16%;
	left: 48%;
	width: 4.16%;
	height: auto;
}
#arrow_09 img{
	width: 100%;
	height: auto;
}
#shohin{
	position: absolute;
	bottom: -80px;
	/*bottom: -13%;*/
	left: 40.6%;
	z-index: 2;
	width: 18.75%;
}
#shohin img{
	width: 100%;
	height: auto;
}
#authority{
	/*background-color: #f7f2dd;
	text-align: center;
	padding: 60px 0 10px;
	padding: 6% 0 1%;*/
}
/*
#authority_img{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
#authority_img figure{
	width: 16%;
	margin: 0;
}
#authority_img figure img{
	width: 100%;
}
*/
.authority_img figure figcaption{
	font-size: 1.2rem;
	margin-bottom: 0;
}
.authority_img figure p{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 0.7rem;
	line-height: 1.2rem;
	margin-top: 0;
}
#kimochi{
/*	background: url(../img/main_bg.gif) 0 0 no-repeat;*/
	background: url(../img/kimochi_bg01.jpg) center center no-repeat;	
	background-size: cover;
	text-align: center;
	padding: 2% 0;
}
#kimochi h2{
	color: #231815;
	font-size: 4rem;
	line-height: 1em;
	padding: 0;
}
#kimochi h3{
	font-size: 1.1rem;
	line-height: 1.2em;
	font-weight: normal;
	color: #a59aca;
	margin-bottom: 5rem;
}
#kimochidesign{
	position: absolute;
	top: 20%;
	left: 37.5%;
	z-index: 2;
	width: 25%;
}
#kimochidesign img{
	width: 100%;
	height: auto;
}
.img_box_kimochi{
	width: 100%;
	display: flex;
	justify-content: space-between;	
	}
.kimochi_img{
	width: 40%;
}
.img_box_kimochi img{
	width: 100%;
	height: auto;
}

.equation_cont{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around ;
	align-items: center;
	padding: 5rem 0;
}
.equation_cont h2{
	font-size: 2.2rem;
}
.equation_cont h3{
	color: #606060;
}
.equation_cont p{
	font-size: 1.1rem;
	line-height: 0.8rem;	
}
#ending{
	background-color: #f7f2dd;
	text-align: center;
}
#ending h3{
	font-size: 2.3rem;
	font-weight: normal;
	letter-spacing: 0.1rem;
	line-height: 3rem;
	padding: 7rem 0rem 5rem;
}
.ending_img_box{
	width: 100%;
	display: flex;
}
.ending_img_box img{
	width: 100%;
	height: auto;
}

.ending_img_large{
	width: 66.6%;
	height: auto;
}
.ending_img{
	width: 100%;
	height: auto;
	line-height: 0px;
}
.square_btn {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #231815;
    border: solid 1px #231815;
    transition: .4s;
	margin: 1rem 0;
}

.square_btn:hover {
    background: #231815;
    color: white;
}
.copyright{
	font-size: 0.7rem;
	font-weight: normal;
	color: #606060;
	padding: 4rem 0;
}
#pageTop {
  position: fixed;
	z-index: 5;
  bottom: 20px;
  right: 20px;
}

#pageTop i {
  padding-top: 6px
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: 16px 4 0 4px;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  background-color: rgba(210,210,210,0.80);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
line-height: 2.2rem;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/*フェードイン表示*/

/*.list-mv02{
	opacity: 0;
}
.mv02{
	opacity: 1.0;
}*/

/*移動+フェードイン表示*/

/*.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}*/

/*フェード時間*/

.tr10s{
	transition: 1s;
}
.tr15s{
	transition: 1.5s;
}
.tr20s{
	transition: 2s;
}
.tr25s{
	transition: 2.5s;
}
.tr30s{
	transition: 3s;
}
.tr35s{
	transition: 3.5s;
}
.tr40s{
	transition: 4s;
}