@charset "utf-8";


/* ----------------------------------------------------------------------
	
	 DADADA css
	
---------------------------------------------------------------------- */



/* - 共通内容
---------------------------- */


html {
-webkit-font-smoothing: antialiased;
}

body {
	font-size: 100%;
	font-family: 'Karla', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
	color:#333;
	-webkit-font-smoothing: subpixel-antialiased;
	word-wrap: break-word;
    overflow-wrap: break-word;
}

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

img {
	max-width: 100%;
	height: auto;
	border: 0;
}

br.sp {
	display:none;
}

#wrapper {
	width:100%;
	box-sizing:border-box;
	font-size:0.85rem;
	line-height:1.8;
	position:relative;
	z-index:2;
}

.pace-running .pace_wrapper {
	opacity:0;
}

ul.note_list { }
ul.note_list > li > .inner { display:table; }
ul.note_list > li > .inner > span { display:table-cell; }
ul.note_list > li > .inner > span.cap { white-space:nowrap; }


/* - in view 設定
---------------------------- */

div.box {
	position:relative;
}

.box {
	transition: .8s;
	-webkit-transition: .8s;
  	-ms-transition: .8s;
}

.pre_con {
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
	-ms-transform: translate(0,60px); 
}
.aft_con {
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
}

/* - TOP フェードイン
---------------------------- */

.in_fade {
	animation: fadeIn 4.5s ease 0s 1 normal;
    -webkit-animation: fadeIn 4.5s ease 0s 1 normal;
}

/*フェードイン　設定*/

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

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




/* - メインメニュー
---------------------------- */

.header_area {
	width:100%;
	position:absolute;
	top:-100px;
	z-index:200;
	margin-top:100px;
	/*background-color:#333;*/
}

.header_area.con_head {
	
	background-color:#4f5f3a;
}


.header_area .menu_inner {
	width:100%;
	box-sizing:border-box;
	position:relative;
	padding:40px 10px 30px;
}

.header_area .menu_inner .logo_block {
	text-align:center;
	box-sizing:border-box;	
}

.header_area .menu_inner .menu_block {
	text-align:center;
	box-sizing:border-box;	
}

.header_area .menu_inner .menu_block {
	text-align:center;
	box-sizing:border-box;
	padding-top:25px;
	
}

.header_area .menu_inner {
	width:100%;
	display:table;
	padding:15px 10px 15px 20px;
}

.header_area .menu_inner .logo_block {
	text-align:left;
	display:table-cell;
	box-sizing:border-box;
	vertical-align:middle;
	line-height:0;
	width:120px;
}

.header_area .menu_inner .logo_block img {
	max-width:220px;
	width:100%;
	color:#FFF;
}

.header_area .menu_inner .logo_block svg {
	color:#FFF;
}


.header_area .menu_inner .menu_block {
	text-align:right;
	display:table-cell;
	vertical-align:middle;
	box-sizing:border-box;	
	padding-top:0;
	
}



/* ヘッダー固定後*/

.header_area.fixed {
	top: 0;
	margin-top:0;
    position: fixed;
	/*background-color:#0c0c0c;*/
	background-color:#FFF;
	border-bottom:1px solid #DDD;
    transition: top 0.4s ease-in ;
    -webkit-transition: top 0.4s ease-in ;
    -moz-transition: top 0.4s ease-in ;
}

.header_area.fixed .menu_inner {
	width:100%;
	display:table;
}

.header_area.fixed .menu_inner .logo_block {
	text-align:left;
	display:table-cell;
	box-sizing:border-box;
	vertical-align:middle;
	line-height:0;
}


.header_area.fixed .menu_inner .menu_block {
	text-align:right;
	display:table-cell;
	vertical-align:middle;
	box-sizing:border-box;	
	padding-top:0;	
}



/* - index トップ
---------------------------- */


#top_body {
	background: url(/images/bg_main.jpg) no-repeat;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	position:relative;
	
}

#top_body > .content {
	display:table;
	width:100%;
}

#top_body > .content > .logo_block {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

#top_body > .content > .logo_block h1 img {
	max-width:280px;
	width:100%;
}

/* ----- スクロール ----- */

#top_body .contents_block {
	position:absolute;
	bottom:50px;
	z-index:200;
	width:100%;
	text-align:center;
}

#top_body .contents_block .logo_block h1 img {
	max-width:260px;
	width:100%;
}

#top_body .contents_block .btn_scroll {
	margin-top:60px;
}

#top_body .contents_block .btn_scroll a {
	color:#FFF;
	display:block;
}

#top_body .contents_block .btn_scroll a img {
	width:35px;
	transition: .3s;
	-webkit-transition: .3s;
  	-ms-transition: .3s;
}

#top_body .contents_block .btn_scroll a:hover img{
	opacity:0.8;
	transform: translate(0,5px); 
	-webkit-transform: translate(0,5px); 
	-ms-transform: translate(0,5px);
}

/* - index トップ共通部分
---------------------------- */

div.top_unit {
	width:100%;
	position:relative;
}

div.top_unit > .content {
	padding:80px 10px;
	box-sizing:border-box;
}

div.top_unit > .content h2 {
	text-align:center;
	font-family: 'Work Sans', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
	font-size:2.1rem;
	font-weight:normal;
	letter-spacing:1px;
}


#top_intro.top_unit > .content {
	padding-top:160px;
	
}

/* - index アバウト
---------------------------- */


div.top_about {
	max-width:980px;
	margin:0 auto;
}


div.top_about .txt_block {
	font-size:0.85rem;
	line-height:1.8;
	max-width:600px;
	margin:0 auto;
	margin-top:50px;
	text-align:center;
}

div.top_about .txt_block p.break {
	margin-top:20px;
}


/* - index topics
---------------------------- */
#top_slide > .content {
	padding:80px 0;
	
}

/* - index コーポラティブ
---------------------------- */


#top_project.top_unit > .content {
	background-color:#f5f5f5;
	background-color:#FFF;
}

div.top_coop_body {
	margin-top:60px;
}

div.prog_unit {
	width:100%;
	max-width:1200px;
	margin:0 auto;
	display:table;
}

div.prog_unit > div {
	display:table-cell;
	vertical-align:top;
}

div.prog_unit > div img {
	width:100%;
	max-width:100%;
}


div.prog_unit > .img {
	width:50%;
	padding-right:30px;
	box-sizing:border-box;
}

div.prog_unit > .txt {
	width:50%;
	padding-left:30px;
	box-sizing:border-box;
}

div.prog_unit > .txt > h3 > span {
	display:block;
	font-size:0.95rem;
	margin-bottom:5px;
}

div.prog_unit > .txt > h3 > span > span.pro {
	font-size:0.75rem;
	padding-left:1em;
}

div.prog_unit > .txt > h3 {
	font-size:1.3rem;
	color:#535353;
	margin-bottom:35px;
}

div.prog_unit > .txt p.more {
	display:inline-block;
	position: relative;
}

div.prog_unit > .txt p.more a {
	display:block;
	padding:15px 5px;
	box-sizing:border-box;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	border:1px solid #222;
	background-color:#222;
	width:240px;
	color:#FFF;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

div.prog_unit > .txt p.more a:hover {
	background-color:#FFF;
	color:#444;
}

div.prog_unit > .txt p.more a span.inner {
	display:table;
	width:100%;
}

div.prog_unit > .txt p.more a span.inner > span {
	display:table-cell;
}

div.prog_unit > .txt p.more a span.inner > span.cap {
	width:16px;
}

div.prog_unit > .txt p.more a span.inner > span.txt {
	text-align:center;
	font-size:1.1rem;
}

div.link_coop > a {
	display:inline-block;
	background: linear-gradient(transparent 60%, #f7ff84 40%);
	font-weight:bold;
	font-size:1.1rem;
	color:#444;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

div.link_coop > a:hover {
	color:#9e9e9e;
}

div.link_coop > a svg {
	padding-left:10px;
	font-size:1.1rem;
}

div.how_coop {
	margin-top:60px;
	position:relative;
	border:2px dashed #ddd;
	padding:15px;
	padding-top:20px;
	box-sizing:border-box;
}

div.how_coop > h4 {
	position:absolute;
	top:-18px;
	left:15px;
	background-color:#FFF;
	padding:5px;
	box-sizing:border-box;
	font-size:0.95rem;
}

div.how_coop p {
	line-height:1.8;
	font-size:0.8rem
}


/* - index マガジン
---------------------------- */

#top_mgz.top_unit > .content {
	padding-right:0;
	padding-left:0;
}

div.mgz_body {
	margin-top:35px;
}

ul.col_list {
	max-width:1200px;
	width:100%;
	margin:0 auto;
}

ul.col_list:after {
	content:'';
	display:block;
	clear:both;
}

ul.col_list > li {
	float:left;
	position:relative;
	padding:25px;
	box-sizing:border-box;
}

ul.col_list.col3 > li {
	width:33.33%;
}

ul.col_list.col4 > li {
	width:25%;
	padding:20px;
}

ul.col_list > li > a {
	display:block;
	position:relative;
}

ul.col_list > li > a > .ph {
	position:relative;
	overflow:hidden;
	font-size:0;
}

ul.col_list > li > a > .detail {
	position:absolute;
	z-index:100;
	width:100%;
	height:100%;
	top:0;
	left:0;
	text-align:center;
	-webkit-transition:0.3s ease;
  	-moz-transition:0.3s ease;
  	transition:0.3s ease;
}

ul.col_list > li > a:hover > .detail {
	background-color:rgba(0,0,0,0.5);
}

ul.col_list > li > a > .detail > span {
	display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}

ul.col_list > li > a > .detail > .inner {
	display:inline-block;
	vertical-align:middle;
}

ul.col_list > li > a > .detail > .inner > p.more {
	color:rgba(255,255,255,0);
	line-height:1.6;
	letter-spacing:1px;
	padding:5px 25px;
	box-sizing:border-box;
	border:1px solid rgba(255,255,255,0);
	-webkit-transition:0.3s ease;
  	-moz-transition:0.3s ease;
  	transition:0.3s ease;
	font-size:0.8rem;
}

ul.col_list > li > a:hover > .detail > .inner > p.more {
	color:rgba(255,255,255,1);
	border:1px solid rgba(255,255,255,1);
}

ul.col_list > li > h3 {
	font-size:1.05rem;
	padding-top:10px;
}

ul.col_list > li > h3 a span.cat {
	display:block;
	margin-bottom:5px;
	font-size:0.8rem;
	color:#777;
}

ul.col_list > li > h3 a {
	display:block;
	color:#333;
}


ul.col_list.col4 > li > h3 {
	font-size:1.0rem;
	padding-top:10px;
}

ul.col_list > li > h3 a span.cat {
	display:block;
	margin-bottom:5px;
	font-size:0.75rem;
	color:#777;
}


/* ----- マガジン　read more ----- */


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

div.read_more p {
	display:inline-block;
	position: relative;
}

div.read_more p a {
	display:block;
	padding:15px 5px;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	border:1px solid #222;
	background-color:#222;
	width:240px;
	color:#FFF;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

div.read_more p a:hover {
	background-color:#FFF;
	color:#444;
}

div.read_more p a span.inner {
	display:table;
	width:100%;
}

div.read_more p a span.inner > span {
	display:table-cell;
}

div.read_more p a span.inner > span.cap {
	width:16px;
}

div.read_more p a span.inner > span.txt {
	text-align:center;
	font-size:1.1rem;
}

/* - index メンバー
---------------------------- */

#top_member.top_unit > .content {
	padding-right:0;
	padding-left:0;
}

div.member_body {
	margin-top:35px;
}

ul.mem > li > .detail {
	margin-top:10px;
}

ul.mem > li > .detail .pos {
	font-size:0.85rem;
}

ul.mem > li > .detail h3.name {
	font-size:1.1rem;
	padding-top:2px
}

ul.mem > li > .detail h3.name > span.en {
	font-size:0.85rem;
	padding-left:0.5em;
}

ul.per_sns {
	margin-top:15px;
}

ul.per_sns > li {
	display:inline-block;
	padding-left:15px;
}

ul.per_sns > li:first-child {
	padding-left:0;
}

/* - index ヒュッテ
---------------------------- */

div.hutte_body {
	margin-top:60px;
}

div.hutte_detail {
	max-width:1200px;
	margin:0 auto;
}

div.map_area {
	width:100%;
}

div.map_area:after {
	content:'';
	display:block;
	clear:both;
}

div.map_area > div.left_col {
	float:left;
	width:50%;
	padding-right:35px;
	box-sizing:border-box;
}

div.map_area > div.left_col svg {
	padding-right:5px;
}

div.map_area > div.left_col > h3 {
	font-size:1.6rem;
	/*letter-spacing:1px;*/
	font-weight:normal;
	font-weight:500;
}

div.map_area > div.left_col > h3 > span {
	font-size:0.7rem;
	display:block;
	margin-top:3px;
	letter-spacing:0;
}

div.map_area > div.left_col > h5 {
	font-size:0.95rem;
}
	

p.address {
	font-size:0.85rem;
}


ul.tel {
	font-size:0.85rem;
}

ul.tel > li {
	display:inline-block;
}

ul.tel > li:first-child {
	margin-right:15px;
}

h4.t_train {
	margin-top:25px;
	font-size:0.85rem;
}

ul.train {
	font-size:0.85rem;
}

ul.train > li {
	margin-top:5px
}

div.map_area > div.right_col {
	float:right;
	width:50%;
	padding-left:10px;
	box-sizing:border-box;
}


div.map_area > div.right_col > .if_inner {
	position:relative;
}

div.map_area > div.right_col > .if_inner > .if_wrapper {
	position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

div.map_area > div.right_col > .if_inner > .if_wrapper iframe {
	position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

div.hutte_contact {
	margin-top:40px;
}

div.hutte_contact > h4 {
	border-bottom:1px dotted #ccc;
	padding-bottom:7px;
	font-size:0.95rem;
}

ul.dot_list {

}

ul.dot_list > li {
	text-indent:-1em;
	padding-left:1em;
	line-height:1.8;
}

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

div.contact_btn a {
	display:block;
	border:1px solid #222;
	background-color:#222;
	color:#fff;
	padding:15px;
	font-size:0.95rem;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

div.contact_btn a:hover {
	background-color:#FFF;
	color:#444;
}

div.contact_btn a svg {
	padding-right:0.5em;
}


/* - フッター
---------------------------- */


#footer { }

#footer > .inner {
	padding:40px 10px;
	box-sizing:border-box;
	background-color:#efefef;
}

#footer > .inner > p {
	font-size:0.85rem;
	text-align:center;
	color:#666;
	letter-spacing:1px;
}


@media screen and (max-width: 979px) {

.header_area .menu_inner {
	padding:15px 10px 15px 10px;
}

.header_area .menu_inner .logo_block {
	width:100px;
}

ul.col_list.col4 > li {
	padding:15px;
}

ul.mem > li > .detail h3.name > span.en {
	display:block;
	padding-left:0;
}
	
	
}

@media screen and (max-width: 880px) {

div.prog_unit { display:block; }
div.prog_unit > div { display:block; vertical-align:top; }
div.prog_unit > .img { width:100%; padding-right:0; }
div.prog_unit > .txt {
	width:100%;
	padding-left:0;
	margin-top:30px;
}

div.prog_unit > .txt p.more {
	display:block;
}

div.prog_unit > .txt p.more a {
	width:100%;
}
	
}


@media screen and (max-width: 768px) {

#top_intro.top_unit > .content {
	padding-top:80px;
}

ul.col_list > li {
	padding:15px;
}

div.map_area > div.left_col {
	float:none;
	width:100%;
	padding-right:0;
	margin-top:40px;
}

div.map_area > div.right_col {
	float:none;
	width:100%;
	padding-left:0;
}

}

@media screen and (max-width: 690px) {

ul.col_list.col4 > li {
	width:50%;
	padding:10px;
}
	
}

@media screen and (max-width: 580px) {

ul.col_list.col3 > li {
	width:50%;
	padding:10px;
}

ul.col_list > li > h3 {
	font-size:0.95rem;
	padding-top:5px;
}
	
}



@media screen and (max-width: 480px) {

br.sp { display:block; }

#top_body .contents_block .btn_scroll {
	margin-top:40px;
}

#top_body .contents_block .logo_block h1 img {
	max-width:210px;
}

div.top_unit > .content {
	padding:40px 10px;
}

#top_hutte.top_unit > .content {
	padding-bottom:60px;
}

div.top_unit > .content h2 {
	font-size:1.8rem;
}

div.top_about .txt_block {
	margin-top:40px;
}

div.top_coop_body {
	margin-top:40px;
}

div.prog_unit > .txt {
	margin-top:15px;
}

div.prog_unit > .txt > h3 {
	font-size:1.1rem;
}

div.prog_unit > .txt > h3 > span {
	margin-bottom:15px;
}

div.prog_unit > .txt > h3 > span > span.pro {
	font-size:0.8rem;
	display:block;
	padding-left:0;
}

div.mgz_body {
	margin-top:30px;
}


div.member_body {
	margin-top:30px;
}

div.hutte_body {
	margin-top:40px;
}

div.map_area > div.left_col {
	margin-top:25px;
}

	
}