/*
* @package Movable Type
* @subpackage Kouyou Printing
*/

/* Eyecatch
----------------------------------------------------------------------------------------------------*/
ul.slider-center li{margin-left:3px;}
/* layout
----------------------------------------------------------------------------------------------------*/
main#index{overflow:hidden;}
main#index div.wrap{padding:60px 0px;}
main#index section div.wrap.blue{background-color:#d3ecf3;}
main#index section div.wrap.white{background-color:#ffffff;}
main#index section div.wrap.grey{background-color:#fafafa;}
main#index h2{text-align:center; margin-bottom:40px;font-size:1.8rem;}
main#index h2 > small{display:table; border-bottom:double 4px #000000; margin:15px auto 0; padding:0 5px 5px; font-size: 63%;}


main#index .btn-default{max-width:480px;}
main#index .btn{position: relative;  width:100%; padding-right:33px; padding:.9rem 2rem .9rem 1rem;font-size: 1.1rem; }
main#index .btn:before,main#index .btn:after{
  position: absolute;
  content: '';
  display: block;
}
main#index .btn:before{
  right:.6em; top:0; bottom:0; margin:auto;
  width:23px; height:23px;
  border-radius:100%;
  -webkit-transition: all .3s;
  transition: all .3s;
}
main#index .btn:after{
  top:0; bottom:0;border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
  right: 1.1em;
  width: 8px;
  height: 8px;
  margin:auto;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

main#index .btn-default{letter-spacing:.15em; font-weight:600;}
main#index .btn-default:hover:after{border-right: 2px solid #1e2a88; border-bottom: 2px solid #1e2a88;}
main#index .btn-default:hover:before{background-color:#ffffff;}
main#index .btn-default:before{background-color:#1e2a88;}
main#index .btn-red:after{border-right: 2px solid #e5243b; border-bottom: 2px solid #e5243b;}
main#index .btn-red:before{background-color:#ffffff;}
main#index .btn-red:hover:before{background-color:#e5243b;}
main#index .btn-red:hover:after,main#index .btn-flat-default:hover:after{border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff;}
main#index .btn-flat-default:after{border-right: 2px solid #1e2a88; border-bottom: 2px solid #1e2a88;}
main#index .btn-flat-default:before{background-color:#ffffff;}
main#index .btn-flat-default:hover:before{background-color:#1e2a88;}

#index #eventinfo{background:#ffffff url(../img/wave-bg.png) repeat-x center top; background-size:1000px;padding-top:20px;}
#index #info div.wrap{padding-bottom:10px; margin-bottom:4em;}

#index #info .btn{margin-bottom:-1.5em;}

#index #info table{border:none; max-width:980px; margin:0 auto;}
#index #info table th{width:255px;}
main#index #info span.badge{border-radius: 0; font-weight:normal; min-width:100px; margin-left:20px; padding:6px; color:#ffffff; font-size:.9rem;}

main#index #pick div.wrap{position: relative; padding:0;}
div.pickwrap.container{max-width: 100%; padding:0;}
div.pickwrap > div{padding-top:60px; padding-bottom:60px;}
div.pickwrap > div.left{position: relative;}
div.pickwrap > div.right{background:#d3ecf3 url(../img/wave-bg02.png) no-repeat 0% 95%; background-size:30%;}
main#index #pick img.marine01{position: absolute; top:auto; bottom:-80px; left:80%; margin:auto; width:28%; z-index:2; animation: shake_8864 20s ease infinite; transform-origin: 50% 50%; }
@keyframes shake_8864 {
  0% { transform:rotate(-3deg) }
  25% { transform:rotate(3deg) }
  50% { transform:rotate(-3deg) }
  75% { transform:rotate(3deg) }
  100% { transform:rotate(-3deg) }
}
main#index #pick img.marine02{position: absolute; bottom:auto; top:97%; left:-10px; z-index:-1; width:27%; animation: spin_7953 20s linear infinite; transform-origin: 50% 50%; }
@keyframes spin_7953 {
  0% { transform:rotate(0deg) }
  100% { transform:rotate(359deg) }
}
main#index #pick img.ball{display:none; position: absolute; right:10px; bottom:0; width:250px; animation: float_333 3s linear infinite; transform-origin: 50% 50%; }
@keyframes float_333 {
  0% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}

main#index #pick p.h6{font-weight:600;}
main#index #pick div.left div.row p{margin-bottom:10px;}
main#index #pick div.left h2 > div{background-color:#1e2a88; margin-top:40px; color:#ffffff; display:inline-block; padding:10px 20px;transform:skewX(-20deg); font-size:1.2rem; font-weight:550;}
main#index #pick div.left h2 span{transform:skewX(20deg); display:block;}
main#index #pick div.left ul{list-style-type:none; padding:0; margin:0;}
main#index #pick div.left ul > li{font-size:.95rem;}
main#index #pick div.left ul i{display:inline-block; margin-right:5px; color:#1e2a88;}
main#index #pick .pickup{position: relative;}
main#index #pick .pickup div.p_area{display:flex; justify-content:center; margin-bottom:20px;}
main#index #pick .pickup div.p_area > div{position: relative; display:flex; justify-content:center; max-width:80%;align-items:center; flex-shrink: 1; border:1px solid #eeeeee; z-index:1;}
main#index #pick .pickup div.p_area a img{width:100%;}
main#index #pick .pickup img.p_photo{width:100%;}
main#index #pick .pickup img.p_icon{position: absolute; top:0; left:0; width:75px; z-index:1;}
main#index #pick div.pickwrap > div.right h2 > div{color:#1e2a88; border-bottom:double 4px #1e2a88; display:inline-block; padding-bottom:5px; font-size:1.4rem; font-weight:550;}

main#index #pick div.right div.row > div{margin-bottom:30px;}
main#index #pick div.right div.row p{margin-bottom:3px;}
main#index #pick div.right div.row i{display:inlone-block; margin-right:5px;}
main#index #pick div.right div.row > div span.badge{color:#ffffff; padding: 5px 10px; border-radius: 0; font-weight: 500; font-size: 0.9rem; width: 130px; margin-bottom:10px;}
main#index #pick div.right div.row >div.blue span.badge{background-color:#2e99ce;}
main#index #pick div.right div.row >div.green span.badge{background-color:#519f45;}
main#index #pick div.right div.row >div.pink span.badge{background-color:#da356c;}
main#index #pick div.right div.row > div figure.img_wrap img.p_icon{position: absolute; top: 0; left: 0; width: 75px; z-index: 2; transform:none;}


div.add{display:flex; justify-content:center; max-width: 1030px; margin: 0 auto;}
div.add a{display:inline-block; margin: 0 10px;}
div.add img{max-width:100%; width:100%;}
div.add .slick-prev{left: 0;}
div.add .slick-next{right: 0;}
@media (min-width:575px) {
  div.add{width: 90%;}
}
@media (min-width:768px) {
div.add{max-width: 1030px; width:100%;}
div.add img{max-width:290px; width:100%;}
div.add .slick-list{margin: 0 50px; background-color:transparent; }
}

/* Slider eye catch*/
#eye{padding:0 0 2em;position:relative; height:50% !important;}
#eye > div.ab{position:relative;}
/*#eye img.eye_sm{position: absolute; top:5%;}*/
#eye img.eye_01,
#eye img.eye_02,
#eye img.eye_03,
#eye img.eye_04,
#eye img.eye_05,
#eye img.eye_06,
#eye img.eye_07,
#eye img.eye_08
{display:none;}
@keyframes float_9323{
  0% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}

/* add by soraha media query
----------------------------------------------------------------------------------------------------*/
div.pickwrap > div.right p.h6{margin-bottom:30px;}
@media (min-width:992px) {
  div.pickwrap.container{max-width: 960px; padding-left:15px; padding-right:15px;}
  div.pickwrap > div{padding-left:0; padding-right:0; }
  div.pickwrap > div.left{flex-basis:25%; max-width:25%;padding-right:30px; padding-top:30px;background:none;}
  div.pickwrap > div.right{flex-basis:75%; max-width:75%; padding-left:30px;}
  div.pickwrap > div > .container{width:100%; padding:0;}
  main#index #pick div.wrap:before{
    content:'';
    display:block;
    position:absolute;
    background-color:#d3ecf3;
    width:50%;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
  }
  main#index #pick img.marine01{width:24%; bottom:90%; left:76%; z-index:1;}
  main#index #pick img.marine02{width:27%; top:auto; bottom:-200px;}
  main#index #pick img.ball{max-width:400px; width:20%; bottom:-80px; display:block; right:8%;}
}

@media (min-width:992px) {
  #eye{padding-bottom:14%;}
  #eye > div.ab{position:static;}
  #eye > div.ab img{position: absolute;}
  #eye img.eye_logo{width:40%; margin:auto; left:0; right:0; margin-top:-7em;}
  #eye img.eye_01,
  #eye img.eye_02,
  #eye img.eye_03,
  #eye img.eye_04,
  #eye img.eye_05,
  #eye img.eye_06,
  #eye img.eye_07,
  #eye img.eye_08
  {display:block; animation: float_9323 4s linear infinite; transform-origin: 50% 50%;}
  #eye img.eye_01{left:11.5%; top:44%; animation-delay: -1s; width:7%;}
  #eye img.eye_02{bottom:17%; left:17%; animation-delay: -2s; width:11%;}
  #eye img.eye_03{bottom:-15%; left:9%; width:10%;}
  #eye img.eye_04{bottom:-18%; left:29%;animation-delay: -1s; width:6%;}
  #eye img.eye_05{top:36%; right:6.5%;animation-delay: -2s; width:9%;}
  #eye img.eye_06{bottom:5%; right:12%; width:13%;}
  #eye img.eye_07{bottom:-5%; right:8%; animation-delay: -1s; width:5%;}
  #eye img.eye_08{bottom:-15%; right:25%;animation-delay: -2s; width:9%;}
}

.main_visual{
  width: 100%;
  margin-bottom: 0px;
  padding:1.5em 0 ;
  background:url(../img/dot.png) repeat;
}
.main_visual img{
  max-width: 100%;
}
.slider-center{ padding:0; margin:0;}
.slider-center img{
  width: 100%;
}

main#index #info table.topics > tbody > tr > th,main#index #info table.topics > tbody > tr > td{vertical-align: middle;}
@media (max-width: 991px) {
  main#index #info .container{padding:0;}
  main#index #info .container > *:not(.container_s){padding-left:15px;padding-right:15px;}
  main#index #info table.topics > tbody > tr > th,main#index #info table.topics > tbody > tr > td{display:block;}
  main#index #info table > tbody > tr > th{width:100% ;border:none !important; padding-bottom:0; padding:.75rem .75em 0 .75em ; }
  #info table td{padding:.75rem;}
  #info table > tbody > tr:nth-child(n+3){display:none;}
}

@media (max-width: 991px) {
  /* スライダーオブエクと間のパディング削除 */
  ul.slider-center li{margin-left:0px;}
  /*上下のパディング削除　*/
  .main_visual{padding:0;}
  /*ロゴの大きさをスマフォサイズに変更 */
  header > nav h1 img{max-width:200px !important; width: 100%;}
  /*トップ　アイキャッチ下の微調整 */
  /* #eye img.eye_sm {position:absolute;} */
  #eye img.eye_logo_sm{position:absolute; top:25%; left:24%; width:50%;}
  /* お知らせ上の波の個数を変更　*/
  #eye div.ab{  margin-top:-10%;}
  #eye{margin-bottom:0 !important;}
  main#index #info{  /* background:#ffffff url(../img/wave-bg.png) repeat-x center top; margin-top:30% !important;　*/ background-size:380px;  padding-top:15px !important;}
  /*wrapの補正*/
  main#index div.wrap{padding:40px 0px;}
  /*h2の補正 */
  main#index h2{text-align:center; margin-bottom:20px; font-size:1.4em; margin-top:-10px !important; }
  main#index h2 > small{display:table; border-bottom:double 4px #000000; margin:10px auto 0; padding:0 5px 5px; font-size: 63%;}
  /* 両端のpadding補正　*/
  main#index #info .container {padding:0 0 40px 0; margin-bottom:0px;}
  main#index #info .container_s th, main#index #info .container_s td{padding-left:20px; padding-right:20px;}
  /*お知らせボタン幅調整*/
  main#index a.btn{width:85%;}
  /*pickup上　padding調整 */
  main#index #pick div.left{margin-top:-30px;  padding-top:0; padding-bottom:20px;}
  /*marin01の微調整*/
  main#index #pick img.marine01{bottom: -60px; width:45%; left: 70%;}
  /*協賛企業ボタン調整*/
  main#index #pick h2.h5{font-size: 1.2em;}
  main#index #pick h2.h5 div{padding:5px 10px !important; width:auto;}
  /*pickup上　right padding調整 */
  main#index #pick div.right{margin-top:-10px;  padding-top:40px; padding-bottom:20px;}
  /* 波とかもめの背景画像調整*/
  div.pickwrap > div.right{background-size:65%;}

  main#index .btn:before{
    width:15px; height:15px;
  }
  main#index .btn:after{
    right: 1.0em;
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 780px) {
  /*ロゴの大きさをスマフォサイズに変更 */
  header > nav h1 img{max-width:150px !important; width: 100%;}
}

@media (min-width:1200px) {
  div.pickwrap.container{max-width: 1280px;}
}