@charset "UTF-8";
/* =========================
   Base
========================= */
html {
    font-size: 100%;
}
body {
    margin: 0;
    font-size: 0.8rem;
    background-color: #e9f1ff;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
.wrapper {
    max-width: 600px;
    margin: auto;
    padding: 0 1rem;
}
.fade {
    opacity: 0;
}
.fade.show {
    animation: fadeIn 1.5s ease forwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/*--------------main用--------------------*/
h1, h2, h3, h6 {
    color: #FFFFFF;
}
h1 {
    font-size: 1rem;
    margin: 1rem 0;
}
h2 {
    border-top: 8px double #fff;
    border-bottom: 8px double #fff;
    text-align: center;
    font-size: 1.4rem;
}
h3 {
    text-align: center;
    margin-bottom: 1rem;
}
h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #243a64;
}
h5 {
    font-size: 1.5rem;
	line-height: 1.8rem;
    white-space: nowrap;
    margin-top: 0.5rem;
    text-align: center
}
.bold {
    font-weight: bold;
}
.big {
    font-size: 1.6rem;
}
.hero {
    display: flex;
    padding-bottom: 1rem;
	    max-width: 600px;
    margin: auto;
}
.hero_img {
    width: 40%;
    padding: 0.5rem;
}
.hero_text {
    width: 70%;
    white-space: normal
}

.top_left {
    background-color: #243a64;
    padding-bottom: 0.5rem;
}
.top_right {
    text-align: justify;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
    border-radius: 15px;
    border: 2px solid #000;
	width: 600px;
	max-width: 90%;

    margin: 3rem auto;
}
/*--------------table--------------------*/
table{
	border-collapse: collapse;
	margin: 3rem auto;
	max-width:95% ;
}
th,td{
		border: 1px #000 solid;
	padding: 0.5rem
}
th{
	width: 6rem;
	background-color: #c5e4e5;
	padding: 0.5rem
}
td{
	    background-color: #fff;
}
table li{
	margin-left:1.5rem
}
/*--------------section--------------------*/
h6 {
    background-color: #243a64;
    font-size: 1rem;
    margin: 1rem 0;
    padding: 0.2rem 3rem;
    background-image: url("../img/h6.png");
    background-position: top left;
    background-size: contain;
}
section {
    margin-bottom: 2rem;
}
.btn {
    background-color: #56c1ca;
    color: #243a64;
    display: inline-block;
    padding: 0.5rem;
    border-radius: 20px;
    border: 1px solid #243a64;
    font-weight: bold
}
/*--------------footer--------------------*/
footer {
    margin-top: 1rem;
    padding: 1rem;
    text-align: center;
    background-color: #243a64;
    display: flex;
    align-items: center;
    justify-content: space-around
}
footer a {
    text-decoration: none;
    color: #fff;
}
/*--------------デスクトップ用------------*/
@media(min-width:550px) {
	body{
		font-size: 1rem;
	}
	h1{
		font-size: 1.5rem;
	}
	h2{
	font-size: 3rem;	
			line-height: 3.5rem
	}
	h3{
		font-size: 1.5rem;
	}
	h4{
		color: #000;
	}
		h5{
		font-size: 1.8rem;
			line-height: 2.5rem;
	}

}
/*-----	.top{
		display: flex;
		gap:1rem;
		justify-content: center;
			background-color: #243a64;
		margin: auto
	}
	.top_left{
		width: 50%;
		max-width: 500px
	}
	.top_right{
		width: 45%;
		max-width: 450px;
	}
	.message{
		display: flex;
			justify-content:center;
		margin-top: 1rem
	}
	h6{
		font-size: 1.1rem;
	}
	.section_wrapper{
		display: flex;
		gap:2rem;
	}
	section{
		width: 50%;
	}
	.section_text{
			background-color:rgba(255,255,255,0.5);
	padding: 1rem;
	border-radius: 15px;
        border: 2px solid #000;
		height: 7rem
	}
	footer{
		justify-content: center;
		gap:10rem
}
}---------------*/