@charset "UTF-8";
@import url("style04_3.css");
@import url("style04_3_3.css");

html{
    font-size: 100%
}
body {
    background-color: rgb(255, 255, 255);
    font-family: "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.5rem;
    color: #5b5c76;
	background-size: cover
}

a {
    text-decoration:none;
}

img {
    width: 100%;
	max-width: 300px;
	margin: auto;
}

@media screen and (max-width: 480px){
	.main-nav {
		display: none;
	}
	
	#hamburger {
        position: relative;
        display: block;
        width: 30px;
        height: 25px;
        margin: 0 0 0 auto;
		margin-top: 35px;
		margin-right: 10PX;
    }

	#hamburger span {
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 4px;
		border-radius: 2px;
        background-color: #5b5c76;
        transform: translateY(-50%);
    }
	
	#hamburger::before {
       content: '';
       display: inline-block;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 4px;
	   border-radius: 2px;
       background-color: #5b5c76;
    }
	
    #hamburger::after {
       content: '';
       display: inline-block;
       position: absolute;
       bottom: -1.5%;
       left: 0;
       width: 100%;
       height: 4px;
	   border-radius: 2px;
       background-color: #5b5c76;
    }
	
	    .main-nav {
       z-index: 1;
       position: fixed;
       top: 0;
       left: 0;
	   text-align: center;
       width: 100%;
       height: 100vh;
       display: block;
       width: 100%;
       background: rgba(0, 0, 0, .8);
       transition: all .2s ease-in-out;
       opacity: 0;
       transform: translateY(-100%);
    }
	
	    .main-nav ul {
       padding: 0;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       height: 100%;
    }
        .main-nav li {
       margin: 0;
       padding: 0;
    }
        .main-nav li span {
       font-size: 15px;
       color: #fff;
    }
        .main-nav li a, .main-nav li span {
       display: block;
       padding: 20px 0;
    }
	
	/*基準となるli要素*/
        .main-nav .close {
       position: relative;
       padding-left: 20px;
}
    /*バツ印線1*/
        .main-nav .close::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 0;
       display: block;
       width: 16px;
       height: 1px;
       background: #fff;
       transform: rotate( 45deg );
    }
    /*バツ印線2*/
      .main-nav .close::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 0;
       display: block;
       width: 16px;
       height: 1px;
       background: #fff;
       transform: rotate( -45deg );
    }
	
	 .toggle {
       transform: translateY( 0 );
       opacity: 1;
    }
	
	
	
	.logo {
       width: 200px;
       margin-top: 24px;   
    }
	
	.page-title_2 {
		width: 400px;
		margin: auto;
		margin-top: 50PX;
	}
	
	h3 {
		margin: auto;
		font-size: 25px;
	}
	.img_02 {
		width: 43px;
		height: 40px;
	}
	
	.wrapper-grid {
		width: 400px;
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(1,1fr);
	    margin: auto;
	    margin-bottom: 80px;
    }
	
	.message {
		width: 320px;
		margin: auto;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	
	.message_2 {
		width: 330px;
		line-height: 30px;
		font-size: 17px;
		text-align: justify;
	}
	}