@charset "UTF-8";
/* CSS Document */

#contents h2.ttlWorkshop {
display: none;
background:#82D3E2 url(css_img/iconWorkshopTtl.svg) no-repeat 25px 6px;
background-size:80px;
color:#fff;
font-size:1.83em;
font-weight:bold;
padding:0 15px 0 120px;
margin-bottom:115px;
height:80px;
line-height:80px;
zborder-radius: 80px;        /* CSS3草案 */
-webkit-border-radius: 80px;    /* Safari,Google Chrome用 */
-moz-border-radius: 80px;   /* Firefox用 */ 
}
#contents h2.ttlWorkshop.etcType {
	display:none;
}

#groupWorkshop {}

#groupWorkshop .content {
border:solid 2px #dfdfdf;
padding:25px 50px;
background:#fff;
margin-bottom:105px;
zborder-radius: 10px;        /* CSS3草案 */
-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
-moz-border-radius: 10px;   /* Firefox用 */ 
}

#groupWorkshop .content .group {
padding:25px 0;
border-bottom:solid 1px #eee;
word-wrap: break-word;
word-break: break-all;
}

#groupWorkshop .content .group strong{
color:#FFC648;
}
#groupWorkshop .content .group strong.red{
color:#ff5a23;
}

#groupWorkshop .content .group h4 {
margin-bottom:15px;
font-weight:bold;
color:#58BBCE;
font-size:1.13em;
padding-left:15px;
border-left:solid 5px #58BBCE;
}

#groupWorkshop .content .group p,
#groupWorkshop .content .group ul,
#groupWorkshop .content .group dl,
#groupWorkshop .content .group .photo {
padding:10px 0;
}
#groupWorkshop .content .group li,
#groupWorkshop .content .group dl {
padding:5px 0 5px 35px;
/*color:#82D3E2;*/
color:#808080;
font-weight:bold;
font-size:0.95em;
background:url(css_img/iconList.svg) no-repeat 3px 7px;;
}
#groupWorkshop .content .group dt,
#groupWorkshop .content .group dd{
	font-weight:bold;
}
#groupWorkshop .content .group dd{
	padding-left:1.23em;
	font-size:1.0em;
}




#groupWorkshop .content .group .photo {
line-height:0;
}



#groupWorkshop .content .group .images  {
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
#groupWorkshop .content .group .images::before  {
	content:"↓クリックすると、拡大画像を見れます";
	margin-bottom: 0.5em;
	color:#333;
	font-size: 0.85em;
	width:100%;
}

#groupWorkshop .content .group .images .item {
	width:150px;
}
#groupWorkshop .content .group .images .item a{
	display: block;
	height:0;
	overflow: hidden;
	position: relative;
	padding: 100% 0 0 0;
}
#groupWorkshop .content .group .images .item a img{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
    min-height: 100%;
    width: auto;
}


/*ワークショップページ専用タイトルバー*/
#groupWorkshop .ttl {
position:relative;
padding-left:100px;
}
#groupWorkshop .ttl h3 {
border:none;
/**/font-weight:bold;
padding:3px 0 3px 0;
margin:0;
}
#groupWorkshop .date {
position:absolute;
background:#FFD169;
color:#fff;
width:85px;
height:85px;
padding:15px;
border-radius: 85px;        /* CSS3草案 */
-webkit-border-radius: 85px;    /* Safari,Google Chrome用 */
-moz-border-radius: 85px;   /* Firefox用 */
box-sizing:border-box;
font-size:1.65em;
font-family: 'Playfair Display', serif;
}
#groupWorkshop .date .inframe{
	position: absolute;
	text-align: center;
	left:50%;
	top:50%;
	width:98%;
	line-height: 0.92em;
	display: block;
	transform: translate(-50%,-50%);
}
#groupWorkshop .date .name{
	font-size: 0.87em;
}
#groupWorkshop .ttl .date {
left:0;
bottom:0;
}

#groupWorkshop .itemWorkshop {
position:relative;
border:solid 1px #ccc;
background:#fff;
margin:0 25px 45px 25px;
border-radius: 10px;        /* CSS3草案 */
-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
-moz-border-radius: 10px;   /* Firefox用 */ 
}
#groupWorkshop .itemWorkshop .date {
left:-30px;
top:-20px;
border:solid 2px #fff;
}
#groupWorkshop .itemWorkshop .photoThumb {
float:left;
width:220px;
line-height:0;
background:#000;
border-radius: 0 0 0 10px;        /* CSS3草案 */
-webkit-border-radius: 0 0 0 10px;    /* Safari,Google Chrome用 */
-moz-border-radius: 0 0 0 10px;   /* Firefox用 */
overflow:hidden;
}
#groupWorkshop .itemWorkshop .photoThumb a img {
opacity:0.87;
transition-property:opacity;
transition-duration:0.5s;
transition-timing-function:ease-in-out;
transition-delay:0s;
}
#groupWorkshop .itemWorkshop .photoThumb a:hover img {
opacity:1;
}
#groupWorkshop .itemWorkshop h4 {
margin-left:220px;
padding:15px 35px;;
font-size:1.27em;
}
#groupWorkshop .itemWorkshop h4,
#groupWorkshop .itemWorkshop h4 a {
	font-weight:bold;
	text-decoration:none;
	color:#58BBCE;
}
#groupWorkshop .itemWorkshop .dateUp {
position:absolute;
right:15px;
bottom:10px;
font-size:0.97em;
}

#groupWorkshop #thmbnailWorkshop {
text-align:center;
line-height:0;
margin-bottom:25px;
}
#groupWorkshop #thmbnailWorkshop img {
max-width:100%;
max-height:500px;
width:auto;
height:auto;
}

#groupWorkshop .ttl .dateUp {
font-size:0.87em;
text-align:right;
color:#666;
}

#groupWorkshop .date p {
/*position:absolute;*/
padding:0;
display: inline;
}

#groupWorkshop .date .month {
/*left:14px;*/
right:54px;
top:21px;
text-align:right;
}

#groupWorkshop .date .slush {
left:30px;
top:24px;
width:5px;
text-align:center;
}

#groupWorkshop .date .day {
font-size:1.38em;
left:43px;
top:11px;
text-align:left;
}

#groupWorkshop .date .etc {
font-size: 0.68em;
line-height: 1.2em;
font-weight:bold;
/*line-height:1.5em;
left:0;
top:0;
width:100%;
padding:12px;*/
text-align:center;
box-sizing:border-box;
}

/*ワークショップ一覧（アーカイブ）*/
.listWorkshop{
padding:55px 0 0 0;
}

.listWorkshop li {
width:25%;
float:left;
margin-bottom:25px;
position:relative;
}

.listWorkshop li .frame{
margin:0 20px;
}

.listWorkshop li .photo{
margin-bottom:15px;
overflow:hidden;
height:210px;
background:#666;
position:relative;
}

.listWorkshop li .photo img{
min-width:100%;
min-height:100%;
max-width:200%;
max-height:200%;
max-width:auto;
width:auto;
height:auto;
position:absolute;
left:0;
top:0;
transition-property: opacity, max-width, max-height;
transition-duration:0.3s;
transition-timing-function:ease-in-out;
transition-delay:0s;
}
.listWorkshop li .photo a:hover img{
opacity:0.7;
max-width:220%;
max-height:220%;
}

#contents .listWorkshop li h3{
padding:3px 5px;
border:none;
font-weight:bold;
font-size:0.87em;
background:#666;
color:#fff;
position:absolute;
left:25px;
bottom:-15px;
/*overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;*/
border-radius: 10px;        /* CSS3草案 */
-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
-moz-border-radius: 10px;   /* Firefox用 */
display:none;
}
#contents .listWorkshop li:hover h3{
display:block;
}

/*ご予約連絡先*/
#groupContact {}


#groupContact h4 {
text-align:center;
font-size: 1.75em;
font-weight: bold;
/*padding:0 10px;*/
height:40px;
line-height:40px;
padding-bottom: 0.8em;
border-bottom: solid 1px #37A2B7;
margin-bottom:45px;
/*background:#37A2B7;*/
color:#37A2B7;
}

#groupContact .boxAcc {
width:50%;
float:left;
margin-bottom:35px;
}

#groupContact .boxAcc dt {
width:80px;
height:0;
overflow:hidden;
padding-top:80px;
float:left;
background-repeat:no-repeat;
background-position:center top;
background-size:100%;
}
#groupContact .boxAcc dd {
margin-left:100px;
margin-right:30px;
margin-top:5px;
padding:8px 15px;
background:#B8EAF4;
font-size:0.83em;
line-height:2.11em;
color:#19889D;
zborder-radius: 10px;        /* CSS3草案 */
-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
-moz-border-radius: 10px;   /* Firefox用 */
word-wrap: break-word;
word-break: break-all;
}
#groupContact .boxAcc dd a {
color:#FFFFFF;
background:#1fbed8;
padding:3px 11px;
font-weight:bold;
text-decoration:none;
}
#groupContact .boxAcc dd a:hover {
color:#37A2B7;
text-decoration:underline;
}


#groupContact .grFacebook dt {
background-image:url(css_img/iconFacebook.svg);
}

#groupContact .grLINE dt {
background-image:url(css_img/iconLINE.svg);
}

#groupContact .grMail dt {
background-image:url(css_img/iconMail.svg);
}

#groupContact .grTel dt {
background-image:url(css_img/iconTel.svg);
}

#groupContact .grEtc dt {
background-image:url(css_img/iconEtc.svg);
}

/**************************************************************************************
**************************************************************************************
画面サイズが640pxより小さい場合
**************************************************************************************
**************************************************************************************/


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


#contents h2.ttlWorkshop {
background-position:center 3px;
background-size:115px;
font-size:1.53em;
padding:95px 5px 10px 5px;
text-align:center;
margin-bottom:55px;
height:auto;
line-height:1.5em;
zborder-radius: 80px;        /* CSS3草案 */
-webkit-border-radius: 80px;    /* Safari,Google Chrome用 */
-moz-border-radius: 80px;   /* Firefox用 */ 
}

#groupContact .boxAcc {
width:auto;
float:none;
margin-bottom:35px;
}

#groupContact .boxAcc dd {
margin-top:12px;
padding:8px 15px;
font-size:0.83em;
}

/*ワークショップ一覧（アーカイブ）*/

.listWorkshop li {
width:50%;
margin-bottom:25px;
}


#contents .listWorkshop li h3{
padding:3px 5px;
font-size:0.87em;
position:relative;
left:auto;
bottom:auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display:block;
}

#groupWorkshop .itemWorkshop .date {
    left: -30px;
    top: -30px;
}

#groupWorkshop .itemWorkshop .photoThumb {
width:120px;
}

#groupWorkshop .itemWorkshop h4 {
    margin-left: 120px;
    padding: 15px 20px;
    font-size: 1.05em;
}

#groupWorkshop .itemWorkshop .dateUp {
    right: 8px;
    bottom: 5px;
    font-size: 0.91em;
}

#groupWorkshop .content .group .images .item {
	width:33%;
	width : -webkit-calc(100% / 3) ;
	width : calc(100% / 3) ;
}
}

/**************************************************************************************
**************************************************************************************
画面サイズが460pxより小さい場合
**************************************************************************************
**************************************************************************************/


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

#groupWorkshop .content {
padding:25px 20px;
margin-bottom:105px;
}

#groupWorkshop .ttl .date {
position:relative;
left:auto;
bottom:auto;
width:155px;
height:155px;
padding:15px;
border-radius: 155px;        /* CSS3草案 */
-webkit-border-radius: 155px;    /* Safari,Google Chrome用 */
-moz-border-radius: 155px;   /* Firefox用 */
font-size:3.24em;
margin:0 auto 25px auto;
}

#groupWorkshop .ttl .date .day {
font-size:1.38em;
left:75px;
top:15px;
}
#groupWorkshop .ttl .date .slush {
left: 53px;
top: 43px;
width: 5px;
}
#groupWorkshop .ttl .date .month {
/*left: 27px;*/
right:100px;
top: 35px;
}

#groupWorkshop .ttl h3 {
font-size:1.35em;
padding: 3px 0 3px 0;
margin: 20px;
}

  
#groupWorkshop .ttl {
padding-left:0;
}

#groupWorkshop .content .group h4 {
margin-bottom:15px;
font-size:1.02em;
padding-left:15px;
}




/*ワークショップ一覧（アーカイブ）*/

.listWorkshop li {
width:auto;
margin-bottom:25px;
float:none;
}


#contents .listWorkshop li h3{
padding:3px 5px;
font-size:0.87em;
text-overflow: clip;
white-space: normal;
}


#groupWorkshop .itemWorkshop .photoThumb {
float:none;
width:auto;
border-radius: 10px 10px 0 0;        /* CSS3草案 */
-webkit-border-radius: 10px 10px 0 0;    /* Safari,Google Chrome用 */
-moz-border-radius: 10px 10px 0 0;   /* Firefox用 */
}

#groupWorkshop .itemWorkshop h4 {
margin-left:0;
padding:5px 15px;
}

#groupWorkshop .itemWorkshop .dateUp {
position:relative;
right:auto;
bottom:auto;
padding:3px 10px;
text-align:right;
}
 
}

/**************************************************************************************
**************************************************************************************
画面サイズが460pxより大きい場合
**************************************************************************************
**************************************************************************************/


@media screen and (min-width: 460px){

#groupWorkshop .ttl h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
		transition-property: white-space;
		transition-duration:0.3s;
		transition-timing-function:ease-in-out;
		transition-delay:0s;
}
#groupWorkshop .ttl h3:hover {
	white-space: normal;
}

}