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


.allpage_title{
	background: url("../img/img_about_ti1.png") right top no-repeat;
	background-size: cover;
	min-height: 32vh;
	color: #FFFFFF;
	
}

.allpage_title-ti2{
	background: url("../img/img_asboutt2-title.png") left top no-repeat;
	background-size: cover;
	min-height: 32vh;
	color: #FFFFFF;
}

.allpage_title-ti3{
	background: url("../img/img_asbout3-title.png") right top no-repeat;
	background-size: cover;
	min-height: 32vh;
	color: #FFFFFF;
}



h2.subtitle{
	padding: 3rem 0;
    text-align: center;
    font-size: 2rem;
	color: #6D9AB7;
}

.tab-list{
	margin: 5rem auto;
}


.ti-list .tab-listcard{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 5rem auto;
}


.ti-list .tab-listcard div{
	width: 23%;
	margin:0.4rem auto;
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
	border-radius: 10px 10px 0 0;
}

.ti-list .tab-listcard .rudius img{
	border-radius: 10px 10px 0 0;
}

.ti-list .tab-listcard div.zoomInbox figcaption{
	padding: 10px;
}

.tab-list ul{list-style:none;}
/*tab-listcard-------------------------------------------*/

.tab-list{
	display: flex;
	justify-content: flex-start;
	overflow: hidden;
	margin: 5rem auto;
}

.block_list{
    display: block;
}


ul#headline {
width:150px;
margin: 0;
padding: 0;
list-style: none;

}

ul#headline li{
display: inline-block;
width:100%;
line-height: 30px;
margin:0.5rem -1px 0 0;
padding: 1rem 0;
background-color:#AAA;
text-align: center;
cursor: pointer;
}

ul#headline li.current{
background-color:#FFF;
border: 1px solid #AAA;
}


ul#story {
width: calc(100% - 10%);
margin:0 auto;
padding: 0;
list-style: none;
}

ul#story li{
display: none;
vertical-align: top;
background-color:#FFF;
padding:0 3rem ;
z-index: 2;
}

ul#story li.current{
display: block;
}


ul#story .tab-listcard{
    max-width: 1000px;
    width: 100%;
	padding:0;
    margin: 0 auto;
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
}

ul#story .tab-listcard div{
	width: 16.666%;
	margin-right: 0.25rem;
	margin-bottom: 1.5rem;
	border-radius: 8px;
	box-sizing: border-box;
	box-shadow: 1px 1px 3px #00000046

}

ul#story .tab-listcard div:last-child{
	margin-right: 0;
}

ul#story .tab-listcard div figure{
}

ul#story .tab-listcard div figcaption{
	line-height: 1.6;
	font-size:0.825rem;
	margin: 0.825rem 0.825rem 0;
	text-align: left;
}

.ti-tab2{
    max-width: 1200px;
	width:100%;
    margin: 0 auto;
}

.ti-tab2 .tab2-text{
	margin: 2rem 0;
}

.ti-tab2 .tab2-box{
    margin: 0 1rem;
	padding: 2rem;
	background: #6D9AB7;
	border-radius: 20px;
	color: #FFFFFF;
}

.ti-tab2 .tab2-box h2{
	border-bottom: 1px solid #FFFFFF;
	padding-bottom: .25rem;
}

.ti-tab3 .tab3-box{
	display: flex;
	justify-content: center;
	padding-bottom: 2rem;
}

.ti-tab3 .tab3-box .image-wrap{
	max-width: 300px;
	width: 40%;
}

.ti-tab3 .tab3-box .tab3-text{
	width: 60%;
	padding: 0 1.5rem;
}

.ti-tab3 .tab3-box .tab3-text:nth-child(odd){
	padding: 0 1.5rem 0 0;
}

.ti-tab3 .tab3-box .tab3-text h3{
	padding-bottom: 0.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #aaa;
}

.ti-tab3 .tab3-box .tab3-text ul{
    margin-block-start:1rem;
}


.info-text{
	padding:2rem;
	text-align: center;
	font-size:1.5rem;
}

@media screen and (max-width:768px){
ul#headline {
    width: 150px;
    margin: 0 0 0 1rem;
}
}

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

.tab-list{
	display: block;
	justify-content: flex-start;
	height: 100%;
	overflow: hidden;
	max-width: 1000px;
	margin: 1rem auto 3rem;
}

ul#headline {
    width: 90%;
	margin: 0 auto;
}

ul#headline li{
	padding: 0.5rem 0;
}
	
ul#story {
    width: 100%;
    margin: 2rem 0;
}	
	
ul#story li {
    padding: 0 1rem;
}



ul#story .tab-listcard div{
	width: 48%;
}

.ti-list .tab-listcard div {
    width: 47%;
    margin: 0.3rem auto;
}
    
.ti-tab3 .tab3-box{
    border: none;
    }

.ti-tab3 .tab3-box .tab3-text:nth-child(odd){
	padding: 0 1.5rem;
}
    

.ti-tab3 .tab3-box:nth-child(odd).wrap {
     flex-wrap:wrap;
}

.ti-tab3 .tab3-box:nth-child(even).reverse {
     flex-wrap: wrap-reverse;
}

.ti-tab3 .tab3-box .image-wrap{
	max-width: 300px;
    width: 60%;
	margin: 0 auto 1rem;
}

.ti-tab3 .tab3-box .tab3-text{
	width: 100%;
    padding: 1.5rem;
}




}