@charset "utf-8";
/* CSS Document */

html,html * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    }
    
/*パンディング・マージンをリセット*/
  * { 
    padding: 0px;
    margin: 0px; 
    }

body {
    background-color: #9CCCFF;
    margin-left: auto;
    margin-right: auto;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
    }
    
/* 画質クリアChrome対応 */
img { 
    -webkit-backface-visibility: hidden;   
    }

.style-logo {
    text-align: left;
    margin-right: auto;
    display: block;
    padding: 3px 0px 15px 10px;
    z-index: 5;
    }

.style-main {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }

.style-footer-logo {
    text-align: center;
    display: block;
    list-style-type: none;
    padding: 40px 30px 50px 30px; 
    background:#D6D6D6; 
    }  
    
.style-copy {
    margin-left: auto;
    margin-right: auto;
    max-height: 550px;  
    } 

.style-scroll {
    margin-left: 63%;
    margin-top: -100px;
    display: block;
    }

.style-nav ul {
    list-style-type: none;
    }

.style-nav ul li a {
    text-decoration: none;
    text-align: center;
    color: #000000;    
    display: block;
    padding: 10px ;
    }

.row:before, .row:after {
    content: "";
    display: table;
    }

.row:after {
    clear: both;
    }

.col {
    width: 100%;
    }

.book_b { 
    background-color: #ffffff;
    padding: 15px 20px 15px 20px;    
    }

.box01 {
    background-image: url("image/21_01_1000.png");
    background-size: cover ;   
    background-position: left;
    margin-top: -5px;
    margin-left: auto;
    margin-right: auto;
    height: 700px;
    padding: 10px 0px 0px 0px;
    text-align: center;       
    }

.box01_anima {
    animation: fadeIn 10s ease 0s 1 normal;
    -webkit-animation: fadeIn 5s ease 0s 1 normal;
    }

.box02 {
    background-image: url("image/21_02_1000.png");
    background-size: cover;   
    background-position: left;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }

.box03 {
    background-image: url("image/21_03_1000.png");  
    background-size: cover;
    background-position: center;
    padding: 10px 0px 10px 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }
    
.image_03 {
    max-width: 650px; 
    margin-left: left;
    }
    
.box04_a {
    background-image: url("image/21_04a_1000.png");   
    background-size: cover;   
    background-position: left;
    padding: 10px 0px 10px 0px;
    margin-left: auto;
    margin-right: auto;
    }
    
.image_04a {
    max-width: 600px; 
    margin-left: left;
    }
    
.box04_b {
    background-image: url("image/21_04b_1000.png");   
    background-size: cover;   
    background-position: left;
    padding: 10px 10px 10px 10px;
    margin-left: auto;
    margin-right: auto;
    }

.box05 {
    background-image: url("image/21_05_1000.png") ;
    background-size: cover;
    background-position: top;
    padding: 50px 10px 50px 10px;    
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: auto;
    }
    
.box06 {
    background-image: url("image/21_06_1000.png");
    background-size: cover ;   
    background-position: top;
    margin-top: -40px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }

.box06_b {
    background-color: #700C0E;    
    max-height: 200px;
    padding: 20px 10px 20px 10px ;
    text-align: center;
    }

.box07 {    
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0px 50px 0px;    
    }

.box08{
    background-image: url("image/banner.png");
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    height: 60px;
    display: block;
    }
    
.resizeimage {
    margin-left: auto;
    display: block;
    padding: 10px 10px 10px 10px ;
    max-width: 700px;
    min-width: 300px; 
    }

.resizeimage_ {
    margin-left: left;
    display: block;
    padding: 10px 10px 10px 10px ;
    max-width: 600px; 
    min-width: 300px;     
    }

h1 {
    font-size: 20px;
    font-family: "Sawarabi Mincho", serif;
    color: #FFFFFF;
   }

h2 {
    font-size: 16px;
    font-family: "Sawarabi Mincho", serif;
    color: #FFFFFF;
   }

.button {
   border: 5px #ffffff solid;
   padding: 15px 40px;
   border-radius: 50px;
   font-size: 14px;
   font-weight: bold;
   color: #ffffff;
   text-decoration: none;
   background: #F07801;
   }

.button:hover {
   background-color: #fff;
   border-color: #F07801;
   color: #F07801;
   }

 /*　戻る:JQuery　*/
.page-top {
   position: fixed;
   bottom: 20px;
   right: 30px;
   padding: 15px 10px 15px 10px;
   background: #00D1FC;
   border-radius: 60px;
   font-size: 11px;
   ms-filter: "alpha(opacity=80)";
   moz-opacity: 0.8;
   khtml-opacity: 0.8;
   opacity: 0.8;
   color: #FFFFFF;
   text-decoration:none;
   }

/* キャッチコピーフェードイン */
@keyframes fadeIn {
  0% {
   opacity: 0
   }
  100% {
   opacity: 10
   }
}

@-webkit-keyframes fadeIn {
  0% {
   opacity: 0
   }
  100% {
   opacity: 1
   }
}

/* フェード */
.fade_off {
   opacity: 0;
   -webkit-transition: all 5s;
   -moz-transition: all 5s;
   -o-transition: all 3s;
   -ms-transition: all 3s;
   transition: all 2s;
   }

.fade_on {
   opacity: 1;
   transform: translateY(20px);
   }

/*下からフェードイン*/
.animation{
   opacity : 0;
   visibility: hidden;
   transition: 1s;
   transform: translateY(300px);
   }

.active{
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   }

/*上からフェードイン*/
.animation2{
   opacity : 0;
   visibility: hidden;
   transition: 4s;
   transform: translateY(-200px);
   }

.active{
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   }
                                                  /* レスポンシブ タブレット用 */
@media (min-width: 850px) {

 body {
   padding-left: 20px;
   padding-right: 20px;
   } 
    
.box01 {
   height: 1000px;
   }
    
.box02{
   padding: 40px 10px 20px 10px;
   margin-top: 40px;
   height: 750px;
   }

.box03{
   padding: 0px 10px 30px 10px;
   height: 600px;
   }
   
.box04_a{
   height: 500px;
   }

.box04_b{
   height: 500px;
   }

.box05 {
   padding: 50px 80px 50px 80px;
   margin-top: 40px;
   }
    
.box06 {   
   padding: 50px 60px 50px 60px;
   margin-top: 3px;
   }
    
.box06_b {
   padding: 20px 40px 20px 40px;
   }
    
.box07 {
   border-radius: 0px 0px 70px 70px;
   }
    
.box08{
   height: 0px;
   margin-bottom: 20px;
   margin-left: auto;
   margin-right: auto;
   display: block;
   }  
 
 h1 {
   font-size: 23px;
   }
 
 h2 {
   font-size: 18px;
   }
  
.book_b { 
   padding: 30px 0px 50px 0px;
   }

.col-tab {
   width: 50%;
   float: left;
   padding: 20px 10px 20px 10px;
   background-color: #ffffff;
   }

.button {
   border: 5px #ffffff solid;
   padding: 15px 50px;
   border-radius: 50px;
   font-size: 15px;
   font-weight: bold;
   color: #ffffff;
   text-decoration: none;
   background: #F07801;
   }

.button:hover {
   background-color: #fff;
   border-color: #F07801;
   color: #F07801;
   }
   
}

                                                 /* レスポンシブ デスクトップ用 */
@media (min-width: 1200px) {

 body {
   max-width: 1500px;
   }
    
    
.style-copy {
   height: auto;  
   } 

.box03{
   text-align: left;
   margin-right: auto;
   display: block;
   height: 650px;
   }
   
.box05 {
   padding: 60px 150px 60px 150px;
   }
    
.box06 {
   padding: 50px 70px 50px 70px;
   }

 h1 {
   font-size: 25px;
   }

.book_b { 
   padding: 20px 0px 50px 0px;
   }
   
.col-pc {
   width: 50%;
   float: left;
   padding: 20px 10px 20px 10px;
   background-color: #ffffff;
   }   

.button {
   border: 5px #ffffff solid;
   padding: 20px 70px;
   border-radius: 50px;
   font-size: 20px;
   font-weight: bold;
   color: #ffffff;
   text-decoration: none;
   background: #F07801;
   }

.button:hover {
   background-color: #fff;
   border-color: #F07801;
   color: #F07801;
   }
   
}