@charset "UTF-8";


@media screen and (min-width: 768px),print {  

#contentsmain {margin: -30px auto 112px auto;position: relative;}
#contentsmain .inner-Box { margin: 0 auto; position: relative; }
#contentsmain .inner-Box .img {position: relative;top: 0;left: 0;width: 82.57vw;margin-left: 11.3vw;}
#contentsmain .inner-Box figure.mimg img{width: 100%;height: auto;}

#contentsmain .inner-Box .img span { position: absolute; }
#contentsmain .inner-Box .img span img{ width: 100%; height: auto;}

#contentsmain .inner-Box .img #mmicon01{top: 6.9vw;left: 19.8vw;width: 6.7vw;  animation-name: floatA;
  animation-duration: 4s;  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;}
#contentsmain .inner-Box .img #mmicon02{top: 9.7vw;left: 27.2vw;width: 6.7vw;  animation-name: floatB;
  animation-duration: 5s;  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;}
#contentsmain .inner-Box .img #mmicon03{top: 8.2vw;left: 57.1vw;width: 6.1vw;  animation-name: floatC;
  animation-duration: 3.5s;  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;}
#contentsmain .inner-Box .img #mmicon04{top: 11.9vw;left: 65vw;width: 6.9vw;  animation-name: floatD;
  animation-duration: 6s;  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;}

/* アニメーション定義 */
@keyframes floatA {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-0.5vw); }
  100% { transform: translateY(0); }
}
@keyframes floatB {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-0.8vw); }
  100% { transform: translateY(0); }
}
@keyframes floatC {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-0.4vw); }
  100% { transform: translateY(0); }
}
@keyframes floatD {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-0.6vw); }
  100% { transform: translateY(0); }
}

#contentsmain .inner-Box .img #boat01{bottom: 6.7vw;left: 19.3vw;width: 5vw;animation: shake 5s infinite; transform: rotate(10deg);}
#contentsmain .inner-Box .img #boat02{bottom: 9vw;left: 62vw;width: 7vw;animation: shake2 3s infinite; transform: rotate(7deg);}
@keyframes shake { 50% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } }
@keyframes shake2 { 50% { transform: rotate(-7deg); } 100% { transform: rotate(7deg); } }


#contentsmain .inner-Box h2 {position: absolute;top: 5vw;left: 6.7vw;width: 21.15vw;}
#contentsmain .inner-Box h2 span{  }
#contentsmain .inner-Box h2 img {width: 100%;height: auto;}

/* Animation */
#h2ttt{ overflow:hidden; transform:translateX(-100%); transition:transform 1s cubic-bezier(0.215,0.61,0.355,1); will-change:transform; }
#h2ttt span{ display:block; transform:translateX(100%); transition:transform 1s cubic-bezier(0.215,0.61,0.355,1); will-change:transform; }
#h2ttt.-visible, #h2ttt.-visible span{ transform:translateX(0); }

#contents01 {margin: 0 auto 261px;position: relative;max-width: 1430px;padding: 0 5rem;}
#contents01 .inner-Box { margin: 0 auto; position: relative; }
#contents01 .inner-Box h2 {font-size: 3.2rem;line-height: 2;font-weight: 700;letter-spacing: 0.16rem;margin-bottom: 55px;position: relative;text-align: center;}
#contents01 .inner-Box h2 span {  }
#contents01 .inner-Box ul{display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#contents01 .inner-Box ul li {position: relative;width: 19%;margin-right: 8%;text-align: center;  opacity: 0; transform: translateY(20px); transition: all 0.6s ease;}
#contents01 .inner-Box ul li.fade-in { opacity: 1; transform: translateY(0); }
#contents01 .inner-Box ul li:nth-child(2n){top: 80px;}
#contents01 .inner-Box ul li:nth-child(4n) { margin-right: 0px; }
#contents01 .inner-Box figure.img {position: relative;top: 0;left: 0;margin-bottom: 35px;}
#contents01 .inner-Box figure.img img{width: 100%;height: auto;}
#contents01 .inner-Box h3 {font-size: 2.2rem;line-height: 1.33;font-weight: 700;letter-spacing: 0.11rem;margin-bottom: 15px;position: relative;text-align: center;}
#contents01 .inner-Box p.ltext {font-size: 1.4rem;line-height: 1.8;font-weight: 400;letter-spacing: 0.08rem;margin: 0 -3.6rem 2rem;position: relative;text-align: left;}
#contents01 .inner-Box ul li .morebtn a{position: relative;width: auto;}


#topics-section {position: relative;overflow: hidden;margin-bottom: 16rem;background: #F3F5FA;border-radius: 2.5rem 0 0 2.5rem;margin-left: 11.04vw;padding-left: 9rem;}      
#topics-section .topics-inner {max-width: 1350px;padding: 114px 5rem 54px;/* margin: 0 auto; */position: relative;z-index: 2;}      

#topics-section .topics-inner h2{font-size: 3.4rem;font-weight: bold;letter-spacing: 0.102rem;margin-left: 6px;margin-bottom: 62px;}
#topics-section .topics-inner h2 .f-en{font-size: 1.4rem;font-weight: bold;color: #0057AA;display: block;margin-bottom: 13px;position: relative;right: 6px;}
#topics-section .topics-inner h2 .f-en img{display: inline-block;margin: 0 15px 0 0;position: relative;top: -4px;left: 5px;}
#topics-section .topics-inner .morebtn{position: absolute;top: 148px;right: 75px;}
#topics-section .topics-inner .morebtn a{padding-left: 55px;}

#topics .system-list{padding: 1px;margin-bottom: 50px;}
#topics .system-list li{/* overflow: hidden; */line-height: 1.4;margin-bottom: 35px;border-bottom: #D2D2D2 1px solid;}
#topics .system-list li a{display: block;width: 100%;text-align: left;padding-bottom: 33px;}
#topics .system-list li a:hover{ text-decoration: none;}
#topics .system-list li .text-box {display: flex;flex-wrap: wrap;align-items: flex-start;gap: 0;}
#topics .system-list li .system-date {width: 280px;flex-shrink: 0;position: relative;padding: 3px 0 0 136px;}
#topics .system-list li .system-date .dayt{font-size: 1.4rem;font-weight: 500;position: absolute;top: 8px;left: 13px;}
#topics .system-list li .system-date .cate{font-size: 1.2rem;border: 1px solid #D2D2D2;border-radius: 30px;display: inline-block;background: #fff;padding: 6px 34px;margin-bottom: 5px;}
#topics .system-list li .system-ttl-01 {flex: 1;padding: 6px 56px 6px 6px;display: inline-block;}
#topics .system-list li a.link-arr .post-arrow{right: 52px;}
      
      
      


}
@media screen and (min-width:768px) and ( max-width:1800px) {



}
@media screen and (min-width:768px) and ( max-width:1450px) {
#contents01 .inner-Box p.ltext {margin: 0 0rem 2rem;}



}

@media screen and (min-width:768px) and ( max-width:1000px) {

#topics-section {margin-left: 6.04vw;padding-left: 5rem;}      



  }
  
  

@media screen and (max-width: 767px) {



  #contentsmain .inner-Box .img span { position: absolute; }
  #contentsmain .inner-Box .img span img{ width: 100%; height: auto;}
  
  #contentsmain .inner-Box .img #mmicon01{
    top: 12vw;
    left: 9.8vw;
    width: 9.4vw;
    animation-name: floatA;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }
  #contentsmain .inner-Box .img #mmicon02{
    top: 16vw;
    left: 20.8vw;
    width: 9vw;
    animation-name: floatB;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }
  #contentsmain .inner-Box .img #mmicon03{
    top: 13.7vw;
    left: 63.9vw;
    width: 8.1vw;
    animation-name: floatC;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }
  #contentsmain .inner-Box .img #mmicon04{
    top: 20vw;
    left: 75.1vw;
    width: 9.4vw;
    animation-name: floatD;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }
  
  /* アニメーション定義 */
  @keyframes floatA {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-0.5vw); }
    100% { transform: translateY(0); }
  }
  @keyframes floatB {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-0.8vw); }
    100% { transform: translateY(0); }
  }
  @keyframes floatC {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-0.4vw); }
    100% { transform: translateY(0); }
  }
  @keyframes floatD {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-0.6vw); }
    100% { transform: translateY(0); }
  }
  
  #contentsmain .inner-Box .img #boat01{left: 9.3vw;width: 7vw;animation: shake 5s infinite;transform: rotate(10deg);top: 54vw;}
  #contentsmain .inner-Box .img #boat02{top: 49vw;left: 70vw;width: 10vw;animation: shake2 3s infinite;transform: rotate(7deg);}
  @keyframes shake { 50% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } }
  @keyframes shake2 { 50% { transform: rotate(-7deg); } 100% { transform: rotate(7deg); } }
  

  #contentsmain {margin: 7vw auto 7.77vw auto;position: relative;}
  #contentsmain .inner-Box {position: relative;}
  #contentsmain .inner-Box figure.img {position: relative;top: 0;left: 0;margin-bottom: 7.9vw;}
  #contentsmain .inner-Box figure.img img{width: 100%;height: auto;}
  #contentsmain .inner-Box h2 {position: relative;margin: 8.6vw 25vw 0 24.8vw;}
  #contentsmain .inner-Box h2 span{  }
  #contentsmain .inner-Box h2 img {width: 100%;height: auto;}
  
  /* Animation */
  #h2ttt{ overflow:hidden; transform:translateX(-100%); transition:transform 1s cubic-bezier(0.215,0.61,0.355,1); will-change:transform; }
  #h2ttt span{ display:block; transform:translateX(100%); transition:transform 1s cubic-bezier(0.215,0.61,0.355,1); will-change:transform; }
  #h2ttt.-visible, #h2ttt.-visible span{ transform:translateX(0); }
  
  #contents01 {position: relative;margin-bottom: 5.9vw;}
  #contents01 .inner-Box {position: relative;}
  #contents01 .inner-Box h2 {font-size: 4.80vw;line-height: 1.8;font-weight: 700;letter-spacing: 0.24vw;margin: 0 6.3vw 9.77vw;position: relative;text-align: left;}
  #contents01 .inner-Box h2 span {  }
  #contents01 .inner-Box ul{display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;margin: 0 4.4vw;}
  #contents01 .inner-Box ul li {position: relative;width: 49%;margin-right: 2%;text-align: center;opacity: 0;transform: translateY(5.33vw);transition: all 0.6s ease;margin-bottom: 9vw;}
  #contents01 .inner-Box ul li.fade-in { opacity: 1; transform: translateY(0); }
  #contents01 .inner-Box ul li:nth-child(2n){ margin-right: 0; }
  #contents01 .inner-Box ul li:nth-child(4n) { margin-right: 0.0vw; }
  #contents01 .inner-Box figure.img {position: relative;top: 0;left: 0;margin: 0 3.3vw 3.93vw;}
  #contents01 .inner-Box figure.img img{width: 100%;height: auto;}
  #contents01 .inner-Box h3 {font-size: 4.00vw;line-height: 1.33;font-weight: 700;letter-spacing: 0.29vw;margin-bottom: 1.7vw;position: relative;text-align: center;}
  #contents01 .inner-Box p.ltext {font-size: 3.20vw;line-height: 1.6;font-weight: 400;letter-spacing: 0.16vw;margin: 0 -0.1vw 4vw;position: relative;text-align: left;}
  #contents01 .inner-Box p.morebtn a{ width: 100%;  }
  
  #topics-section {position: relative;overflow: hidden;margin-bottom: 0vw;background: #F3F5FA;padding-bottom: 3vw;}      
  #topics-section .topics-inner {padding: 12vw 1vw;margin: 0 4vw;position: relative;z-index: 2;}      
  #topics-section .bg-right {position: absolute;top: 0;right: 0; /* 右端基準で貼る */height: 100%;z-index: 1;background: #F3F5FA; /* 好きな色に */border-radius: 8.0vw 0 0 8.0vw;width: calc(42.67vw + (100vw + 0vw) / 2);display: none;}
  
  #topics-section .topics-inner h2{font-size: 6.40vw;font-weight: bold;letter-spacing: 0.27vw;margin-left: 1.6vw;margin-bottom: 7.93vw;}
  #topics-section .topics-inner h2 .f-en{font-size: 3.20vw;font-weight: bold;color: #0057AA;display: block;margin-bottom: 1.47vw;position: relative;right: 1.6vw;}
  #topics-section .topics-inner h2 .f-en img{display: inline-block;margin: 0 4.0vw 0 0;position: relative;top: -0.8vw;left: 1.33vw;width: 2.7vw;}
  #topics-section .topics-inner .morebtn{position: relative;}
  #topics-section .topics-inner .morebtn a{padding-left: 14.67vw;font-size: 4.27vw;text-align: center;padding: 3.7vw 0vw 0 0vw;height: 15vw;margin: 0 1.6vw;}
  #topics-section .topics-inner .morebtn a .arr{top: 6.5vw;right: 6vw;}
  #topics .system-list{padding: 0 1.67vw;margin-bottom: 10.33vw;}
  #topics .system-list li{/* overflow: hidden; */line-height: 1.4;margin-bottom: 6.53vw;border-bottom: #D2D2D2 0.27vw solid;}
  #topics .system-list li a{display: block;text-align: left;padding-bottom: 4.8vw;margin: 0;}
  #topics .system-list li a:hover{ text-decoration: none;}
  #topics .system-list li .text-box {display: flex;flex-wrap: wrap;align-items: flex-start;gap: 0;}
  #topics .system-list li .system-date {position: relative;padding: 0 0 0 21.57vw;width: 100%;margin-bottom: 1.5vw;}
  #topics .system-list li .system-date .dayt{font-size: 3.53vw;font-weight: 500;position: absolute;top: 1.43vw;left: 0.07vw;}
  #topics .system-list li .system-date .cate{font-size: 3.2vw;border: 0.27vw solid #D2D2D2;border-radius: 8.0vw;display: inline-block;background: #fff;padding: 1.5vw 4.07vw;margin-bottom: 1.33vw;letter-spacing: -0.2vw;margin-right: 1vw;}
  #topics .system-list li .system-ttl-01 {flex: 1;padding: 1.6vw 1.6vw;display: inline-block;}
  
}