@charset "UTF-8";

/* reset
------------------------------------------------- */
html, body, h1, h2, h3, h4, p, ul, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  opacity: 0.5;
  transition: 0.5s;
}
img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

/* body
--------------------------------------------------- */
html {
  font-size:62.5%;
}
body {
  font-size: 1.6rem;
  background: #fff;
}

/* loading
--------------------------------------------------- */
#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1002;
  background:#fff;
  text-align:center;
  color:#fff;
}

#loading_logo {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loading_logo img {
  width:100%;
}

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(20px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* header
--------------------------------------------------- */
.header {
  position   : relative;
  min-height: 100vh; /* スマホのアドレスバー・ツールバーを除いた100vhの値を指定 */
  min-height: calc(var(--vh, 1vh) * 100);
  margin     : auto;
  overflow   : hidden;
  margin-bottom: 30px;
}
.headerInner{
  position   : absolute;
  width: 100%;
  height: 80px;
  background: rgba(255,255,255,0.6);
  z-index: 1;
}
.headerInner h1{
  position   : absolute;
  display    : inline-block;
  top        : 15px;
  left       : 78px;
  z-index: 1;
  width: 100%;
  height: auto;
  font-size: 1.8rem;
  font-weight: bold;
  color: #4282F1;
}
.headerInner h1 span{
  position   : absolute;
  display    : inline-block;
  top        : 24px;
  left       : 0px;
  z-index: 1;
  font-size: 2.6rem;
  font-weight: bold;
  color: #4282F1;
  transform: scale(0.9, 1); /* 文字幅変形 横,縦 */
  transform-origin: top left; /* 文字幅変形を左基準 */
}
.headerInner p {
  position   : absolute;
  display    : inline-block;
  top        : 10px;
  left       : 10px;
  z-index: 1;
  width: 60px;
  height: 60px;
}

/* --- 段差で背景画像のアニメーション ----------------- */
.header .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 15s infinite;
}
.header .src1 {
  background-image : url(../img/top/main1.jpg);
  background-size: cover;
  background-position: center;
}
.header .src2 {
  background-image : url(../img/top/main2.jpg);
  background-size: cover;
  background-position: center;
  animation-delay  : 5s;
}
.header .src3 {
  background-image : url(../img/top/main3.jpg);
  background-size: cover;
  background-position: center;
  animation-delay  : 10s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
  16% { opacity: 1; }
  33% { opacity: 1; }
  49% { opacity: 0; }
 100% { opacity: 0; }
}

/* --- 段差でテキストのアニメーション ----------------- */
.header .bgImg p{
  animation  : pAnime 15s infinite;
}
.header .src2 p{
  animation-delay  : 5s;
}
.header .src3 p{
  animation-delay  : 10s;
}
@keyframes pAnime {
   0% { opacity: 0; transform: translateY(-40%) translateX(-50%);}
  16% { opacity: 1; transform: translateY(-50%) translateX(-50%);}
  33% { opacity: 1; }
  49% { opacity: 0; }
 100% { opacity: 0; }
}

/* --- 下から上にフェードイン ----------------- */
.down-top {
  opacity: 0.1;
  transform: translateY(50px);
  transition: all 1s;
}
.down-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}


/* section
--------------------------------------------------- */
.section {
  max-width: 960px;
  margin: 0px auto 80px;
  padding: 20px 20px;
  text-align: center;
  background: #fff;
}
.section .poyo{
  display: block;
  margin: 0 auto;
  background: #4282F1;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 3rem;
  line-height: 50px;
}
.poyo.scrollin{
  animation: poyoyon 1s ease-in-out 1 forwards;
}
@keyframes poyoyon {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}

.section h2 span {
  display: inline-block;
  margin: 10px auto 20px;
  font-size: 3rem;
  font-weight: 800;
  color: #4282F1;
  padding-bottom: 3px;
  border-bottom: 3px solid #4282F1;
}
.summary {
  max-width: 720px;
  margin: 0px auto;
  margin-bottom: 20px;
  line-height: 1.8;
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  text-align: left;
}

.sectionInner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sectionInner2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 3px solid #4282F1;
}

.sectionInner3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 3px solid #34A853;
}

#one {
  max-width: 720px;
  margin: 0px auto;
}
#two {
  max-width: 720px;
  margin: 0px auto;
}
#two2 {
  max-width: 720px;
  margin: 0px auto 20px;
}
#one .wrap {
  width: 100%;
  margin-top: 10px;
}
#two .wrap {
  width: 50%;
  margin-top: 10px;
}

#two2 .wrap2 {
  width: 50%;
}

.fa-check-square{
  margin-right: 3px;
  color: #4282F1;
}

.detail p{
  display: inline-block;
  padding: 10px 30px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  margin: 50px auto 0;
  background: #4282F1;
}
.detail i{
  display: inline-block;
  color: #fff;
  margin-left: -15px;
}

table {
  border-collapse:  collapse; /* セルの線を重ねる */
  width: 100%;               /* 幅指定 */
}
th,td {
  border: solid 3px #4282F1;          /* 枠線指定 */
  padding: 10px 0 10px 8px;
}
th {
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  background: rgba(66,130,241,0.6);
}
th:nth-child(2){
  width: 32%;
  padding-right: 8px;
}
td {
  font-size: 1.6rem;
  font-weight: 600;
  text-align: left;
  color: #333;
}
td:nth-child(2){
  text-align: right;
  padding-right: 8px;
}

.twitter{
  display: inline-block;
  margin-bottom: 0 auto;
  background: #fff;
  width: 720px;
  border: 3px solid #4282F1;
}

/* footer
--------------------------------------------------- */
.footer {
  background: #fff;
  text-align: center;
  color: #333;
  padding: 50px 0 150px 0;
}
.footer p{
  margin-top: 30px;
}
.footer ul{
  display: inline-block;
  width: 460px;
  margin: 20px auto 0;
  text-align: center;
}
.footer .ulLast{
  margin-bottom: 0px;
}
.footer li{
  margin: 0 0 10px;
  text-align: left;
  float: left;
  width: 46%;
  padding: 5px 2%;
  font-size: 1.6rem;
  font-weight: 600;  
  color: #4282F1;
}

#page-top .ikou {
  position: fixed;
  bottom: 20px;
  left: 40%;
  width: 156px;
  transform: translateX(-50%);
}
#page-top .keizoku {
  position: fixed;
  bottom: 20px;
  left: 60%;
  width: 156px;
  transform: translateX(-50%);
}
#page-top .contact {
  position: fixed;
  bottom: 20px;
  right: -26px;
  width: 92px;
  transform:  translateX(-50%);
}


/* 横向きのスタイル
--------------------------------------------------- */
@media screen and (orientation: landscape){

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.header .src1 {
  background-image : url(../img/top/main1.jpg);
  background-size: cover;
  background-position: center;
}
.header .src2 {
  background-image : url(../img/top/main2.jpg);
  background-size: cover;
  background-position: center;
  animation-delay  : 5s;
}
.header .src3 {
  background-image : url(../img/top/main3.jpg);
  background-size: cover;
  background-position: center;
  animation-delay  : 10s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
  16% { opacity: 1; }
  33% { opacity: 1; }
  49% { opacity: 0; }
 100% { opacity: 0; }
}

/* --- ボックステキストの指定 ----------------- */
.header .bgImg p{
  position   : relative;
  display    : inline-block;
  top        : 55%;
  left       : 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
  padding: 4vh 2.5vw;
  font-size: 3.2vw;
  font-weight: 600;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  color: #fff;
  line-height: 130%;
  background: rgba(66,130,241,0.6);/*背景色*/
}
.header .bgImg span{
  font-size: 3.6vw;
  font-weight: 600;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  padding-bottom: 1vh;
  margin-bottom: 2vh;
  border-bottom: 3px solid #fff;
  display: inline-block;
}

}


/* 縦向きのスタイル
--------------------------------------------------- */
@media screen and (orientation: portrait){

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.header .src1 {
  background-image : url(../img/top/main1s.jpg);
  background-size: cover;
  background-position: center;
}
.header .src2 {
  background-image : url(../img/top/main2s.jpg);
  background-size: cover;
  background-position: center;
  animation-delay  : 5s;
}
.header .src3 {
  background-image : url(../img/top/main3s.jpg);
  background-size: cover;
  background-position: center;
  animation-delay  : 10s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
  16% { opacity: 1; }
  33% { opacity: 1; }
  49% { opacity: 0; }
 100% { opacity: 0; }
}
    
/* --- ボックステキストの指定 ----------------- */
.header .bgImg p{
  position   : relative;
  display    : inline-block;
  top        : 50%;
  left       : 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
  padding: 4vh 2.5vw;
  font-size: 6.5vw;
  font-weight: 600;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  color: #fff;
  line-height: 130%;
  background: rgba(66,130,241,0.6);
}
.header .bgImg span{
  font-size: 7.5vw;
  font-weight: 600;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  padding-bottom: 1vh;
  margin-bottom: 2vh;
  border-bottom: 3px solid #fff;
  display: inline-block;
}

}

/* max-width:1024px
--------------------------------------------------- */
@media screen and (max-width:1024px){
a:hover {
  opacity: 1;
}
.container {
  padding: 0 5px;
}

}

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

.headerInner{
  position   : absolute;
  width: 100%;
  height: 60px;
  background: rgba(255,255,255,0.6);
  z-index: 1;
}
.headerInner h1{
  position   : absolute;
  display    : inline-block;
  top        : 12px;
  left       : 54px;
  z-index: 1;
  width: 100%;
  height: auto;
  font-size: 1.2rem;
  font-weight: bold;
  color: #4282F1;
}
.headerInner h1 span{
  position   : absolute;
  display    : inline-block;
  top        : 19px;
  left       : 0px;
  z-index: 1;
  font-size: 1.8rem;
  font-weight: bold;
  color: #4282F1;
  transform: scale(0.9, 1); /* 文字幅変形 横,縦 */
  transform-origin: top left; /* 文字幅変形を左基準 */
}
.headerInner p {
  position   : absolute;
  display    : inline-block;
  top        : 10px;
  left       : 10px;
  z-index: 1;
  width: 40px;
  height: 40px;
}

.section h2 span {
  font-size: 2.2rem;
}

.summary {
  line-height: 1.6;
  font-size: 1.6rem;
}

.detail p {
  font-size: 1.6rem;
}

#one .wrap {
  width: 97%;
  padding: 2%;
}
#two .wrap {
  width: 97%;
  padding: 2%;
}
.footer ul{
  width: 210px;
}
.footer li{
  width: 97%;
  padding: 2%;
  font-size: 1.5rem;
  text-align: center;
}
#page-top .ikou {
  position: fixed;
  bottom: 20px;
  left: 36%;
  width: 95px;
  transform: translateX(-50%);
}
#page-top .keizoku {
  position: fixed;
  bottom: 20px;
  left: 64%;
  width: 95px;
  transform: translateX(-50%);
}
#page-top .contact {
  position: fixed;
  bottom: 20px;
  right: -18px;
  width: 56px;
  transform:  translateX(-50%);
}
.twitter{
  width: 100%;
}
    
}
/* max-width:640px
--------------------------------------------------- */
@media screen and (max-width:640px){

#two2 .wrap2 {
  width: 100%;
}


}