@charset "utf-8";

/*google fontsの読み込み*/
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap');


/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body,html {width: 100%;height: 100%;}
body {
	margin: 0px;
	padding: 0px;
    background-color: #fff;
	color: #333;	/*全体の文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 12px;	/*文字サイズ*/
	line-height: 2;
	-webkit-text-size-adjust: none;
}
h1 {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/


/*container。サイト全体を囲むブロック
---------------------------------------------------------------------------*/
/*containerブロック共通*/


/*contentsブロック
---------------------------------------------------------------------------*/
#contents {    
	height: 100%;
	width: 100%;
}



/*mainブロック*/
#main {
	overflow: auto;
	padding: 5%;
}

#main h1.toph1 {
	font-family: 'Poiret One';	/*冒頭のgoogle fontsの指定*/
    text-align: center;
    padding-top: 5%;
    font-size: 60px;	
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる設定*/
	color: #448db3;
}
#logo{
    width: 100%;
    height: auto;
}
#logo ul{
    width: 100%;
    display: block;
    margin:0;
	padding:0;
    overflow: hidden
}

#logo li{
    width: 35%;
    float: left;
    padding-left: 10%;
}

ul::after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
#logo a{
    display: block;
    width: 100%;
}
#logo img{
    display: block;
}

.hover1{
	transition: all 0.6s ease 0s;
}
.hover1:hover{
	cursor: pointer;
	transform: scale(1.1, 1.1);
}

#online div{
    width: 40%;
    margin: 0 auto;
}
#online img{
    display: block;
}
#online a{
    display: block;
}

/* input buttom
-----------------------------------------------------*/

#buttom{
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

#buttom input{
    margin: 20px auto 0;
    font-size: 180%;
    display: block;
}
 #buttom p{
     margin-top: 0;
     font-size: 120%;
 }

 /*パンフレット部分---------------------------------------------------------*/

 #flyer {
    width: 80%;
    height: auto;
    margin: 5% auto 0;
    overflow: hidden;
 }
 #flyer h2{
     text-align: center;
     background-color: #87cefa;
 }

 #flyer .left{
     width: 47%;
     height: auto;
     float: left;
 }
 #flyer .right{
     width: 47%;
    height: auto;
    float: right;
 }



/*footerブロック
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: right;
	padding: 30px 0;
}
footer {
	padding-bottom: 10px;
}
footer a {
	text-decoration: none;
}





/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){


/*mainブロック
---------------------------------------------------------------------------*/
/*mainブロック*/

/*main h1*/
#main h1{
    text-align: center;
    padding: 7% 0 3% 0;
    font-size: 2em;
}

#main h1.toph1{
	padding: 5% 0;
}


/*footerブロック
---------------------------------------------------------------------------*/
footer {
    padding-bottom: 100px;
    }
footer .pr {display: block;}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*mainブロック
---------------------------------------------------------------------------*/
/*h2タグ*/

#main h1.toph1{
	font-size: 2em;
}
    
#logo .left{
    width: 48%;
    float: left;    
    padding-left: 1%;
}
#logo .right{
    width: 48%;
    float: right;
    padding-right: 1%;
    padding-left: 0;
}

    
#online div{
    width: 50%;
}
    
     
#buttom {
    width: 100%;
}
    
#buttom input{
    margin: 10px auto 0;
    font-size: 120%;
    display: block;
}
#flyer {
    width: 100%;
 }