/* ======================================================
 * txapp-index.css
====================================================== */

/* ======================================================
 * Override
====================================================== */
@media print, screen and (min-width: 768px) {
  .App_Main {
    max-width: 100%;
    padding: 0!important;
    padding-bottom: 1em;
  }
}
@media only screen and (max-width: 767px) {
  .App_Main {
    padding: 0!important;
  }
}

/* ======================================================
 * PC
====================================================== */



section {
margin:0 0 70px 0;
}

.app_container{
width:100%;
margin: 0 auto;
text-align :center;
}


#app_header {
width:100vw;
height:10vh;
display:flex; /*ロゴとナビを横並び*/
background-color: rgba(255, 255, 255, 0.4);
position: fixed;
top:0;
left:0;
padding:40px 50px;
margin:0 3px;
justify-content:space-between;
align-items: center;
z-index:1000;
}



 .header_logo span{
font-weight:800;
font-size:2.5rem;

}

 .header_logo img {
width:50px;
border: 1px #cccccc solid;
border-radius: 8px; 
vertical-align: middle;
}



nav ul {
display:flex;
list-style:none;
}

nav ul li {
margin-left:20px;
font-weight:800;
font-size:1.6rem;
}

nav ul li:first-child {
margin-left:10px;
}

nav ul li a{
text-decoration:none;
background-color:#ffffff;
border-radius: 1em;
padding:5px 15px;
color:#333333;
font-weight:800;
}

nav ul li a:visited, 
h1 a:visited{
color: #333333;
}

nav ul li a:hover {
background-color:#003B83;
text-decoration:none;
color: #ffffff;
}

h1 span {
color: #000;
}

h1 a:hover {
text-decoration:none;
}


#app_main {
margin:100px 0 0 0;
text-align :center;
}



.app_top_bg {
text-align :left;
width:90vw;
border-radius: 1em; 
margin:0 auto;
position: relative;
}

.app_top_bg .top_sp {
display:none;
}

.app_top_bg img {
border-radius:20px;
}



.app_top_bg h3 {
position: absolute;
color:#ffffff;
top: 40%; left: 5%; transform: translate(-5%, -5%);
}

.app_top_bg span {
background:linear-gradient(transparent 0%, #003B83 0%);
padding:0px 15px;
}


/* 
.app_top_bg h3 {
position: absolute;
color:#003B83;
top: 40%; left: 5%; transform: translate(-5%, -5%);
}

.app_top_bg span {
background:linear-gradient(transparent 0%, #ffffff 0%);
padding:0px 15px;
}
 */



.app_top_btn {
margin:3.3vw auto;
justify-content:space-between;
}

.app_top_btn img {
width:250px;
}


.app_top_btn span {
margin:0 0 20px 0;
}

h1 {
line-height:1.5;
  font-size:2vw;
  font-weight:800;
}


h2 {
  position: relative;
  text-align: center;
  padding:5px;
  font-size:3vw;
  font-weight:800;
  margin:40px auto 20px;
}
h2:after {
  position: absolute;
  content: '';
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 150px;
  height: 5px;
  background: #e0eaff;
}

h3 {
line-height:1.6;
  font-size:3.6rem;
  font-weight:800;
}

h4 {
line-height:1.5;
  font-size:2rem;
  font-weight:800;
    margin:15px auto 5px;
}

p {
font-size:2.0rem;
line-height:2;
font-weight:700;
}





.txapp_about {
margin:30px ;
}

.txapp_about p {
margin:20px 0;
}

.txapp_about_sub_box {
width:80%;
display:flex;
margin:10px auto 130px;
}

.txapp_about_sub_box p{
font-size:1.5rem;
line-height:1.5;
font-weight:400;
text-align :left;
}

.txapp_about_sub {
background-color:#e0eaff;
border-radius: 1em;
text-align :center;
margin:10px;
padding:20px;
width: 50%;
}



.txapp_about_sub img {
border-radius: 50%;
border: 1px #cccccc solid;
width: 200px;
height:200px;
}



#app_footer {
margin:20px auto;
text-align :center;
}

@media print, screen and (min-width: 768px) {
.txapp_about_wrapper {
 width:100%;
 margin:70px auto;
}

.txapp_about_item{
display: flex;
align-items:center;
justify-content: space-between;
margin:0 auto;
padding:10px 70px
}


.txapp_about_item__img {
  align-items: center;
  width:50%;
}

.txapp_about_item__img img{
height: 400px;
object-fit: cover;
}

.txapp_about_item__txt{
height: 400px;
width:50%;
}


.txapp_about_item__txt p{
text-align: left;
margin:20px 0 0 60px;
}


.txapp_about_item__txt h3 {
line-height:1.5;
  font-size:3vw;
  font-weight:800;
  text-align: left;
  margin:0 0 0 60px;
color:#003B83;
}


.txapp_about_item__txt h3 span {
line-height:1.5;
  font-size:6vw;
  font-weight:800;
color:#e0eaff;
}
}


.txapp_dl {
display: flex;
justify-content: center;
align-items:center;
text-align :center;
margin:0 auto;
}

.txapp_dl_img img{
width:200px;
border: 2px #cccccc solid;
border-radius: 10px; 
vertical-align: middle;

}

@media print, screen and (min-width: 768px) {
.txapp_dltxt{
text-align :center;
margin:0 0 0 20px;
}}

.txapp_dltxt p{
margin:0 0 0 15px;
}

.news-list{
  list-style: none outside;
  margin: 0 auto;
  padding: 0;
width:70%
}

.news-list .item span{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  border-bottom: 1px solid #CCC;
  padding: 20px 20px;
}
.news-list .item:first-child span{
  border-top: 1px solid #CCC;
}
.news-list .item .date{
  margin: 0;
  min-width: 200px;
  font-size: 16px;
  color: #999;
  padding: 0 20px 0 0;
}
.news-list .item .title{
  margin: 0;
  width: 100%;
text-align :left;
}
.news-list .item a:hover .title{
  color: #00F;
}



#app_footer {
border-top: 1px solid #dcdcdc;
padding:10px;

}

#app_footer p {
color:#a9a9a9;
font-size:12px;
}


/* ======================================================
 * SP
====================================================== */




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


#app_main {
margin: 0 ;
text-align :center;
}

h2 {
  font-size:2.6rem;
}

#app_header {
width:100vw;
height:75px;
padding:15px;
margin:0 3px;
align-items: center;
position: static;
}

 .header_logo span{
font-weight:800;
font-size:2rem;

}

 .header_logo img {
width:40px;
border: 1px #cccccc solid;
border-radius: 8px; 
vertical-align: middle;
}



  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #444;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
  }

  .nav-links.active {
    display: flex;
  }

.app_top_bg span {
font-size:2.4rem;
line-height:1.6;
background:linear-gradient(transparent 0%, #003B83 0%);
padding:3px;
}



.app_top_bg .top_pc {
display:none;
}

.app_top_bg .top_sp {
display:block;
}

.app_top_bg h3 {
line-height:1.6;
  font-size:2.6rem;
  font-weight:800;
position: absolute;
color:#ffffff;
margin:0 auto;
top:8%;
left:10%;
transform: translate(-5%, -5%);
}

.app_top_bg span {
background:linear-gradient(transparent 0%, #003B83 0%);
}


.app_top_btn img {
width:150px;
margin:0 0 10px;
}

.app_top_btn p{
font-size:1.7rem
}


.txapp_about_wrapper{
 width:100%;
 margin:50px auto;
}

.txapp_about_item{
display:block;
align-items:center;
margin:50px auto 20px;
}


.txapp_about_item__img {
  align-items: center;
  width:100%;
  margin:0;
}

.txapp_about_item__img img{
  width:100%;
  margin:0;
}

.txapp_about_item__txt{
  width:100%;
  margin:0;
}


.txapp_about_item__txt h3 {
line-height:1.3;
  font-size:2.4rem;
  font-weight:800;
color:#003B83;
}


.txapp_about_item__txt h3 span {
line-height:1.3;
  font-size:6rem;
  font-weight:800;
color:#e0eaff;
}

.txapp_about_item__txt p{
line-height:1.5;
margin:10px 0;
padding:0;
font-weight:200;
text-align :left;
}

.txapp_about_sub_box {
width:100%;
display:block;
margin:0;
}

.txapp_about_sub_box p{
font-size:1.5rem;
line-height:1.5;
font-weight:400;
}

.txapp_about_sub {
background-color:#e0eaff;
border-radius: 1em;
text-align :center;
margin:10px auto;
padding:20px 30px;
width: 100%;
}


.news-list{
  list-style: none outside;
  margin: 0 auto;
  padding: 0;
width:100%;
}

.news-list .item span{
  text-decoration: none;
  border-bottom: 1px solid #CCC;
  padding: 20px 20px;
}

.news-list .item:first-child span{
  border-top: 1px solid #CCC;
}

.news-list .item .date{
  margin: 0;
  font-size: 16px;
  color: #999;
text-align :rigth;
  width: 100%;
}

.news-list .item .title{
  margin: 0;
  width: 100%;
}
.news-list .item a:hover .title{
  color: #00F;
}



.txapp_dl{
display:block;
}

.txapp_dltxt{
text-align :center;

}



}