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


/* contents==========================

	1.for contents style
	
*/

/* 1.for contents style ==============================================*/


/* ----------------------------------------------------
メディアクエリ設定 All
---------------------------------------------------- */
/* common */

main h1 {
  border-top: 1px solid #e9e9e9;
  margin: 50px 0 0 0;
  padding: 25px 8px 25px 8px;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 48%);
  padding-left: calc(50vw - 48%); 
  font-size: 18px; font-size: 1.8rem;
  font-weight:bold;
}
main h1 span {
  font-size: 13px; font-size: 1.3rem;
  padding-left: 15px;
}
.link-area{
  background: #f5f5f5;
  position: relative;
  padding: 12px 0 10px;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 48%);
  padding-left: calc(50vw - 48%);
}
.link-area ul{
  display: table;
}
.link-area li{
  display: table-cell;
  font-size: 12px; font-size: 1.2rem;
}
.link-area li::after{
  content: "＞";
  margin: 0 12px 0 14px;
}
.link-area li:last-child::after{
  content: "";
}
.link-area li a{
  text-decoration: none;
  color: #333333;
}
.link-area li a:hover{
  text-decoration: underline;
}
.link-area p{
  left:calc(50% + (350 / 1090 * 100%));
  position: absolute;
  top: -48px;
  width: 150px;
}
.link-area p a{
  display: block;
  font-size: 15px; font-size: 1.5rem;
  background: #f5f5f5 url(../img/arrow_grey.png) 15px center no-repeat;
  padding: 15px 15px 15px 35px;
  width: 150px;
  text-decoration: none;
  color: #333;
}
.link-area p a:hover,
.entry .btn a:hover,
.date .map:hover{
  opacity: .7;
}


main h2{
  border-top: 3px solid #000;
  border-bottom: 1px solid #000;
  font-size: 18px; font-size: 1.8rem;
  margin: 55px 0 50px;
  padding: 30px;
}
main h2 strong{
  font-size: 32px; font-size: 3.2rem;
  font-weight: bold;
}

main section > h3{
  text-align: center;
  font-size: 24px;font-size: 2.4rem;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 45px;
  font-weight: bold;
}
main section > h3::before{
  content: "";
  display: block;
  height: 1px;
  width: 50px;
  background: #000;
  position: absolute;
  bottom: 0;
  left: calc(50% - 25px);
}
main section > section{
  max-width: 900px;
  margin: 0 auto 80px;

}

.outline p,
.timetable p,
.entry p{
  font-size: 16px; font-size: 1.6rem;
  line-height: 1.7;
  margin-bottom: 30px;
}

/*outline*/

.product{
  overflow: hidden;
  background: #f6f6f6;
  padding: 15px 20px 10px;
  margin-bottom: 30px;
}
.product dt{
  float: left;
  font-weight: bold;
}
.product dd{
  padding-left: 90px;
}
.product li{
  display: inline-block;
  margin-right: 10px;
  padding: 4px 20px 4px;
  color: #fff;
  font-size: 12px;font-size: 1.2rem;
}
.drsum{ background:#903256;}
.mb{ background:#000;}
.svf{ background:#3150a2;}
.spa{ background:#0099a5;}
.party{ background:#2686c0;}
.cloud{ background:#1cc1f7;}


/*timetable*/
.timetable li{
  border-bottom: 1px solid #e6e6e6;
  padding: 30px 0 0;
}
.timetable li:last-child{
  padding-bottom: 15px;
}
.timetable .time-title{
  margin-bottom: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.timetable .time-title span{
  color: #fff;
  background: #000;
  margin:0 40px 0 0;
  font-weight: normal;
  display: inline-block;
  padding: 10px 40px 10px 20px;
  position: relative;
  align-self: flex-start;
  flex-shrink: 0;
  flex-basis: auto;
}
.timetable .time-title span::before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 0 24px 18px;
  border-color: transparent transparent transparent #000000;
  display: block;
  position: absolute;
  top: 0;
  right: -18px;
}

/*date*/
.date table{
  width: 100%;
  font-size: 16px; font-size: 1.6rem;
  line-height: 1.7;
}
.date table th{
  color: #fff;
  font-weight: bold;
  padding: 10px 15px;
  background: #000;
  border: 2px solid #fff;
}
.date table td{
  padding: 10px 15px;
  border: 2px solid #fff;
}
.date table tr:nth-of-type(even){
  background: #f4f4f4;
}
.date .map{
  display: inline-block;
  color: #fff;
  background: #a6a6a6 url(../img/arrow_white.png) 7px center / 10px auto no-repeat;
  text-decoration: none;
  padding: 2px 10px 2px 20px;
  font-size: 12px;
  font-size: 1.2rem;
  margin-left: 15px;
}

/*entry*/
.entry .note li{
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 5px;
}
.entry section{
  margin:50px 0 60px;
  overflow: hidden;
  background: #eee;
  font-size: 16px; font-size: 1.6rem;
  line-height: 1.7;
}
.entry section h4{
  font-weight: bold;
  background: #000;
  padding: 5px 20px; 
  display: inline-block;
  color: #fff;
}
.entry section dl{
  padding: 20px;
}
.entry section dt{
  font-weight: bold;
}
.entry .btn a{
  display: block;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  background: #000 url(../img/arrow_white.png) 95% center no-repeat;
  max-width: 510px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 30px; font-size: 3rem;
  padding: 15px 0 15px;
}

.contact h3{
  font-weight: bold;
  text-align: center;
  font-size: 24px; font-size: 2.4rem;
  margin-bottom: 15px;
}
.contact dl{
  max-width: 720px;
  margin: 0 auto;
  background: #f4f4f4;
  padding: 30px;
  font-size: 16px; font-size: 1.6rem;
  line-height: 1.7;
  text-align: center;
}
.contact dt{
  font-weight: bold;
}



/*カラー設定*/
/* SVF-area*/
.SVF-area h2{
  border-color: #4e4e9b;
  background: url(../img/bg_title_SVF.png) right top repeat-y;
}
.SVF-area h3::before,
.SVF-area .timetable .time-title span,
.SVF-area table th,
.SVF-area .entry section h4,
.SVF-area .entry .btn a{
  background-color: #4e4e9b;
}
.SVF-area .timetable .time-title span::before{
  border-color: transparent transparent transparent #4e4e9b;
}
.SVF-area .timetable .time-title,
.SVF-area .entry section dt{
  color: #4e4e9b;
}
.SVF-area .entry section{
  background: #f0f0f7;
}

/* DS-area*/
.DS-area h2{
  border-color: #c40261;
  background: url(../img/bg_title_DS.png) right top repeat-y;
}
.DS-area h3::before,
.DS-area .timetable .time-title span,
.DS-area table th,
.DS-area .entry section h4,
.DS-area .entry .btn a{
  background-color: #c40261;
}
.DS-area .timetable .time-title span::before{
  border-color: transparent transparent transparent #c40261;
}
.DS-area .timetable .time-title,
.DS-area .entry section dt{
  color: #c40261;
}
.DS-area .entry section{
  background: #faeaf2;
}

/* MB-area*/
.MB-area h2{
  border-color: #666;
  background: url(../img/bg_title_MB.png) right top repeat-y;
}
.MB-area h3::before,
.MB-area .timetable .time-title span,
.MB-area table th,
.MB-area .entry section h4,
.MB-area .entry .btn a{
  background-color: #666;
}
.MB-area .timetable .time-title span::before{
  border-color: transparent transparent transparent #666;
}
.MB-area .timetable .time-title,
.MB-area .entry section dt{
  color: #666;
}
.MB-area .entry section{
  background: #f2f2f2;
}

/* SPA-area*/
.SPA-area h2{
  border-color: #2a99a5;
  background: url(../img/bg_title_SPA.png) right top repeat-y;
}
.SPA-area h3::before,
.SPA-area .timetable .time-title span,
.SPA-area table th,
.SPA-area .entry section h4,
.SPA-area .entry .btn a{
  background-color: #2a99a5;
}
.SPA-area .timetable .time-title span::before{
  border-color: transparent transparent transparent #2a99a5;
}
.SPA-area .timetable .time-title,
.SPA-area .entry section dt{
  color: #2a99a5;
}
.SPA-area .entry section{
  background: #edf6f7;
}

/* Cloud-area*/
.Cloud-area h2{
  border-color: #1cc1f7;
  background: url(../img/bg_title_Cloud.png) right top repeat-y;
}
.Cloud-area h3::before,
.Cloud-area .timetable .time-title span,
.Cloud-area table th,
.Cloud-area .entry section h4,
.Cloud-area .entry .btn a{
  background-color: #1cc1f7;
}
.Cloud-area .timetable .time-title span::before{
  border-color: transparent transparent transparent #1cc1f7;
}
.Cloud-area .timetable .time-title,
.Cloud-area .entry section dt{
  color: #1cc1f7;
}
.Cloud-area .entry section{
  background: #ecfaff;
}

/* BI-area*/
.BI-area h2{
  border-color: #fd8005;
  background: url(../img/bg_title_BI.png) right top repeat-y;
}
.BI-area h3::before,
.BI-area .timetable .time-title span,
.BI-area table th,
.BI-area .entry section h4,
.BI-area .entry .btn a{
  background-color: #fd8005;
}
.BI-area .timetable .time-title span::before{
  border-color: transparent transparent transparent #fd8005;
}
.BI-area .timetable .time-title,
.BI-area .entry section dt{
  color: #fd8005;
}
.BI-area .entry section{
  background: #fef4eb;
}

/* none-area*/
.none-area h2{
  border-color: #5a561c;
  background: url(../img/bg_title_none.png) right top repeat-y;
}
.none-area h3::before,
.none-area .timetable .time-title span,
.none-area table th,
.none-area .entry section h4,
.none-area .entry .btn a{
  background-color: #5a561c;
}
.none-area .timetable .time-title span::before{
  border-color: transparent transparent transparent #5a561c;
}
.none-area .timetable .time-title,
.none-area .entry section dt{
  color: #5a561c;
}
.none-area .entry section{
  background: #eaeaea;
}

.-area h2{
  border-color: #5a561c;
  background: url(../img/bg_title_none.png) right top repeat-y;
}
.-area h3::before,
.-area .timetable .time-title span,
.-area table th,
.-area .entry section h4,
.-area .entry .btn a{
  background-color: #5a561c;
}
.-area .timetable .time-title span::before{
  border-color: transparent transparent transparent #5a561c;
}
.-area .timetable .time-title,
.-area .entry section dt{
  color: #5a561c;
}
.-area .entry section{
  background: #eaeaea;
}
/*All END*/


/* ----------------------------------------------------
メディアクエリ設定 (PC) 961px～ 
---------------------------------------------------- */
@media screen and (min-width: 961px) {
	


/* (PC) 961px～  END*/
}

 /* ----------------------------------------------------
メディアクエリ設定 (tablet and PC) 769px～ 
---------------------------------------------------- */
@media only screen and (min-width: 769px){
	
	.spOnly { display: none; }

  .list{
    display: none;
  }
	
/*(tablet and PC) 769px～  END*/
}

 /* ----------------------------------------------------
メディアクエリ設定 (tablet　only)  769～960px
---------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 960px) {


/*769～960px*/
}

 /* ----------------------------------------------------
メディアクエリ設定 (smartPhone only)   0～768px
---------------------------------------------------- */
@media screen and (max-width: 768px) {
	
.pcOnly { display: none; }

main h1 {
  margin: 16px 0 0 0;
  text-align: center;
  padding: 15px 0;
  font-size: 1.6rem;
  border-bottom: 1px solid #e9e9e9;
}
main h1 span {
  font-size: 1.1rem;
}
.link-area{
  display: none;
}
  
main h2{
  font-size: 1.2rem;
  margin: 15px 0 30px;
  padding: 15px;
  background-size: 80% auto !important;
}
main h2 strong{
  font-size: 1.8rem;
}
main section > h3{
  font-size: 1.6rem;
  padding-bottom: 8px;
  margin-bottom: 25px;
}
main section > section{
  margin: 0 10px 50px;
}

.outline p,
.timetable p,
.entry p{
  font-size: 1.2rem;
  margin-bottom: 15px;
}

/*outline*/
.product{
  padding: 15px 10px 10px;
  margin-bottom: 15px;
}
.product dt{
  float: none;
  text-align: center;
  margin-bottom: 5px;
}
.product dd{
  padding-left: 0;
}
.product li{
  font-size: 1rem;
  margin-bottom: 5px;
}

/*timetable*/
.timetable li{
  padding: 0 10px 0;
  margin: 0 -10px 15px;
  font-size: 1.2rem;
}
.timetable li:last-child{
  padding-bottom: 0px;
}
.timetable .time-title {
  text-align: center;
  margin-bottom: 10px;
  flex-direction: column;
}
.timetable .time-title span{
  text-align: center;
  display: block;
  padding: 5px 0;
  width: 50%;
  margin: 0 auto 10px;
}
.timetable .time-title span::before{
  border: none;
}

  
/*date*/
.date table{
  font-size: 1.2rem;
}
.date table th{
  padding: 5px 10px;
  width: 20%;
}
.date table td{
  padding: 5px 10px;
}
.date .map{
  font-size: 1rem;
  background-position: 5px center;
  background-size: 6px auto !important;
  padding: 2px 10px 2px 15px;
}
  
/*entry*/
.entry .note li{
  font-size: 1.1rem;
  text-indent: -1em;
  padding-left: 1em;
}
.entry section{
  margin:25px 0 15px;
  font-size: 1.4rem;
}
.entry section dl{
  padding: 15px;
}
.entry .btn a{
  font-size: 2rem;
  width: 80%;
  margin: 0 auto 30px;
  background-size: 14px auto !important;
}

/*contact*/
.contact h3{
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.contact dl{
  padding: 15px 10px;
  font-size: 1.1rem;
  margin: 0 10px;
  text-align: left;
}

.list a{
  display: block;
  font-size: 1.5rem;
  padding: 15px 15px 15px 35px;
  background: #f5f5f5 url(../img/arrow_grey.png) 30px center no-repeat;
  width: 60%;
  margin: 30px auto 0;
  text-decoration: none;
  color: #333;
  text-align: center;
}
  
/*smartPhone END*/
}