@charset "UTF-8";

/* common */

body{
	-webkit-text-size-adjust: 100%;
	padding:0;
	margin: 0;
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	background:#666666;/*#1b1b1b*/
	line-height: 1;
}
	
/* default */

div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,
h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,
th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;word-break: break-all;font-size:inherit;width:100%;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
.aligncenter{text-align:center;}
img{vertical-align: bottom;line-height: 1;}

a img{
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}

/*a img:hover{
	opacity:0.7;
}*/



/**/

.container{
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;/*100%*/
	height: auto;/*200vh*/
	overflow: hidden;
	position: relative;
	/*display: block;*/
	/*border:solid 2px #ff0000;*/
}

.topInner{
	width:100%;
	display: block ;
	/*background: url(/files/user/special/angels2021/img/top_banner.png) no-repeat center top;*/
}

/*.topInner .topTextArea1{
	background-color:#0089d1;
	color: #FFF;
	font-size: 2.5vw;
	padding: 20px;
	text-align: center;
}*/

.topBannerArea{
	position: relative;
	color: #FFF;
	font-weight: bold;
	/*background-color:#33ccff ;
	font-size: 1.6vw;*/
}
.topBannerArea img{
	width:100% ;
}
.topBannerArea div.text{
    position: absolute;
    left: 0;
    top: 0;
	width:100% ;
	/*background:#0089d1;
	opacity:0.8;*/
	margin:20px 0 0 0 ;
}
.topBannerArea h1 {
	font-weight: bold;
	text-align: center;
    font-size: 2.0rem;/*2.3rem 2.5vw*/
}
.topTextArea{
	background-color:#0089d1 ;
	color: #FFF;
	font-size: 1.2rem;/*1.6vw*/
	text-align: center;
	padding: 20px;
	line-height: 150%; 
}
.menuInner1,.menuInner2,.menuInner3,.menuInner4{
	width:100%;
	display: flex;
}

.boxImage{
	width:35%;/*45%*/
}	
.boxImage img{
	width:100%;
}	

.rightBoxText{
	width:65%;/*55%*/
	/*background-color:#ba0021 ;red*/
	padding: 0 10px 0 20px ;/*top right bottom left 50px 20px 100px 100px*/
	color: #FFF;
	font-size:1.2rem;/*26px 2.1vw*/
	text-align: right;
	line-height: 150%; 
}
h2{
	font-weight: bold;
	font-size: 2.2rem;/*3.5vw*/
	padding: 20px 0 10px 0;
	line-height: 150%; 
	/*letter-spacing: 3px;*/	
}

.bckclr1 { background-color:#ba0021 ;}/*red*/
.bckclr2 { background-color:#FFF ;}/*white*/
.bckclr3 { background-color:#003263 ;}/*blue*/

.leftBoxText1{
	width:65%;/*55%*/
	/*background-color:#FFF ;white*/
	padding: 0 20px 0 10px;/*top right bottom left*/
	color: #000000;
	font-size: 1.2rem;/*2.1vw*/
	text-align: left;
	line-height: 150%; 
}
.leftBoxText2{
	width:65%;/*55%*/
	/*background-color:#FFF ;white*/
	padding: 0 20px 0 10px;/*top right bottom left*/
	color: #FFF;
	font-size: 1.2rem;/*2.1vw*/
	text-align: left;
	line-height: 150%; 
}

.btn-square1 {
	display: inline-block;
	padding: 0.5rem 2rem;/*0.3em 0.8em*/
	text-decoration: none;
	background: #003263;/*ボタン色 紺*/
	color: #FFF;
	/*border-bottom: solid 2px #627295;4*/
	border-radius: 5px;
	margin: 1.8rem 0 0 0 ;/*20px 10px 0*/
	font-size: 0.8rem;/*2.1vw*/
}
.btn-square2 {
	display: inline-block;
	padding: 0.5em 2em;/*0.3em 0.8em*/
	text-decoration: none;
	background: #ba0021;/*ボタン色 赤*/
	color: #FFF;
	/*border-bottom: solid 2px #627295;4*/
	border-radius: 5px;
	margin: 1.8rem 0 0 0 ;/*20px 0*/
	font-size: 0.8rem;/*2.1vw*/
}
.btn-square1:hover, .btn-square2:hover{
	opacity:0.8;
}
.btn-square1:active, .btn-square2:active{
	/*ボタンを押したとき*/
	opacity:0.7;
}

.bottomInner{
	width:100%;
	display: flex;
}

.bottomBannerArea{
	background: url(/files/user/special/angels2021/img/about_JAE_banner_blue.png) no-repeat center top;
	background-color:#0089d1;
}

.bottomTextArea{
	width:30%;
	/*background-color:#0089d1;*/
	color: #FFF;
	font-size: 1.1rem;/*0.8rem 1.6vw*/
	text-align: left;
	padding: 20px;
	line-height: 150%; 
}

h3{
	font-weight: bold;
	font-size: 1.3rem;/*1.2rem 3.5vw*/
	padding: 5px 0 0 0;
	/*letter-spacing: 3px;*/	
}

.bottomTextArea span{
	color: #FFF;
	font-size: 1.2rem;/*3.5vw*/
	line-height: 200%; 
	margin-top:  20px;
	font-weight: bold;
	border-bottom: #FFF; 
}
.bottomTextArea span a{
	border-bottom: #FFF; 
}
.bottomTextArea-none{
	width:70%;
}



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

@media screen and (max-width: 768px){
.topBannerArea div.text{
	margin:0.7rem 0 0.7rem 0 ;
}
.topBannerArea h1	{
    font-size: 1.5rem;
}
.topTextArea{
	font-size: 1.0rem;
	padding: 1.0rem 2.0rem ;
	line-height: 110%; 
}

.boxImage{
	width:45%;
}	

h2{
	font-size: 1.5rem;
	padding: 1.0rem 0  0.8rem 0;
	line-height: 110%;
}	
.rightBoxText{
	width:55%;
	padding: 0 1.0rem 0 2.0rem ;/*top right bottom left*/
	font-size: 1.2rem;
	line-height: 120%; 
}
.leftBoxText1{
	width:55%;
	padding: 0 20px 0 10px;
	font-size: 1.2rem;
	line-height: 120%; 
}
.leftBoxText2{
	width:55%;
	padding: 0 20px 0 10px;
	font-size: 1.2rem;
	line-height: 120%; 
}
.rightBoxText img.button, .leftBoxText img.button, .bottomTextArea img.button{
	width: 30%;/*160px*/
	margin: 1.2rem 0 0 0;
}

.btn-square1 {
	display: inline-block;
	padding: 0.5rem 1.0rem;
	text-decoration: none;
	background: #003263;/*ボタン色 紺*/
	color: #FFF;
	border-radius: 5px;
	margin: 1.0rem 0 0 0 ;
	font-size: 1.0rem;
}

.btn-square2 {
	display: inline-block;
	padding: 0.5rem 1.0rem;
	text-decoration: none;
	background: #ba0021;/*ボタン色 赤*/
	color: #FFF;
	border-radius: 5px;
	margin: 1.0rem 0 0 0 ;
	font-size: 1.0rem;
}

.bottomInner{
	width:100%;
	display: flex;
}

.bottomTextArea{
	width:30%;
	padding: 5px;
}
h3{
	font-size: 1.2rem;
	padding: 0.6rem 0 0.3rem 0;
}
.bottomTextArea p{
	font-size: 1.0rem;
	line-height: 120%; 
}
	
.bottomTextArea span{
	font-size: 1.2rem;
	line-height: 120%; 
	margin-top:  5px;
}
.bottomTextArea span a{
	border-bottom: #FFF; 
}
.bottomTextArea-none{
	width:70%;
}
	
	
} 




@media screen and (max-width: 600px){	
	
.topBannerArea div.text{
	margin:5px 0 5px 0 ;
}
.topBannerArea h1	{
    font-size: 1.0rem;
}
.topTextArea{
	font-size: 0.7rem;
	padding: 5px;
	line-height: 110%; 
}

.boxImage{
	width:50%;/*60%*/
}	

h2{
	font-size: 1.0rem;
	padding: 0.3rem 0 ;
	line-height: 110%;
}	
.rightBoxText{
	width:50%;/*40 55%*/
	padding: 0 10px 0 20px ;/*top right bottom left*/
	font-size:0.8rem;
	line-height: 110%; 
}
.leftBoxText1{
	width:50%;/*55%*/
	padding: 0 20px 0 10px;
	font-size: 0.8rem;
	line-height: 110%; 
}
.leftBoxText2{
	width:50%;/*55%*/
	padding: 0 20px 0 10px;
	font-size: 0.8rem;
	line-height: 110%; 
}
.rightBoxText img.button, .leftBoxText img.button, .bottomTextArea img.button{
	width: 25%;/*160px*/
	margin: 1.0rem 0 0 0;
}

.btn-square1 {
	display: inline-block;
	padding: 0.2rem 0.8rem;
	text-decoration: none;
	background: #003263;/*ボタン色 紺*/
	color: #FFF;
	border-radius: 5px;
	margin: 5px 0 0 0 ;
	font-size: 0.8rem;
}

.btn-square2 {
	display: inline-block;
	padding: 0.2rem 0.8rem;
	text-decoration: none;
	background: #ba0021;/*ボタン色 赤*/
	color: #FFF;
	border-radius: 5px;
	margin: 5px 0 0 0 ;
	font-size: 0.8rem;
}

.bottomInner{
	width:100%;
	display: flex;
}

.bottomTextArea{
	width:30%;
	padding: 5px;
}
h3{
	font-size: 0.9rem;
	padding: 5px 0 0 0;
}
.bottomTextArea p{
	font-size: 0.7rem;
	line-height: 110%; 
}
	
.bottomTextArea span{
	font-size: 0.8rem;
	line-height: 120%; 
	margin-top:  5px;
}
.bottomTextArea span a{
	border-bottom: #FFF; 
}
.bottomTextArea-none{
	width:70%;
}
	
	
}