@charset "UTF-8";

/* ==================================================

  HTML5 Reset+

================================================== */
a{
color:#000;
text-decoration:none;
}

a:link{
}

a:visited{
}

a:hover{
text-decoration:underline;
color:#A367A8;
}

/*a:active{
text-decoration:underline;
}*/

a:focus{
outline:none;
}

li{
list-style:none;
}

img{
vertical-align:bottom;
}

em{
font-style:normal;
}

h1,h2.h3,h4,h5,h6,strong{
font-weight:normal;
}

/* ==================================================

  Default

================================================== */

body{
background-color:#fff;
font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
color:#3a3937;
}
#wrapper{margin:0 auto;}

/* --------------- header -------------------- */

header{background:url(/common/images/v2/hawaii2017/header-bg.png) repeat-x top;}
header #logo{padding:26px 0 20px;}
header #logo a{display:block;text-align:center;}
header #logo a img{width:168px;height:39px;}

/* --------------- main ---------------------- */
#main .main-image{max-width:1440px;margin:0 auto;}
#main .main-image img{width:100%;}

/* -------------- columnlist ------------------------ */
#column-list{width:1004px;margin:25px auto;}
#column-list .heading{width:840px;height:144px;margin:0 auto 25px;display:block;text-indent:200%;overflow:hidden;white-space:nowrap;background:url(/common/images/v2/hawaii2017/main-title.png) no-repeat center;}
#column-list p{font-size:14px;line-height:1.6;text-indent:1em;}
#column-list ul{margin-top:40px;}
#column-list ul::after{content:"";display:block;clear:both;}
#column-list ul li{float:left;width:325px;height:244px;display:block;overflow:hidden;margin:0 14px 11px 0;}
#column-list ul li:nth-child(3n){margin-right:0;}
#column-list ul li:nth-child(3n+1){clear:both;}
#column-list ul li a{display:block;position:relative;}
#column-list ul li .icon img{width:100%;}
#column-list ul li .title{display:block;position:absolute;bottom:0;right:0;left:0;padding:5px 3px;color:#fff;font-size:14px;line-height:1.4;background:rgba(0,0,0,0.6);}
#column-list ul li a:hover .title{color:#66b7c3;text-decoration:underline;}
#column-list .more a{width:468px;height:70px;display:block;cursor:pointer;margin:40px auto 0;border:solid 2px #d3d3d3;font-size:14px;line-height:70px;box-sizing:border-box;text-align:center;font-weight:bold;}
#column-list .more a:hover{background:#66bbcc;border-color:#66bbcc;color:#fff;text-decoration:none;}

/* -------------- movielist ------------------------ */
#movie-list{width:1004px;margin:60px auto;}
#movie-list .heading{width:355px;height:144px;margin:0 auto 25px;display:block;text-indent:200%;overflow:hidden;white-space:nowrap;background:url(/common/images/v2/hawaii2017/movie-title.png) no-repeat center;}
#movie-list ul{margin:40px 0;}
#movie-list ul::after{content:"";display:block;clear:both;}
#movie-list ul li{width:494px;margin-bottom:15px;}
#movie-list ul li:nth-child(odd){float:left;clear:right;}
#movie-list ul li:nth-child(even){float:right;}
#movie-list ul li div{width:100%;position:relative;padding-top:56.25%;}
#movie-list ul li iframe{width:100%;height:100%;position:absolute;top:0;left:0;}
#movie-list p{font-size:14px;line-height:1.6;text-indent:1em;}
#movie-list p a{color:#66bbcc;}


/* -------------- campaign ------------------------ */
#campaign{padding:40px 0 60px;background:#e7f4f7;}
#campaign .inner-block{width:705px;margin:0 auto;}
#campaign .heading{width:360px;height:108px;margin:0 auto 20px;display:block;text-indent:200%;overflow:hidden;white-space:nowrap;background:url(/common/images/v2/hawaii2017/campaign-title.png) no-repeat center;}

#campaign ul li::after{content:"";display:block;clear:both;}
#campaign ul li{margin-bottom:15px;}
#campaign ul li:last-child{margin-bottom:0;}
#campaign ul li .icon{width:192px;display:block;float:left;}
#campaign ul li .icon img{border:5px solid #fff;width:192px;height:142px;object-fit:cover;}
#campaign ul li .text{float:right;display:block;width:480px;}
#campaign ul li .text .cat{display:block;font-size:14px;color:#999;margin-top:5px;}
#campaign ul li .text .title{display:block;margin-top:15px;font-size:14px;color:#66bbcc;line-height:1.4;}
#campaign ul li .text .title:hover{text-decoration:underline;}

#campaign ul li .category{
height:11px;
width:39px;
display:inline-block;
margin-top:3px;
background:transparent url("/common/images/v2/UI-Sprite.png") no-repeat 0 -160px;/* css-image */
text-indent:150%;
overflow:hidden;
white-space:nowrap;
}

#campaign ul li .category.beauty{width:39px;background-position:0 -160px;}
#campaign ul li .category.travel{width:39px;background-position:-49px -160px;}
#campaign ul li .category.gourmet{width:49px;background-position:-98px -160px;}
#campaign ul li .category.baby{width:29px;background-position:-157px -160px;}
#campaign ul li .category.culture{width:44px;background-position:-196px -160px;}
#campaign ul li .category.fashion{width:44px;background-position:-250px -160px;}
#campaign ul li .category.life_style{width:49px;background-position:-304px -160px;}

#campaign ul li .feature{
height:11px;
width:44px;
display:inline-block;
margin-top:3px;
background:transparent url("/common/images/v2/UI-Sprite.png") no-repeat 0 -180px;/* css-image */
}

#campaign ul li .column{
height:11px;
width:44px;
display:inline-block;
margin-top:3px;
background:transparent url("/common/images/v2/UI-Sprite.png") no-repeat -54px -180px;/* css-image */
}

/* ---------- banner ------------- */
#banner-area{background-image:url(/common/images/v2/hawaii2017/footer-bg.png);background-repeat:no-repeat;background-position:center bottom;background-color:#c2e4eb;padding:40px 0 150px;}
#banner-area .banner{width:730px;margin:0 auto;}

/* ------ footer ------------- */
footer{background:#66bbcc;color:#fff;padding:40px 0 300px;}
footer .copy{display:block;text-align:center;font-size:12px;}


/* -------------------------------------------------------------
iPad用
----------------------------------------------------------------- */
/*768px*/
@media only screen
and (max-width:1024px){

  header #logo a{width:60%;height:30px;margin:auto;}

 /* -------------- columnlist ------------------------ */
 	#column-list{width:85%;}
 	#column-list .heading{width:90%;height:90px;background-size:contain;}
 	#column-list .more{width:100%;}
 	#column-list ul li{width:49%;margin:0 0 .8em 0;height:auto;}
 	#column-list ul li:nth-child(odd){float:left;clear:right;}
 	#column-list ul li:nth-child(even){float:right;}
 	#column-list ul li:nth-child(3n+1){clear:none;}
 	#column-list ul li:nth-child(18n){float:right !important;}
 	#column-list ul li:last-child{float:none;margin:0 auto .8em;}

 /* -------------- movielist ------------------------ */
  #movie-list{width:85%;}
  #movie-list .heading{width:90%;height:120px;background-size:contain;}
  #movie-list ul li{width:100%;}
  #movie-list ul li:nth-child(odd),
  #movie-list ul li:nth-child(even){float:none;}

 /* -------------- campaign ------------------------ */
  #campaign .inner-block{width:85%;}
  #campaign .heading{width:90%;height:90px;background-size:contain;}
  #campaign ul li .icon{width:30%;}
  #campaign ul li .icon img{box-sizing:border-box;}
  #campaign ul li .text{width:65%;float:left;margin-left:1em;}
  
 /* ---------- banner ------------- */
 	#banner-area .banner{width:95%;}
 	#banner-area .banner img{width:100%;}
}