@charset "utf-8";
/* reset */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p {
	margin: 0;
	padding: 0;
	font-size: 100%;
	
	/*********** 明朝font-family ***********/
	/*
	font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ＭＳ Ｐ明朝','MS PMincho',sans-serif;
	*/

	/*********** ゴシックfont-family ***********/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

    html,body{
        overflow-x : hidden;
        overflow-y : auto;
    }


@media screen and (min-width: 0px) and (max-width: 480px){

    .flexbox{
        display: flex;
        justify-content: space-around;
    }
    
    .inner{
        max-width: 480px;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    .main_vis{
        background-image: url("../img/bg_01.png");
        background-size: cover;
        background-position: center;
        padding: 3% 0 0 0;
    }
    
    .main_vis div.titlebox{
        width: 62.6666667%;
        height: auto;
        background-color: #243e4d;
        margin-left: 2%;
        padding: 1% 0 0.5% 0;
        margin-bottom: 1%;
    }
    
    .main_vis div.subtitlebox{
        width: 62.6666667%;
        height: auto;
        margin-left: 2%;
        padding: 1% 0 0.5% 0;
    }
    
    .main_vis p.title{
        text-align: center;
        color: #fff;
        font-size: 6vw;
        font-family: "OCRB";
    }
    
    .main_vis p.subtitle{
        color: #243e4d;
        font-size: 4vw;
        text-align: center;
        font-family: "ヒラギノ明朝 StdN W7";
        font-weight: bold;
    }
    
    hr{
        width: 62.6666667%;
        height: 2px;
        background-color: #243e4d;
        padding: 0;
        margin: 0;
        border: none;
        margin-left: 2%;
        margin-bottom: 3%;
    }
    
    .main_vis img.img_01{
        width: 62.6666667%;
        height: auto;
        display: block;
        margin-left: 2%;
        margin-bottom: 3%;
    }
    
    .main_vis img.logo{
        width: 62.6666667%;
        height: auto;
        display: block;
        margin-left: 2%;
        margin-bottom: 3%;
    }
    
    .main_vis img.img_02{
        position: relative;
        z-index: 2;
        width: 62.6666667%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    .main_vis div.under{
        width: 100%;
        height: 2vh;
        margin-top: -3.5%;
        background-color: #243e4d;
    }
    
    
    
    
    
    .contents01{
        background-image: url("../img/bg_02.png");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        padding: 0 0 3% 0;
    }
    
    .contents01 div.h{
        max-width: 480px;
        height: auto;
        background-color: #243e4d;
        padding: 3% 0;
        margin-bottom: 2%;
    }
    
    .contents01 div.h img.img_13{
        width: 90%;
        height: auto;
        display: block;
    }
    
    .contents01 div.h img.img_20{
        width: 90%;
        height: auto;
        display: block;
    }
    
    .contents01 img.img_03{
        width: 91.583333%;
        height: auto;
        display: block;
        margin-left: 2%;
        margin-bottom: 2%;
    }
    
    .contents01 img.img_04{
        width: 65.583333%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 3%;
    }
    
    .contents01 img.img_05,.img_06,.img_07,.img_08{
        width: 20.833333%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 3%;
    }
    
    .contents01 img.img_09,.img_10,.img_11,.img_12{
        width: 20.833333%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    .contents01 img.img_21{
        width: 93.333333%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 3%;
    }
    
    .contents01 img.img_22{
        width: 93.333333%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 1%;
    }
    
    .contents01 img.img_23{
        width: 75.5%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-left: 4%;
    }
	
	form input[type="image"]{
		position: relative;
		width: 85%;
		height: auto;
		display: block;
		margin: 0 auto;
		margin-top: 4%;
		z-index: 99;
	}
    
    .contents01 img.img_24{
        width: 70.75%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-top: 1%;
    }
    
    
    
    
    
    .contents02{
        background-image: url("../img/bg_03.png");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        padding: 0 0 3% 0;
    }
    
    .contents02 div.h{
        max-width: 480px;
        height: auto;
        background-color: #243e4d;
        padding: 3% 0;
        margin-bottom: 2%;
    }
    
    .contents02 div.h img.img_14{
        width: 90%;
        height: auto;
        display: block;
    }
    
    .contents02 img.img_15,.img_16,.img_17,.img_18{
        width: 22.5%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 3%;
    }
    
    .contents02 img.arrow{
        width: 10.166667%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 3%;
    }
    
    .contents02 img.img_19{
        width: 91.666667%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    
    
    
    
    .contents03{
        background-image: url("../img/bg_02.png");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
    
    .contents03 div.h{
        max-width: 480px;
        height: auto;
        background-color: #243e4d;
        padding: 2% 0;
        margin-bottom: 2%;
    }
    
    .contents03 div.h img.img_25{
        width: 90%;
        height: auto;
        display: block;
    }
    
    .contents03 img.img_26{
        width: 95%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 5%;
        padding: 0 2.5%;
    }
    
    .contents03 img.img_27{
        width: 95%;
        height: auto;
        display: block;
        margin: 0 auto;
        padding: 0 2.5%;
        margin-bottom: 5%;
    }
    
   .contents03 img.img_02{
        position: relative;
        z-index: 2;
        width: 62.6666667%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    .contents03 div.under{
        width: 100%;
        height: 3vh;
        margin-top: -3.5%;
        background-color: #243e4d;
    }
	
	
	
	/***** footer *****/
	footer{
        background-color: #243e4d;
		padding-top: 1%;
		padding-bottom: 1%;
	}
	
	footer p{
		text-align: center;
		line-height: 1.7em;
		color: #fff;
		font-size: 0.6em;
	}
	
	footer p a{
		text-decoration: none;
		color: #fff;
	}

}


@media screen and (min-width: 480px) {

    .flexbox{
        display: flex;
        justify-content: space-around;
    }
    
    .inner{
        max-width: 1200px;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    .main_vis{
        background-image: url("../img/bg_01.png");
        background-size: cover;
        background-position: center;
        padding: 3% 0 0 0;
    }
    
    .main_vis div.titlebox{
        width: 62.6666667%;
        height: auto;
        background-color: #243e4d;
        margin-left: 2%;
        padding: 1% 0 0.5% 0;
        margin-bottom: 0.5%;
    }
    
    .main_vis div.subtitlebox{
        width: 62.6666667%;
        height: auto;
        margin-left: 2%;
        padding: 1% 0 0.5% 0;
        margin-bottom: 0.5%;
    }
    
    .main_vis p.title{
        text-align: center;
        color: #fff;
        font-size: 5.4vw;
        font-family: "OCRB";
    }
    
    .main_vis p.subtitle{
        color: #243e4d;
        font-size: 3.7vw;
        text-align: center;
        font-family: "ヒラギノ明朝 StdN W7";
        font-weight: bold;
    }
    
    hr{
        width: 62.6666667%;
        height: 3px;
        background-color: #243e4d;
        padding: 0;
        margin: 0;
        border: none;
        margin-left: 2%;
        margin-bottom: 3%;
    }
    
    .main_vis img.img_01{
        width: 62.6666667%;
        height: auto;
        display: block;
        margin-left: 2%;
        margin-bottom: 3%;
    }
    
    .main_vis img.logo{
        width: 62.6666667%;
        height: auto;
        display: block;
        margin-left: 2%;
        margin-bottom: 3%;
    }
    
    .main_vis img.img_02{
        position: relative;
        z-index: 2;
        width: 62.6666667%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    .main_vis div.under{
        width: 100%;
        height: 8vh;
        margin-top: -3.5%;
        background-color: #243e4d;
    }
    
    
    
    
    
    .contents01{
        background-image: url("../img/bg_02.png");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        padding: 0 0 3% 0;
    }
    
    .contents01 div.h{
        max-width: 1920px;
        height: auto;
        background-color: #243e4d;
        padding: 2% 0;
        margin-bottom: 2%;
    }
    
    .contents01 div.h img.img_13{
        width: 90%;
        height: auto;
        display: block;
    }
    
    .contents01 div.h img.img_20{
        width: 90%;
        height: auto;
        display: block;
    }
    
    .contents01 img.img_03{
        width: 91.583333%;
        height: auto;
        display: block;
        margin-left: 2%;
        margin-bottom: 2%;
    }
    
    .contents01 img.img_04{
        width: 65.583333%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 3%;
    }
    
    .contents01 img.img_05,.img_06,.img_07,.img_08{
        width: 20.833333%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 3%;
    }
    
    .contents01 img.img_09,.img_10,.img_11,.img_12{
        width: 20.833333%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    .contents01 img.img_21{
        width: 93.333333%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 3%;
    }
    
    .contents01 img.img_22{
        width: 93.333333%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 1%;
    }
    
    .contents01 img.img_23{
        width: 75.5%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-left: 4%;
    }
	
	form input[type="image"]{
		position: relative;
		width: 68.333333%;
		height: auto;
		display: block;
		margin: 0 auto;
		margin-top: 4%;
		z-index: 99;
	}
    
    .contents01 img.img_24{
        width: 70.75%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-top: 1%;
    }
    
    
    
    
    
    .contents02{
        background-image: url("../img/bg_03.png");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        padding: 0 0 3% 0;
    }
    
    .contents02 div.h{
        max-width: 1920px;
        height: auto;
        background-color: #243e4d;
        padding: 2% 0;
        margin-bottom: 2%;
    }
    
    .contents02 img.img_15,.img_16,.img_17,.img_18{
        width: 22.5%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 3%;
    }
    
    .contents02 img.arrow{
        width: 10.166667%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 3%;
    }
    
    .contents02 img.img_19{
        width: 91.666667%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    
    
    
    
    .contents03{
        background-image: url("../img/bg_02.png");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
    
    .contents03 div.h{
        max-width: 1920px;
        height: auto;
        background-color: #243e4d;
        padding: 2% 0;
        margin-bottom: 2%;
    }
    
    .contents03 div.h img.img_25{
        width: 90%;
        height: auto;
        display: block;
    }
    
    .contents03 img.img_26{
        width: 63.416667%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 5%;
        padding: 0 2.5%;
    }
    
   .contents03 img.img_02{
        position: relative;
        z-index: 2;
        width: 62.6666667%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    .contents03 div.under{
        width: 100%;
        height: 10vh;
        margin-top: -3.5%;
        background-color: #243e4d;
    }
	
	
	
	/***** footer *****/
	footer{
        background-color: #243e4d;
		padding-top: 1%;
		padding-bottom: 1%;
	}
	
	footer p{
		text-align: center;
		line-height: 1.7em;
		color: #fff;
		font-size: 0.8em;
	}
	
	footer p a{
		text-decoration: none;
		color: #fff;
	}

}