@charset "UTF-8";
body{-webkit-text-size-adjust: 100%;}
html{font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;}
#container{width: 100%; margin: 0 auto; overflow: hidden; }

#annotation{margin-top: 0.8em; padding: 2em 1em 3em 1em; max-width: 1140px; margin: 0 auto;}
#annotation p{ color:#717171; font-weight: bold;}

/*.Area_img{width: 100%; overflow: hidden; position: relative;}*/
content{padding-top: 1.2em; padding-bottom: 1.2em;}

.contents_text4{margin-top: 3em;}

/*点線*/
.dashed{background-image: url("../images/dashed.gif"); width: 95%; height: 12px; background-repeat: repeat; margin: 0 auto;}
.dashed4{margin-bottom: 2em;}


footer{margin-top: 7em;}

/***大きい画面のとき*************************************/
@media screen and (min-width: 1280px) {
    h2{font-size: 1.8em;}


}

/***コンテンツ1の縦*************************************/
@media screen and (min-width:801px) and ( max-width:1376px) {
/*.dashed1{margin-top: -200em;}*/
}



/****************************************/

@media screen and (min-width: 1201px) {
/*テキスト*/

/*headerPC*/
#header_wrap{width: 80%; max-width: 1280px; margin: 0 auto 30px;}
header{display: flex; }
h1{color:#000a19; /*border-top: solid 0.3em #66bcdf;*/ font-size: 1.6em; padding: 1em 0.3em; margin-left: 1em;}
#official{margin-left:auto; transition: 0.6s; padding: 2em 0.3em;  margin-right: 1em;}


.text_animate{font-size: 1.2em;}



.Area_text{width: 100%; padding-left: 1em; margin-right: 5em;}

.contents_text{width: 90%; line-height: 2em;  font-size: 1.3em; margin:0 10px;}

/*コンテンツ見出し*/
h2{ position: relative;
    margin-top: 1em; margin-bottom: 1em; padding-left: 0.7em;
    height: 2.8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.7em;
  }
h2:before{
    position: absolute; left: 1; top: -1em;
    background-color: #014099; 
    border-radius: 5px;
    content: "";
    height: 5em;
    margin-right: 1em;
    vertical-align: middle;
    width: 7px;
}
.h2_inner{color: #014099; line-height: 1.5em; margin-left: 1.2em; }
/*ていちゃんの見出し2行目*/
.h2_inner div{font-size: 0.6em;}

/*コンテンツ1画像*/
/*.contents1_imgBG{width: 100%; height: 100%; border-radius: 0 10px 10px 0 ;}*/
.contents1_img { padding-left: 1em; margin-bottom: 1em;}
.contents1_img img{z-index: 1; border-radius: 6px; width: 92%; max-width:1000px;/*width: 100%;*/ /*max-height: 540px;*/ }
/*.contents1_img{margin-left: -4em; overflow: hidden; z-index: 10; } *//*左に寄せたバージョン*/

/*コンテンツ2画像*/
.contents2_img1 img{width: 60%; margin-bottom: 1em; border-radius: 6px;} 
.contents2_img2{text-align: right;}
.contents2_img2 img{width: 80%; margin-right: 0.5em; border-radius: 6px;} 

/*コンテンツ3画像*/
.contents3_img{display: flex; flex-wrap: wrap; padding: 1em;}
.contents3_img1{ width: 50%;}
.contents3_img2{ width: 50%; padding-top: 2em;}
.contents3_img3{ width: 50%; margin-top: 4em;}
.contents3_img4{ width: 50%; padding-top: 2em; margin-top: -4em;}
.contents3_img1 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 
.contents3_img2 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 
.contents3_img3 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 
.contents3_img4 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 

/*コンテンツ4画像*/
.contents4_imgBG{ width: 100%; height: 100%; background-image: url("../images/teichan_bg.png"); 
background-size: contain; background-repeat: no-repeat; background-position: center; text-align: center;
}
.contents4_img{text-align: center;}
.contents4_img img{width:85%;}

/*コンテンツ5画像*/
.contents5_img1 img{width: 60%; margin-bottom: 1em; border-radius: 6px;} 
.contents5_img2{text-align: right;}
.contents5_img2 img{width: 75%; margin-right: 0.5em; border-radius: 6px;} 


/*コンテンツ6画像min-width: 1201px*/
.contents6_img1 img{/*width: 70%;*/width: 65%; margin-bottom: 1em; border-radius: 6px;} 
.contents6_img2{text-align: right;}
.contents6_img2 img{/*width: 55%;*/width: 50%; margin-right: 0.5em; border-radius: 6px; margin-bottom: 3em;} 




/*コンテンツボタン*/
.btn{margin-top: 4em; background-color: #0694b5;  padding: 0.5em 2em;
    font-size: 1.2em; color: #fff;   transition: all 0.5s; -webkit-transition: all 0.5s;}

.btn_right{margin-left: 3em; border-radius: 6px 0 0 6px; /*position: absolute;*/ /*right: 0;*/}
.btn_left{margin-right: 3em; border-radius: 0 6px 6px 0; width: 70%;}

.btn_right:hover{opacity: 0.4;transform: translate(2em,0);}
.btn_left:hover{opacity: 0.4; width: 75%; padding-left: 3em;}

/*pagetop btn*/
#pagetop {cursor: pointer; transition: 0.2s; position: fixed; right: 2em; bottom: 2em; display: block; }
#pagetop:hover {opacity: 0.4;}

/*footer*/
footer{font-size: 0.6em; text-align: center; padding: 1em; border-bottom:solid 6px #66bcdf; color: #6f6f6f; }


}















/*tablet*/
@media screen and (min-width:1201px) and ( max-width:1440px) {
.contents_text{width: 90%; line-height: 1.8em;  font-size: 1.1em; margin:-15px 0 -20px;}
}
@media screen and (min-width:1001px) and ( max-width:1200px) {

/*headerSP*/
#header_wrap{width: 100%; margin: 0 auto;}
header{display: flex; width: 90%; margin: 0 auto;}
h1{width: 60%; color:#000a19; /*border-top: solid 0.3em #66bcdf;*/ font-size: 1em; padding: 1em 0.3em;}
#official{width: 40%; margin-left:auto; transition: 0.6s; padding: 1em 0.3em; /* margin-right: 1em;*/ text-align: right;}
#official img{width: 80%;}

.text_animate{font-size: 1.1em;}

.Area_text{width: 100%; margin: 0 auto;}
.contents_text{width: 90%; line-height: 1.7em; margin: 0 auto; margin-bottom: 2em; font-size: 1.2em;}
.contents_text1{margin-top: -6em;}
.contents_text2{margin-top: -3em;}
.contents_text3{margin-top: -5em;}


/*コンテンツ見出し*/
h2{ position: relative;
    margin-top: 1em; margin-bottom: 1em; padding-left: 0.7em;
    height: 2.8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.5em;
  }
h2:before{
    position: absolute; left: 1; top: -1em;
    background-color: #014099; 
    border-radius: 5px;
    content: "";
    height: 4.5em;
    margin-right: 1em;
    vertical-align: middle;
    width: 7px;
}
.h2_inner{color: #014099; line-height: 1.5em; margin-left: 1.2em; }
/*ていちゃんの見出し2行目*/
.h2_inner div{font-size: 0.6em;}


/*コンテンツ1画像*/
.contents1_img img{z-index: 1; border-radius: 6px; width: 100%;}
.contents1_img{text-align: center; width: 95%; margin: 20px auto;} 

/*コンテンツ2画像*/
.contents2_img{margin: 2em 0;}
.contents2_img1 img{width: 75%; margin-bottom: 1em; border-radius: 0 10px 10px 0;} 
.contents2_img2{text-align: right;}
.contents2_img2 img{width: 80%; border-radius: 10px 0 0 10px;} 

/*コンテンツ3画像*/
.contents3_img{display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; padding-top: 2em;}
.contents3_img1{ width: 50%; text-align: center;}
.contents3_img2{ width: 50%; padding-top: 2em; text-align: center; }
.contents3_img3{ width: 50%; margin-top: 4em; text-align: center; }
.contents3_img4{ width: 50%; padding-top:2em; text-align: center; margin-top: -4em;}
.contents3_img1 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 
.contents3_img2 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 
.contents3_img3 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 
.contents3_img4 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 

/*コンテンツ4画像*/
.contents4_imgBG{ width: 100%; height: 100%; background-image: url("../images/teichan_bg.png"); 
background-size: contain; background-repeat: no-repeat; background-position: center; text-align: center;
}
.contents4_img{text-align: center;}
.contents4_img img{width:85%;}

/*コンテンツ5画像*/
.contents5_img{margin: 2em 0;}
.contents5_img1 img{width: 75%; margin-bottom: 1em; border-radius: 0 10px 10px 0;} 
.contents5_img2{text-align: right;}
.contents5_img2 img{width: 80%; border-radius: 10px} 

/*コンテンツ6画像min-width:1001px*/
.contents6_img1 img{width: 75%; margin-bottom: 1em; border-radius: 0 10px 10px 0;} 
.contents6_img2{text-align: right;}
.contents6_img2 img{width: 50%; border-radius: 10px} 


/*コンテンツボタン*/
.btn{background-color: #0694b5;  padding: 1em; 
    text-align: center; width: 65%; margin: 0 auto;
    font-size: 1.2em; color: #fff; transition: all 0.5s; -webkit-transition: all 0.5s;
    border-radius: 8px;
}

.btn:hover{opacity: 0.4;transform: translate(0,1em);}

/*pagetop btn*/
#pagetop {cursor: pointer; transition: 0.2s; position: fixed; right: 1em; bottom: 2em; display: block; width: 20%; }
#pagetop img {width: 80%;}

#pagetop:hover {opacity: 0.4;}

/*footer*/
footer{font-size: 0.6em; text-align: center; padding: 1em; border-bottom:solid 6px #66bcdf; color: #6f6f6f; }

}











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

/*headerSP*/
#header_wrap{width: 100%; margin: 0 auto;}
header{display: flex; width: 90%; margin: 0 auto;}
h1{width: 60%; color:#000a19; /*border-top: solid 0.3em #66bcdf;*/ font-size: 1em; padding: 1em 0.3em;}
#official{width: 40%; margin-left:auto; transition: 0.6s; padding: 1em 0.3em; /* margin-right: 1em;*/ text-align: right;}
#official img{width: 80%;}

.text_animate{font-size: 1.1em;}

.Area_text{width: 100%; margin: 0 auto;}
.contents_text{width: 90%; line-height: 1.7em; margin: 0 auto; margin-bottom: 2em; font-size: 1.1em;}
.contents_text1{margin-top: 2em;}


/*コンテンツ見出し*/
h2{ position: relative;
    margin-top: 1em; margin-bottom: 1em; padding-left: 0.7em;
    height: 2.8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.3em;
  }
h2:before{
    position: absolute; left: 1; top: -1em;
    background-color: #014099; 
    border-radius: 5px;
    content: "";
    height: 4.5em;
    margin-right: 1em;
    vertical-align: middle;
    width: 7px;
}
.h2_inner{color: #014099; line-height: 1.5em; margin-left: 1.2em; }
/*ていちゃんの見出し2行目*/
.h2_inner div{font-size: 0.6em;}

/*コンテンツ1画像*/
.contents1_img img{z-index: 1; border-radius: 6px; width: 100%;}
.contents1_img{text-align: center; width: 95%; margin: 20px auto;} 

/*コンテンツ2画像*/
.contents2_img{margin: 2em 0;}
.contents2_img1 img{width: 75%; margin-bottom: 1em; border-radius: 0 10px 10px 0;} 
.contents2_img2{text-align: right;}
.contents2_img2 img{width: 80%; border-radius: 10px 0 0 10px;} 

/*コンテンツ3画像*/
.contents3_img{display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; padding-top: 2em;}
.contents3_img1{ width: 50%; text-align: center;}
.contents3_img2{ width: 50%; padding-top: 2em; text-align: center; }
.contents3_img3{ width: 50%; margin-top: 4em; text-align: center; }
.contents3_img4{ width: 50%; padding-top: 2em; text-align: center; margin-top: -4em;}
.contents3_img1 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 
.contents3_img2 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 
.contents3_img3 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 
.contents3_img4 img{width: 95%; margin-bottom: 1em; border-radius: 6px;} 

/*コンテンツ4画像*/
.contents4_imgBG{ width: 100%; height: 100%; background-image: url("../images/teichan_bg.png"); 
background-size: contain; background-repeat: no-repeat; background-position: center; text-align: center;
}
.contents4_img{text-align: center;}
.contents4_img img{width:85%;}

/*コンテンツ5画像*/
.contents5_img{margin: 2em 0;}
.contents5_img1 img{width: 85%; margin-bottom: 1em; border-radius: 0 10px 10px 0;} 
.contents5_img2{text-align: right;}
.contents5_img2 img{width: 90%; border-radius: 10px 0 0 10px;} 


/*コンテンツ6画像max-width: 1000px*/
.contents6_img1 img{width: 85%; margin-bottom: 1em; border-radius: 0 10px 10px 0;} 
.contents6_img2{text-align: right;}
.contents6_img2 img{width: 60%; border-radius: 10px 0 0 10px;} 




/*コンテンツボタン*/
.btn{background-color: #0694b5;  padding: 1em; 
    text-align: center; width: 65%; margin: 0 auto;
    font-size: 1.2em; color: #fff; transition: all 0.5s; -webkit-transition: all 0.5s;
    border-radius: 8px;
}

/*.btn_right{margin-left: 3em; border-radius: 6px 0 0 6px; }
.btn_left{margin-right: 3em; border-radius: 0 6px 6px 0; width: 70%;}*/

.btn:hover{opacity: 0.4;transform: translate(0,1em);}


/*pagetop btn*/
#pagetop {cursor: pointer; transition: 0.2s; position: fixed; right: 1em; bottom: 2em; display: block; width: 20%; }
#pagetop img {width: 90%;}

#pagetop:hover {opacity: 0.4;}

/*footer*/
footer{font-size: 0.6em; text-align: center; padding: 1em; border-bottom:solid 6px #66bcdf; color: #6f6f6f; }
}



/*fadein*//************************************/
  /* 画面外にいる状態 */
  .fadein {
    opacity : 0;
    transform : translate(0, 2em);
    transition : all 500ms;
    }
  /* 画面内に入った状態 */
  .fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }


  /* 順番にだす　delayをかける */
  .effect > .fadein:nth-of-type(2) {
    -moz-transition-delay:300ms;
    -webkit-transition-delay:300ms;
    -o-transition-delay:300ms;
    -ms-transition-delay:300ms;
    }
  .effect > .fadein:nth-of-type(3) {
    -moz-transition-delay:500ms;
    -webkit-transition-delay:500ms;
    -o-transition-delay:500ms;
    -ms-transition-delay:500ms;
    }
 .effect > .fadein:nth-of-type(3) {
    -moz-transition-delay:700ms;
    -webkit-transition-delay:700ms;
    -o-transition-delay:700ms;
    -ms-transition-delay:700ms;
    }


 .effect > div > img.fadein:nth-of-type(1) {
    -moz-transition-delay:300ms;
    -webkit-transition-delay:300ms;
    -o-transition-delay:300ms;
    -ms-transition-delay:300ms;
    }
 .effect > div > img.fadein:nth-of-type(2) {
    -moz-transition-delay:500ms;
    -webkit-transition-delay:500ms;
    -o-transition-delay:500ms;
    -ms-transition-delay:500ms;
    }
     .effect > div > img.fadein:nth-of-type(3) {
    -moz-transition-delay:700ms;
    -webkit-transition-delay:700ms;
    -o-transition-delay:700ms;
    -ms-transition-delay:700ms;
    }
 .effect > div > img.fadein:nth-of-type(4) {
    -moz-transition-delay:900ms;
    -webkit-transition-delay:900ms;
    -o-transition-delay:900ms;
    -ms-transition-delay:900ms;
    }