@charset "UTF-8";

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

  HTML5 Reset+

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

a:link{
}

a:visited{
}

a:hover{
text-decoration:underline;
}

/*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:'Lato', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Yu Gothic', Meiryo, メイリオ, sans-serif;
color:#3a3937;
}
#wrapper{margin:0 auto;}

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

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:1027px;margin:60px auto 80px;}
#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:16px;line-height:32px;color:#333;}
#column-list ul{margin-top:60px;}
#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 26px 26px 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 a:hover{opacity:0.8;}
#column-list ul li .icon img{width:100%;}
#column-list ul li .title{display:block;position:absolute;bottom:0;right:0;left:0;color:#333;padding:12px;font-size:16px;font-weight:bold;line-height:20px;background:rgba(255,255,255,0.6);}
#column-list .more a{width:468px;height:70px;display:block;cursor:pointer;margin:40px auto 0;border:solid 1px #666;font-size:16px;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:1027px;margin:60px auto;}
#movie-list .youtube{margin:50px 0;display:block;width:100%;position:relative;padding-top:56.25%;}
#movie-list .youtube iframe{width:100%;height:100%;position:absolute;top:0;left:0;}
#movie-list p{font-size:16px;color:#333;line-height:32px;}
#movie-list p a{color:#4f9dd0;}


/* -------------- campaign ------------------------ */
#campaign{padding:80px 0;background:#d1d8d8;}
#campaign .inner-block{width:705px;margin:0 auto;}
#campaign .heading{width:393px;height:47px;margin:0 auto 50px;display:block;text-indent:200%;overflow:hidden;white-space:nowrap;background:url(/common/crea/images/hakken-hawaii/campaign-title.png) no-repeat center;}

#campaign ul li::after{content:"";display:block;clear:both;}
#campaign ul li{margin-bottom:28px;display:table;}
#campaign ul li:last-child{margin-bottom:0;}
#campaign ul li a{display:block;color:#333;}
#campaign ul li a:hover{opacity:0.6;}
#campaign ul li .icon{width:260px;display:table-cell;vertical-align:middle;}
#campaign ul li .icon img{border:3px solid #333;width:260px;object-fit:cover;}
#campaign ul li .text{display:table-cell;width:480px;vertical-align:middle;padding-left:20px;}
#campaign ul li .text .title{display:block;margin-top:15px;font-size:15px;font-weight:bold;color:#333;line-height:30px;}
#campaign ul li .text .title:hover{text-decoration:underline;}


/* ---------- banner ------------- */
#banner-area{background-color:#c0c6c5;padding:80px 0;}
#banner-area .banner{text-align:center;}

/* ------ footer ------------- */
footer{background:url(/common/crea/images/hakken-hawaii/footer-bg.png);padding:40px 0 300px;}
footer .copy{display:block;text-align:center;font-size:20px;color:#fff;}


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

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

 /* -------------- columnlist ------------------------ */
 	#column-list{width:90%;}
 	#column-list .heading{width:90%;height:90px;background-size:contain;}
 	#column-list .more a{width:40%;}
 	#column-list ul li{width:48%;margin:0 0 1.5em 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;}

 /* -------------- movielist ------------------------ */
  #movie-list{width:90%;}

 /* -------------- campaign ------------------------ */
  #campaign{padding:44px 0;}
  #campaign .inner-block{width:85%;}
  #campaign .heading{width:50%;height:60px;background-size:contain;margin-bottom:20px;}
  #campaign ul li{display:block;}
  #campaign ul li .icon{display:block;margin:auto;}
  #campaign ul li .icon img{box-sizing:border-box;}
  #campaign ul li .text{width:260px;display:block;margin:auto;padding-left:0;}
  
 /* ---------- banner ------------- */
 	#banner-area .banner{width:80%;margin:auto;}
 	#banner-area .banner img{width:100%;}
}