body{
	padding: 0;
	margin: 0;
	background: #FFF;
}

h1{
	padding:10px 0;
    margin:0;
	text-align:center;
	text-decoration:underline;
	font-size:18px;
}

h2{
	max-width:340px;
    margin:0 auto;
}

main h3{
	padding:10px 0;
	margin:0 0 20px;
	text-align:center;
	color:#ee1d23;
	background:#fff;
	border-top:5px solid #ee1d23;
	border-bottom:5px solid #ee1d23;
	font-size:32px;
	font-weight:bold;
}

p{
	font-size:18px;
}

p.center{
	text-align:center;
}

/* opening
-----------------------------------------------*/
#opening{
	/*pointer-events: none;*/
	position: fixed;
	top: -120vh;
	left: 0;
	background: #E7151A;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	transition-duration: 1.0s;
	padding: 20px;
	z-index: 10000000;
}

#opening img{
	width:auto;
	max-width: 380px;
	height:auto;
	max-height: 678px;
}

#opening.active{
	transition-duration:0s;
	top: 0;
}

/* eyecatch
-----------------------------------------------*/
#eyecatch{
	background:url(../img/0potal_top_back.svg);
}

#eyecatch .inner{
	max-width:800px;
	height:480px;
	margin:0 auto;
	/*position:relative;*/
}

/*#eyecatch img.t-icon{
	max-width:100px;
	width:100%;
	height:auto;
	position:absolute;
	bottom:20px;
	right:20%;
}
*/

#eyecatch a{
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 10px;
}


#eyecatch img{
	display: none;
}



/* ############ 680px以上 ###########*/
@media(min-width:680px){
	#eyecatch img#pcitem{
		max-width:700px;
	    width:calc(100% - 40px);
	    height:auto;
		margin:0 auto;
		display:block;
	}
}

/* ############ 680px以下 ###########*/
@media(max-width:679px){

	#eyecatch .inner{
		width:100%;
		height:100%;
		padding: 10px;
		margin:0 auto;
		position:relative;
		display: flex;
		align-items: center;
	}

	#eyecatch img#spitem{
		max-width:450px;
	    width:100%;
	    height:auto;
		margin:0 auto;
		display:block;
	}
}


/*#eyecatch img.t-word{
	max-width:200px;
    width:100%;
    height:auto;
	margin:0 auto;
	display:block;
	position:absolute;
	bottom:80px;
	left:20%;
}
*/


/*contents
------------------------------------------*/
#contents{
	background: #FFF;
}

/*loginout
------------------------------------------*/
#loginout{
	position: fixed;
	top: 60px;
	left: 0;
	width: 100%;
	z-index: 10000;
}


/*main
------------------------------------------*/
.title {
    max-width: 280px;
    padding-bottom: 40px;
    font-size: 30px;
    font-weight: bold;
}

.title h3{
	padding: 0;
	margin: 0;
}

.back,
.readmore{
	position: absolute;
	top: 10px;
	right: 0;
	display: block;
	width: 100px;
	color: #00f;
	text-decoration: underline;
	margin: 0 0 0 auto;
	cursor: pointer;
	font-size: 14px;
	padding: 5px;
}


/*button
------------------------------------------*/
.button1{
	padding:5px 30px;
	margin:0 auto;
	color:#fff;
	background:#ff1744;
	text-align:center;
	text-decoration:none;
	display:inline-block;
	border-radius:5px;
	font-size:18px;
	font-weight:bold;
}



#m-btn{
	max-width:600px;
	list-style:none;
	padding:12px 0;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

#m-btn li{
	padding:0;
	margin:5px;
}

#m-btn li span,
#m-btn li a{
    /*max-width:150px;*/
    width:100%;
    padding:15px 0;
    color:#fff;
    background:#ee2a29;
    text-align:center;
    text-decoration:none;
    display:block;
    border-radius:15px;
    font-size:18px;
    font-weight:bold;
    line-height: 1.0;
    cursor: pointer;
}


/*################################## 600以上 ##################################*/
@media(min-width:600px){
#m-btn li{
	width:calc((100% / 3) - 10px);
}

#m-btn li a{
	margin:0 auto;
}

}

/*################################## 600以下 ##################################*/
@media(max-width:600px){
#m-btn li{
	width:calc((100% / 2) - 10px);
}

#m-btn li a{
	margin:0;
}

#m-btn li:nth-child(odd) > a{
	margin-left:auto;
}

}

article p{
	max-width:500px;
	padding:0 10px;
	margin:0 auto;
}

article img{
	max-width:600px;
	width:100%;
	margin:0 auto;
	display:block;
}

article img{
    width:100%;
    height:auto;
    padding:20px;
    margin:0 auto;
    display:block;
    box-sizing:border-box;
}

article .haku{
	padding:0 30px 15px;
}

article .haku img{
	padding-bottom:0;
}

article .toner{
		padding:0;
}


article h3 {
    padding: 10px 0;
    margin: 0 0 20px;
    text-align: center;
    color: #ee1d23;
    background: #fff;
    border-top: 5px solid #ee1d23;
    border-bottom: 5px solid #ee1d23;
    font-size: 32px;
    font-weight: bold;
}


.apply{
	padding:0;
}

.red{
	padding:30px 20px 90px;
	color:#f16343;
}

.mArea{
    padding:20px;
	background:#fffcdd;
}

.mArea h2{
	padding:40px 0 20px;
}

.mArea:first-child{
    padding:40px 20px 20px;
}

.mArea:last-child{
    padding:70px 20px 90px;
}

.topics{
    max-width:160px;
    width:100%;
    height:auto;
    padding:0 0 10px;
    margin:0 auto;
    display:block;
}

.title{
	max-width:280px;
	padding-bottom:40px;
	font-size:30px;
	font-weight:bold;
}

/*footer
------------------------------------------*/
footer {
    padding: 10px 0;
    background: #ccc;
    text-align: center;
}

footer span {
    color: #fff;
    font-size: 14px;
}