@charset "utf-8";

/*------------------------------
共通設定
------------------------------*/

#feature-wrap {font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; font-size: 15px; line-height: 1.8 !important; letter-spacing: normal !important;}
#feature-wrap img { width:inherit; height: inherit;}


/*------------------------------
content-wrap
------------------------------*/
.content-wrap{ width: 950px; margin: 0 auto; color: #464646; background:url(../img/bg.jpg) repeat;}
.content-wrap a{ color: #464646 ;}
.content-wrap a:hover img { opacity: 0.5; transition: all 0.2s ease-out 0s; }
.content-wrap .copy{ text-align: center; padding: 15px 0; font-size: 12px; }

.contentsBox { width: 780px;  margin: 0 auto; }
.contentsBox .btn { text-align: center;}


/*=====================================================================
【共用】背景色
=======================================================================*/
.bgcl_red {background-color:#e12c3b;}

/*=====================================================================
【共用】文字色
=======================================================================*/
.cl_aquablue {color:#00a3c5;}


/*=====================================================================
【共用】border色
=======================================================================*/
.border_aquablue { border-color: #00778d;}



/*=====================================================================
【共用】概要
=======================================================================*/
.contentsDetail { background-color:#e12c3b; margin:0px 0 37px 0 ; width:774px; }

.contentsDetail .title { color:#fff; padding:8px 10px 10px 10px; }
.contentsDetail .title span { border-left:solid #fff6b3 10px; display:block; font-size:22px; line-height:1.4em; padding:0 10px; }

.contentsDetail .contents { background-color:#FFF; color:#000; padding:10px 10px 20px 10px; }
.contentsDetail .contents .left { display:inline-block; margin: 0 14px 0 0; padding: 0; vertical-align:top; width:376px; }
.contentsDetail .contents .right { display:inline-block; text-align: right; vertical-align:top; width:358px; }

/*=====================================================================
SNS
=======================================================================*/
#fb_tw {width: 172px; height: 20px; margin: 10px 50px 25px auto; line-height: 0.6;}

.fb-like {height:20px;}

/* #sec01（赤）
--------------------------------------------*/
#sec01 {margin-bottom: 78px;}
#sec01 .contentsDetail { border:solid 3px #e12c3b;}
/*右側のイメージの位置*/
#sec01 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:345px;}

/* #sec02（赤）
--------------------------------------------*/
#sec02 {margin-bottom: 78px;}
#sec02 .contentsDetail { border: solid 3px #e12c3b;}
/*右側のイメージの位置*/
#sec02 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:340px;}

/* #sec03（赤）
--------------------------------------------*/
#sec03 {margin-bottom: 78px;}
#sec03 .contentsDetail { border: solid 3px #e12c3b}
/*右側のイメージの位置*/
#sec03 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:350px;}

/* #sec04（赤）
--------------------------------------------*/
#sec04 {margin-bottom: 78px;}
#sec04 .contentsDetail { border: solid 3px #e12c3b}
/*右側のイメージの位置*/
#sec04 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:350px;}

/* #sec05（赤）
--------------------------------------------*/
#sec05 {margin-bottom: 78px;}
#sec05 .contentsDetail { border: solid 3px #e12c3b}
/*右側のイメージの位置*/
#sec05 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:340px;}

/* #sec06（赤）
--------------------------------------------*/
#sec06 {margin-bottom: 78px;}
#sec06 .contentsDetail { border: solid 3px #e12c3b}
/*右側のイメージの位置*/
#sec06 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:362px;}

/* #sec07（赤）
--------------------------------------------*/
#sec07 {margin-bottom: 78px;}
#sec07 .contentsDetail { border: solid 3px #e12c3b}
/*右側のイメージの位置*/
#sec07 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:318px;}

/* #sec08（赤）
--------------------------------------------*/
#sec08 {margin-bottom: 78px;}
#sec08 .contentsDetail { border: solid 3px #e12c3b}
/*右側のイメージの位置*/
#sec08 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:275px;}

/* #sec09（赤）
--------------------------------------------*/
#sec09 {margin-bottom: 78px;}
#sec09 .contentsDetail { border: solid 3px #e12c3b}
/*右側のイメージの位置*/
#sec09 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:358px;}

/* #sec10（赤）
--------------------------------------------*/
#sec10 {margin-bottom: 78px;}
#sec10 .contentsDetail { border: solid 3px #e12c3b}
/*右側のイメージの位置*/
#sec10 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:340px;}

/* #sec11（赤）
--------------------------------------------*/
#sec11 {margin-bottom: 78px;}
#sec11 .contentsDetail { border: solid 3px #e12c3b}
/*右側のイメージの位置*/
#sec11 .contentsDetail .contents .right img { height: auto; margin-top:-26px; width:345px;}


/* 右側が日程の場合
--------------------------------------------*/
.contentsDetail .contents .right div.dateBox { border-width: 1px; border-style: solid; margin: 0; padding: 15px; text-align: left; width: 100%; -webkit-box-sizing:border-box; box-sizing:border-box;}   
.contentsDetail .contents .right div.dateBox ul { font-size: 0; line-height: 0; margin: 0; padding: 0;}
.contentsDetail .contents .right div.dateBox ul li { margin: 0 0 15px 0; padding: 0;}
.contentsDetail .contents .right div.dateBox ul li:last-child { margin: 0; padding: 0;}
.contentsDetail .contents .right div.dateBox ul li strong  { display: block; font-size: 15px; line-height: 1; margin: 0 0 8px 0; padding: 0;}
.contentsDetail .contents .right div.dateBox ul li span  { display: block; font-size: 14px; line-height: 1; margin: 0; padding: 0;}

/*=====================================================================
【共用】キャッチコピー
=======================================================================*/
.catchcopybox { width: 470px; margin:15px auto; }
.catchcopy { font-size: 18px; font-weight: bold; color: #555; line-height: 30px; /*border-bottom: solid 3px #A3D3FB;*/ }
    
    


/*=====================================================================
【共用】スケジュールテーブル
=======================================================================*/
.Detail { margin-bottom:60px; }

.Detail table { border-collapse:collapse; border-spacing:0; color:#464646; font-size:15px; line-height:2em; margin:0 auto; width:780px; z-index:-1; }
.Detail caption { display:none; }

.Detail tr { background:#fff; }
.Detail th { color:#fff; font-weight:700; padding:10px; text-align:left; }
.Detail td { padding:10px; vertical-align:middle; }
.Detail td:first-child { width:130px; }

/* #sec01（青）
--------------------------------------------*/
#sec01 .Detail tr { border-left:1px solid #268ad1; border-right:1px solid #268ad1; }
#sec01 .Detail tr:last-child { border-bottom:1px solid #268ad1; }
#sec01 .Detail tr:nth-child(odd) { background:#dbf0ff; }
#sec01 .Detail th { background:#268ad1;}

/* #sec02（ピンク）
--------------------------------------------*/
#sec02 .Detail tr { border-left:1px solid #ff82bd; border-right:1px solid #ff82bd; }
#sec02 .Detail tr:last-child { border-bottom:1px solid #ff82bd; }
#sec02 .Detail tr:nth-child(odd) { background:#ffe5f1; }
#sec02 .Detail th { background:#ff82bd;}

/* #sec03（パープル）
--------------------------------------------*/
#sec03 .Detail tr { border-left:1px solid #b27bde; border-right:1px solid #b27bde; }
#sec03 .Detail tr:last-child { border-bottom:1px solid #b27bde; }
#sec03 .Detail tr:nth-child(odd) { background:#fae6ff; }
#sec03 .Detail th { background:#b27bde;}

/* #sec04（赤）
--------------------------------------------*/
#sec04 .Detail tr { border-left:1px solid #ff7992; border-right:1px solid #ff7992; }
#sec04 .Detail tr:last-child { border-bottom:1px solid #ff7992; }
#sec04 .Detail tr:nth-child(odd) { background:#ffe6ea; }
#sec04 .Detail th { background:#ff7992;}

/* #sec05（サンゴ）
--------------------------------------------*/
#sec05 .Detail tr { border-left:1px solid #fb86a4; border-right:1px solid #fb86a4; }
#sec05 .Detail tr:last-child { border-bottom:1px solid #fb86a4; }
#sec05 .Detail tr:nth-child(odd) { background:#ffebf0; }
#sec05 .Detail th { background:#fb86a4;}

/* #sec06（黄緑）
--------------------------------------------*/
#sec06 .Detail tr { border-left:1px solid #57da57; border-right:1px solid #57da57; }
#sec06 .Detail tr:last-child { border-bottom:1px solid #57da57; }
#sec06 .Detail tr:nth-child(odd) { background:#e5ffe5; }
#sec06 .Detail th { background:#57da57;}

/* #sec07（アクアブルー）
--------------------------------------------*/
#sec07 .Detail tr { border-left:1px solid #32d2f4; border-right:1px solid #32d2f4; }
#sec07 .Detail tr:last-child { border-bottom:1px solid #32d2f4; }
#sec07 .Detail tr:nth-child(odd) { background:#dbf0ff; }
#sec07 .Detail th { background:#32d2f4;}



/*================================================
  SP
================================================*/
@media (max-width: 767px) {

/*------------------------------
content-wrap
------------------------------*/
.content-wrap { width:100%; }
.content-wrap img{ width:100% !important; }
.content-wrap a{ text-decoration: underline;}
.contentsBox  { width:90%; margin: 15px auto ; padding-top: 1%; padding-bottom: 5%;}
.contentsBox .btn { width: 70%; padding-bottom: 4%; margin: 0 auto;}
    
/*=====================================================================
【SP】【共用】概要
=======================================================================*/
.contentsDetail{ width:100%;}  
.contentsDetail .contents { padding: 4%;}    
.contentsDetail .contents .left { display: block; font-size: 15px; width: 100%;}
.contentsDetail .contents .right { display: block; margin: 0 auto; padding: 3% 0 0 0; width: 100%;}
.contentsDetail .title span { font-size:18px;}    

/*右側のイメージの位置（強制）*/
.contentsDetail .contents .right img { height: auto; margin-top: 0 !important; width: 100%;}
	
/*=====================================================================
【共用】キャッチコピー
=======================================================================*/
.catchcopybox { width: 100%; margin:15px auto; }
.catchcopy { font-size: 18px; font-weight: bold; color: #555; line-height: 30px; /*border-bottom: solid 3px #A3D3FB;*/ }
	
/*=====================================================================
SNS
=======================================================================*/
#fb_tw {width: 172px; height: 20px; margin: 10px 4% 25px auto; line-height: 0.6;}

.fb-like {height:20px;}

/*=====================================================================
【SP】【共用】スケジュールテーブル
=======================================================================*/
.Detail { width: 100%;}
.Detail caption { font-size: 18px; font-weight: bold; color: #fff; padding: 1% 0; margin: 3% 0; display: block;}/* SPのみ表示見出し */
.Detail br,
colgroup { display: none;}

.Detail .sp_view { display: none;}
.Detail table {border-collapse: separate; border-spacing: 0; width: 100%; text-align: center;}
.Detail th,
.Detail td {display: block; -webkit-box-sizing:border-box; box-sizing:border-box;}
.Detail td>a { display: block; -webkit-box-sizing:border-box; box-sizing:border-box;}   
.Detail td:first-child { color: #fff; padding: 2% 0; width: 100%;}

/* 【SP】#sec01（青）
--------------------------------------------*/
#sec01 .Detail caption { background: #055d93;}
#sec01 .Detail th,
#sec01 .Detail td { border: 1px solid #268ad1;}
#sec01 .Detail td:first-child { background: #268ad1;}

/* 【SP】#sec02（ピンク）
--------------------------------------------*/
#sec02 .Detail caption { background: #b52969;}
#sec02 .Detail th,
#sec02 .Detail td { border: 1px solid #ff82bd;}
#sec02 .Detail td:first-child { background: #ff82bd;}

/* 【SP】#sec03（パープル）
--------------------------------------------*/
#sec03 .Detail caption { background: #6e24a1;}
#sec03 .Detail th,
#sec03 .Detail td { border: 1px solid #b27bde;}
#sec03 .Detail td:first-child { background: #b27bde;}

/* 【SP】#sec04（赤）
--------------------------------------------*/
#sec04 .Detail caption { background: #c42c48;}
#sec04 .Detail th,
#sec04 .Detail td { border: 1px solid #ff7992;}
#sec04 .Detail td:first-child { background: #ff7992;}

/* 【SP】#sec05（サンゴ）
--------------------------------------------*/
#sec05 .Detail caption { background: #a22d4c;}
#sec05 .Detail th,
#sec05 .Detail td { border: 1px solid #fb86a4;}
#sec05 .Detail td:first-child { background: #fb86a4;}
    
/* 【SP】#sec06（黄緑）
--------------------------------------------*/
#sec06 .Detail caption { background: #057022;}
#sec06 .Detail th,
#sec06 .Detail td { border: 1px solid #02c402;}
#sec06 .Detail td:first-child { background: #02c402;}    

/* 【SP】#sec07（アクアブルー）
--------------------------------------------*/
#sec07 .Detail caption { background: #32d2f4;}
#sec07 .Detail th,
#sec07 .Detail td { border: 1px solid #32d2f4;}
#sec07 .Detail td:first-child { background: #32d2f4;}
 

    
}