@charset "utf-8";

/*--Base------------------------------------------------------------*/

html,body {
	width: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

html {
	overflow-y: scroll;
}

/*--Reset-----------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

img {
	border: none;
	vertical-align: middle;
	max-width: 100%;
	  height: auto;
	  vertical-align: top;
}

ul,ol {
	list-style: none;
}

/*--Text------------------------------------------------------------*/

body {
	font-size: 12px;
	font-weight: normal;
	line-height: 1.5;
    font-family: "游ゴシック体","游ゴシック","Yu Gothic","YuGothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo",sans-serif;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}

/*--Link------------------------------------------------------------*/

a,
a:link {
	color: #333333;
}

a:visited {
	color: #333333;
}

a:hover,
a:active {
	color: #777777;
}

a:focus {
	outline: none;
}

/*--HTML5-----------------------------------------------------------*/

article,aside,details,footer,header,main,menu,nav,section,summary {
	display: block;
}

/*--sample----------------------------------------------------------*/

/*--layout----------------------------------------------------------*/

#wrapper {
	width: 100%;
}

#wrapper02 {
	width: 100%;
	background-color: #F4EDE3;
}

#header {
	height: 90vh;
	margin: 0;
	padding: 0;
}

#header header {
	margin: 0 auto;
	background-color: #FFF;
	height: 70px;
	background-color:rgba(255,255,255,0.6);
}

#header02 {
	margin: 0;
	padding: 0;
}

#header02 header {
	margin: 0 auto;
	background-color: #FFF;
	height: 70px;
	background-color:rgba(255,255,255,0.6);
}

#header03 {
	height: 100vh;
	margin: 0;
	padding: 0;
	background-image: url(../../img/tech/top02.png);
	background-position: top center;
	background-repeat: no-repeatl;
	background-size: cover;
}

#header04 {
	margin: 0;
	padding: 0;
}

#header03 header {
	margin: 0 auto;
	background-color: #FFF;
	height: 70px;
	background-color:rgba(255,255,255,0.6);
}

#headerStan01 {
	height: 50vh;
	margin: 0;
	padding: 0;
	background-image: url(../img/re02/stan/01/main.png);
	background-position: top center;
	background-repeat: no-repeatl;
	background-size: cover;
}

#headerStan01 header {
	margin: 0 auto;
	background-color: #FFF;
	height: 70px;
	background-color:rgba(255,255,255,0.6);
}

#headerStan02 {
	height: 50vh;
	margin: 0;
	padding: 0;
	background-image: url(../img/re02/stan/02/main.png);
	background-position: top center;
	background-repeat: no-repeatl;
	background-size: cover;
}

#headerStan02 header {
	margin: 0 auto;
	background-color: #FFF;
	height: 70px;
	background-color:rgba(255,255,255,0.6);
}

#headerStan03 {
	height: 50vh;
	margin: 0;
	padding: 0;
	background-image: url(../img/re02/stan/03/main.png);
	background-position: top center;
	background-repeat: no-repeatl;
	background-size: cover;
}

#headerStan03 header {
	margin: 0 auto;
	background-color: #FFF;
	height: 70px;
	background-color:rgba(255,255,255,0.6);
}

#headerStan04 {
	height: 50vh;
	margin: 0;
	padding: 0;
	background-image: url(../img/re02/stan/04/main.png);
	background-position: top center;
	background-repeat: no-repeatl;
	background-size: cover;
}

#headerStan04 header {
	margin: 0 auto;
	background-color: #FFF;
	height: 70px;
	background-color:rgba(255,255,255,0.6);
}

#headerStan05 {
	height: 50vh;
	margin: 0;
	padding: 0;
	background-image: url(../img/re02/stan/05/main.png);
	background-position: top center;
	background-repeat: no-repeatl;
	background-size: cover;
}

#headerStan05 header {
	margin: 0 auto;
	background-color: #FFF;
	height: 70px;
	background-color:rgba(255,255,255,0.6);
}

#headerTech01 {
	height: 200px;
	margin: 0;
	padding: 0;
}

#headerTech01 header {
	margin: 0 auto;
	background-color: #FFF;
	height: 70px;
	background-color:rgba(255,255,255,0.6);
}

#contents {
	margin: 0 auto;
}

.topLogo {
	position: absolute;
	text-align: left;
	top: 23px;
	left: 20px;
}

#main {
	margin: 0 auto;
	width: 100%;
	font-family: Century Gothic, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

#swMain {
	margin: 0 auto;
	width: 100%;
}

#footer {
	margin-top: 30px;
	position: relative;
	width: 100%;
}

#footer footer {
	width: 100%;
	margin: 0 auto;
	padding: 20px 0 0 0;
}

#header header,
#contents {
	width: 100%;
}

/*--common----------------------------------------------------------*/

#header h1,
#header h2,
#contents h3,
#header p,
#contents p,
#footer p {
	padding: 0px;
}


/*--top----------------------------------------------------------*/

.topWorksTitle {
	font-size: 14px;
	text-align: center;
	color: #333333;
	margin-top: 50px;
}

.worksListbox {
	margin-top: 20px;
}

.worksText {
	color: #666666;
	font-size: 10px;
	margin-left: 20px;
	margin-right: 20px;
	font-weight: normal;
}

.worksNewImg {
	margin-top: -2px;
}

.moreBtn {
	margin: 20px auto;
	text-align: center;
	border: 1px #333333 solid;
	padding: 3px;
	width: 100px;
}

.moreBtn02 {
	margin: 30px auto 20px auto;
	text-align: center;
}

.moreBtn03 {
	margin: 30px auto 0px auto;
	text-align: center;
}

.copyright {
	text-align: center;
	font-size: 11px;
	color: #FFF;
	margin-top: 30px;
	padding: 20px 0 50px 0;
}

.marginTop5 {
	margin-top: 5px;
}


/*--トップに戻るボタン----------------------------------------------------------*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #fff;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 0;
	filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
.pagetop a:hover {
    display: block;
    background-color: #fff;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:0;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
/*--トップに戻るボタン----------------------------------------------------------*/

.topBannerBox {
	width: 100%;
	margin: 10px auto 0 auto;
	text-align: center;
}

.topBannerBox02 {
	width: 100%;
	margin: 30px auto 0 auto;
	text-align: center;
}

.yoyaku02 {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 998;
	text-align: center;
	color: #000;
	font-weight: bold;
	font-size: 18px;
	padding: 0;
}

.yoyakuBox {
	width: 100%;
	margin: 0 auto;
	background-color: #DF9D00;
}

.gnavSns01 {
	float: left;
	width: 47%;
	text-align: right;
}

.gnavSns01 a {
	color: #FFF;
}

.gnavSns02 {
	float: right;
	width: 47%;
	text-align: left;
}

.gnavSns02 a {
	color: #FFF;
}

.gnavSnsBox {
	overflow: hidden;
	margin-top: 30px;
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: 1px solid #fff;
}

.gnavSnsBox span {
	vertical-align: middle;
}

.gnavSnsBox img {
	vertical-align: middle;
}

/* clearfix */
.gnavSnsBox:before,
.gnavSnsBox:after {
    content: "";
    display: table;
}
 
.gnavSnsBox:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.gnavSnsBox {
    zoom: 1;
}

#gnavText02 {
	font-size: 18px;
	font-weight: bold;
	margin-top: 20px;
}

#gnavText02 a {
	color: #DF9D00;
	font-size: 20px;
}

.gnavText03 {
	font-size: 24px;
	margin-top: 30px;
	margin-bottom: 80px;
}

#gnavText04 {
	font-weight: bold;
	letter-spacing: 0.1em;
	margin-left: 10px;
}

.gnavChild01 {
	padding: 5px 20px;
	font-weight: normal;
}

#font-bold {
	font-weight: bold;
}

.topMainText01 {
	font-size: 16px;
	margin-top: 40px;
	text-align: center;
	padding: 0px;
}

#top01 {
	text-align: center;
	margin: 0 auto;
	width: 95%;
	padding-bottom: 30px;
}

.topBannerBox {
    display: -webkit-flex;
    display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
}

ul.topBannerBox li:not(:last-child) {
	margin-right: 3%;
}

.topBanner03 {
	margin-top: 20px;
	text-align: center;
}

.topMore01 {
	margin-top: 40px;
	text-align: center;
}

.topMore02 {
	margin-top: 20px;
	text-align: center;
}

#top02 {
	text-align: center;
	margin: 0 auto;
	width: 100%;
	background-color: #F5F2ED;
	padding: 30px 0;
}

.top2Inner {
	text-align: center;
	margin: 10px auto;
	width: 95%;
}

.topEventImgBox {
	position: relative;
}

.topEventImgBox2022 {
	position: relative;
	margin-top: 100px;
}

.topEventTextBox {
	position: absolute;
	text-align: center;
	width: 70%;
	background-color: #FFF;
	left: 0;
	right: 0;
	margin: -50px auto;
	padding: 20px;
}

.topEventTextBox02 {
	text-align: left;
	background-color: #FFF;
	padding: 20px 10px 20px 10px;
}

.topEventText01 {
	font-size: 13px;
	text-align: left;
	color: #777777;
	margin-top: 0px;
}

.topEventText02 {
	font-size: 13px;
	text-align: left;
	color: #000000;
	margin-top: 10px;
}

.topEventText03 {
	font-size: 13px;
	text-align: left;
	color: #DF9D00;
	margin-top: 10px;
}

.topEventText03 span {
	font-size: 13px;
	text-align: left;
	color: #191919;
	margin-top: 10px;
	border: 1px solid #191919;
	margin-right: 10px;
	padding: 2px;
}

.topEventText04 {
	margin-top: 10px;
}

.topEventText04  span {
	font-size: 13px;
	text-align: left;
	color: #191919;
	margin-top: 10px;
	border: 1px solid #191919;
	padding: 2px;
}

.topMainTitle01 {
	font-size: 18px;
	text-align: center;
	color: #191919;
	margin-bottom: 30px;
	font-weight: normal;
	letter-spacing: 0.1em;
}

.topMainTitle02 {
	font-size: 18px;
	text-align: center;
	color: #191919;
	font-weight: normal;
	letter-spacing: 0.1em;
	margin-top: 20px;
}

.topEventBox01 {
	float: left;
	width: 48%;
}

.topEventBox02 {
	float: right;
	width: 48%;
}

.topEventBox {
	overflow: hidden;
	margin-top: 100px;
	margin-bottom: 20px;
}

/* clearfix */
.topEventBox:before,
.topEventBox:after {
    content: "";
    display: table;
}
 
.topEventBox:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.topEventBox {
    zoom: 1;
}

#top03 {
	text-align: center;
	margin: 0 auto;
	width: 100%;
	background-color: #FAFAFA;
	padding: 30px 0;
}

.top3Inner {
	text-align: center;
	margin: 10px auto;
	width: 75%;
}

.topWorksText01 {
	text-align: left;
	font-size: 13px;
}

.topWorksImg01 {
	margin-top: 30px;
	text-align: center;
}

#top04 {
	text-align: center;
	margin: 0 auto;
	width: 95%;
	padding: 30px 0;
}

.topLink01 {
	float: left;
	width: 49%;
}

.topLink02 {
	float: right;
	width: 49%;
}

.topLinkBox01 {
	overflow: hidden;
	margin-top: 15px;
}

/* clearfix */
.topLinkBox01:before,
.topLinkBox01:after {
    content: "";
    display: table;
}
 
.topLinkBox01:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.topLinkBox01 {
    zoom: 1;
}

#top05 {
	text-align: center;
	margin: 0 auto;
	width: 95%;
	padding: 30px 0;
}

#top06 {
	text-align: center;
	margin: 0 auto;
	width: 95%;
	padding: 30px 0;
}

.footerText01 {
	text-align: center;
	font-size: 16px;
	color: #393325;
}

.footerText02 {
	text-align: center;
	font-size: 20px;
	color: #666666;
	letter-spacing: 0.1em;
	margin-top: 21px;
	font-weight: 500;
}

.footerText02 a {
	color: #666666;
}

.footerText03 {
	text-align: center;
	font-size: 16px;
	color: #fff;
	letter-spacing: 0.1em;
	font-weight: bold;
	margin-top: 60px;
}

.footerText04 {
	text-align: center;
	font-size: 14px;
	color: #fff;
	line-height: 200%;
}

.footerText04 a {
	color: #fff;
}

.footerImg01 {
	text-align: center;
}

.footerImg02 {
	text-align: center;
	margin-top: 20px;
}

.footerNavBox01 {
	float: left;
	width: 48%;
	margin-right: 2%;
	text-align: left;
}
.footerNavBox02 {
	float: left;
	width: 48%;
	margin-right: 2%;
	text-align: left;
}

.footerNav {
	overflow: hidden;
	width: 95%;
	margin: 30px auto 20px auto;
	text-align: center;
	font-size: 10px;
	color: #FFF;
}

/* clearfix */
.footerNav:before,
.footerNav:after {
    content: "";
    display: table;
}
 
.footerNav:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.footerNav {
    zoom: 1;
}

.footerText05 {
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid #fff;
	padding-bottom: 20px;
}

.footerText05 a {
	padding-bottom: 20px;
	color: #FFF;
}

.footerText06 {
	font-size: 13px;
	font-weight: normal;
	margin-top: 15px;
	line-height: 100%;
}

.footerText06 a {
	font-size: 14px;
	font-weight: normal;
	margin-top: 15px;
	line-height: 100%;
	color: #FFF;
}

.bottomLink {
	margin: 20px auto;
	width: 98%;
	padding-top: 20px;
}

.blogNewBox {
	margin: 0 auto;
	border: 0;
}

.blogBox01 {
	margin: 20px auto;
	width: 90%;
	padding: 10px 10px 20px 10px;
	border: 1px solid #191919;
	box-sizing: border-box;
}

.cocoNavBox01 {
	float: left;
	width: 25%;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid #CCCCCC;
	color: #987963;
	font-size: 13px;
}

.cocoNavText01 {
	font-size: 11px;
}

.cocoNavText02 {
	width: 25%;
	margin: 10px auto;
	border-bottom: 1px solid #987B63;
	
}

.cocoNavContainer01 {
	width: 100%;
	overflow: hidden;
}

/* clearfix */
.cocoNavContainer01:before,
.cocoNavContainer01:after {
    content: "";
    display: table;
}
 
.cocoNavContainer01:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cocoNavContainer01 {
    zoom: 1;
}

.cocoText01 {
	text-align: center;
	font-size: 20px;
	line-height: 140%;
	letter-spacing: 0.2em;
	color: #666666;
	font-family: Century Gothic, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	margin-top: 30px;
}

.cocoText02 {
	text-align: center;
	font-size: 13px;
	line-height: 160%;
	letter-spacing: 0.2em;
	color: #666666;
	font-family: Century Gothic, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	margin-top: 30px;
}

.cocoText02-2 {
	text-align: center;
	font-size: 13px;
	line-height: 140%;
	letter-spacing: 0.2em;
	color: #666666;
	font-family: Century Gothic, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	margin-top: 30px;
}

.cocoText03 {
	text-align: right;
}

.cocoText04 {
	text-align: right;
	font-size: 12px;
	color: #666666;
	font-family: Century Gothic, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

.cocoText05 {
	text-align: center;
	font-size: 18px;
	line-height: 140%;
	letter-spacing: 0.2em;
	color: #666666;
	font-family: Century Gothic, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	margin-top: 30px;
}

.cocoImg01 {
	text-align: center;
	margin-top: 0px;
}

.cocoImg02 {
	text-align: center;
	margin-top: 20px;
}

.cocoImg03 {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 20px;
}

.cocoImg03 img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

.cocoImg04 {
	text-align: center;
	margin-top: 40px;
}

.cocoImg05 {
	text-align: center;
	margin-top: 4px;
}

.titileLine {
	text-align: center;
	border-bottom: solid 1px #BEAB9A;
	margin: 50px auto 0 auto;
	width: 15%;
}

.contentsTitle01 {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #BEAB9A;
	font-size: 20px;
	letter-spacing: 0.1em;
}

.cocoConceptBox01 {
	position: relative;
	background-color: #fff;
	text-align: center;
	margin: -100px auto 30px auto;
	width: 85%;
	padding: 30px 5%;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}

.conceptSlBox {
	width: 100%;
	text-align: center;
	margin: 40px auto 20px 0;
	background-image: url(../img/cocochi/top/bg02.png);
	padding: 5% 0 10% 0;
}

.planTitle01 {
	text-align: center;
	font-size: 14px;
	letter-spacing: 0.2em;
	color: #666666;
	font-family: Century Gothic, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	height: 40px;
	line-height: 40px;
	border-top : 1px solid #666666;
	border-bottom: 1px solid #666666;
	width: 150px;
	margin: 30px auto;
}

.catch02 {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  font-size: 20px;
  font-weight: 400;
  color: #666666;
  letter-spacing: 0.2em;
}
.catch02:before, .catch02:after {
  border-top: 1px solid #666666;
  content: "";
  width: 3em; /* 線の長さ */
}
.catch02:before {
  margin-right: 1em; /* 文字の右隣 */
}
.catch02:after {
  margin-left: 1em; /* 文字の左隣 */
}

.cocoTecBg01 {
	text-align: center;
	font-family: Century Gothic, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	width: 100%;
	margin: 30px auto;
	padding: 30px 0;
	background-color: #EEEEEE;
}

.cocoTecText01 {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
	color: #666666;
	font-size: 20px;
	letter-spacing: 0.3em;
}

.cocoTecText01 span {
	font-size: 10px;
}

.cocoTecImg01 {
	text-align: center;
	margin-top: 10px;
}

.cocoTecText02 {
	text-align: center;
	margin-top: 30px;
	color: #595757;
	font-size: 10px;
	letter-spacing: 0.1em;
}

.cocoGallBox01 {
	width: 100%;
	height: 200px;
	text-align: center;
	background-color: #FFF4F1;
	padding-top: 50px;
	margin-bottom: 150px;	
}

.cocoGallTextBox {
	position: absolute;
	width: 33%;
	text-align: center;
	margin-top: 30px auto;
	background-color: #FFF;
	border: 1px solid #666666;
	padding: 10px;
	margin: -70px 0 30px 30px;
}
.cocoGallImg01 {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 20px;
	padding-bottom: 30px;
}

.contactLink01 {
	float: left;
	width: 50%;
}
.contactLink02 {
	float: right;
	width: 50%;
}

.contactLinkContainer {
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	position: fixed;
	bottom: 0;
	z-index: 99;
}

/* clearfix */
.contactLinkContainer:before,
.contactLinkContainer:after {
    content: "";
    display: table;
}
 
.contactLinkContainer:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.contactLinkContainer {
    zoom: 1;
}

.cocoLinkImg01 {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 20px;
}

.cocoLinkImg02 {
	text-align: center;
	margin-top: 30px;
}

.cocoLinkImg03 {
	text-align: center;
	margin-top: 60px;
}

.cocoLinkText01 {
	text-align: center;
	font-size: 16px;
	line-height: 140%;
	letter-spacing: 0.2em;
	color: #666666;
	font-family: Century Gothic, "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	margin-top: 20px;
}

.contactLink03 {
	float: left;
	width: 49%;
}
.contactLink04 {
	float: right;
	width: 49%;
}

.contactLinkContainer02 {
	overflow: hidden;
	width: 100%;
	margin: 20px auto 0 auto;
	text-align: center;
}

/* clearfix */
.contactLinkContainer02:before,
.contactLinkContainer02:after {
    content: "";
    display: table;
}
 
.contactLinkContainer02:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.contactLinkContainer02 {
    zoom: 1;
}

.footerBgBox01 {
	border-radius: 40px;
	width: 100%;
	padding: 10px 0;
	background-color: #987B63;
	margin-top: 50px;
}

#goto_top {
    position: fixed;
    right: 6%;
    bottom: 6%;
}

#goto_top a {
    width: 47px;
    height: 47px;
    display: block;
    color: #fff;
    text-align: center;
    line-height: 100px;
    text-decoration: none;
    font-weight: bold;
}

/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}
 
/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
 
/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}

   
#cocoConcept {
	width: 100%;
	padding-top: 1px;
	margin: -1px auto 0 auto;
}

#cocoDesign {
	width: 100%;
	padding-top: 1px;
	margin: -1px auto 0 auto;
}

#cocoTec {
	width: 100%;
	padding-top: 1px;
	margin: -1px auto 0 auto;
}

#cocoGall {
	width: 100%;
	padding-top: 1px;
	margin: -1px auto 0 auto;
}

/*PLAN*/

.cocoPlanImg01 {
	text-align: center;
	margin-top: 50px;
}

.cocoPlanImg02 {
	text-align: center;
	margin-top: 0px;
}

.cocoPlanImg03 {
	text-align: center;
	margin-top: -30px;
}

.cocoPlanText01 {
    color: #987A63;
    text-align: center;
	font-size: 22px;
	margin-top: 30px;
}

.cocoPlanText01-2 {
    color: #3F4B45;
    text-align: center;
	font-size: 22px;
	margin-top: 30px;
}

.cocoPlanText01-3 {
    color: #E5A593;
    text-align: center;
	font-size: 22px;
	margin-top: 30px;
}

.cocoPlanText02 {
    color: #666666;
    text-align: center;
	font-size: 15px;
	margin-top: 30px;
	line-height: 180%;
	letter-spacing: 0.15em;
}

.stanLinkBox {
	width: 100%;
	margin: 40px auto 0 auto;
}

.planDetailBox01 {
	float: left;
	width: 47%;
	margin-right: 3%;
}

.planDetailBox02 {
	float: right;
	width: 47%;
}

.planDetailContainer {
	overflow: hidden;
	width: 98%;
	margin: 30px auto 0 auto;
}

/* clearfix */
.planDetailContainer:before,
.planDetailContainer:after {
    content: "";
    display: table;
}
 
.planDetailContainer:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.planDetailContainer {
    zoom: 1;
}


/*ランディングページ*/

.cocoLpNavBox {
  display: flex;
  position: fixed;
  top: 0;
  z-index:9999;
}

.cocoLpNavBox li {
  width: calc(100% / 3);
}

.cocotiBox01 {
  text-align:center;
  padding: 60px 0 0 0;
}

.cocotiImg01 {
  text-align:center;
}

.cocotiImg02 {
  text-align:center;
  margin-top: 70px;
}

.cocotiImg03 {
  text-align:center;
  margin-top: 20px;
}

.cocotiImg04 {
  text-align:center;
}

.cocotiImg05 {
  text-align:center;
  margin-top: 26px;
  font-size: 22px;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 0.1em;
}

.cocotiImg06 {
  text-align:center;
  margin-top: 26px;
}

.cocotiImg07 {
  text-align:center;
}

.cocotiImg08 {
  text-align:center;
  margin-top: 26px;
  font-size: 16px;
  font-weight: 400;
  color: #FFF;
  letter-spacing: 0.1em;
}

.cocotiImg08 a{
  color: #FFF;
}

.cocotiImg09 {
  text-align:center;
  margin-top: 40px;
  font-size: 15px;
  font-weight: 400;
  color: #FFF;
}

.cocotiTitle01 {
	text-align: center;
	margin-top: 60px;
	margin-bottom: 30px;
	color: #3F4B45;
	font-size: 22px;
	letter-spacing: 0.1em;
}

.cocotiTelBox01 {
	text-align: center;
	margin: 60px 0 0 0;
}

.cocotiYoyakuBox {
	text-align: center;
	margin: 20px 0 0 0;
	background-color:#987A63;
	padding: 20px 20px 40px 20px
}

.cocotiFooterBox {
	text-align: center;
	background-color: #666666;
	padding: 40px 20px 40px 20px
}



.gnavsp {
  position: fixed;
  top: 0;
  right: 0;
}

.logo {
  text-align: left;
  padding: 30px;
}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 9000;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #ffffffeb;
  transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
	list-style: none;
	text-align: left;
	padding-top: 10%;
	padding-left: 15%;
}

.nav_item {
	line-height: 200%;
	padding: 10px 0;
}

.nav_item_sub {
	line-height: 200%;
	padding: 10px 0;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}