@charset "UTF-8";

/* ----------------------------------------------- CSS Information
 Style Info:     トップページ
 Notes:          
--------------------------------------------------------------- */

/* 共通 */

.main-image {
  line-height: 0;
  position: relative;
  padding-bottom: 5%;
}


#navi  {
	width: 100%;
	z-index: 100 !important;

	height: 0;
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	/*padding-top:3.125%;*/
}

#navi.naka  {
	width: 100%;
	z-index: 100 !important;
	background-color:#33b1df;
	height: 0;
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	padding-top:3.125%;
}



.osirase-bar{
position: absolute;
left: 2%;
bottom: 7%;
width:43.177%;
display: block;
    z-index: 500;
}
.osirase-bar img{
width: 100%;
}


.main-title {
	margin: 0 auto;
    padding: 5% 0;
}
.main-title img{
width:100%;
}

.bg-01{
position: absolute;
width:18.9%;
bottom: 0;
left: 0;
}
.bg-01 img{
width:100%;
}

.scl{
position: absolute;
width:4.427%;
bottom: 2%;
right: 19%;
}
.scl img{
width:100%;
}

/***** section 1 ******/
.sec01{
position: relative;
	width:100%;
    display: block;
    height: 0;
    padding-top: 38.07%;
    background-image:url("../img/top/sec01_bg.png");
   background-repeat: no-repeat;
    background-size: cover;
   /* margin-bottom: 5%;*/
}

#top-image  {
	width: 100%;
	margin: 0 auto;
	z-index: -100;
	position: relative;
}

.sec01-in{
margin-top: -38.07%;
font-size: 1vw;
}

.sec01-box{
width:52.083%;
margin: 0 auto;
padding: 8.8% 0;
}

.sec01-title{
width: 100%;
margin: 3% 0;
}
.sec01-title img{
width: 100%;
}

.sec01-txt{
text-align: center;
font-size: 1.4vw;
line-height: 210%;
color: #ffffff;
letter-spacing: 0.2rem;
font-weight: bold;
}

/***** section 2 ******/
.sec02-title{
width:36.458%;
margin: 0 auto 2%;
}
.sec02{
width:100%;
position: relative;
margin: 0 0;
}

.sec02-bg{
position: absolute;
width: 100%;
top:0;
left: 0;
}
.sec02-bg img{
width: 100%;
}

.sec02-in{
width:52.083%;
margin: 0 auto;
padding: 5% 0;
}

.sec02-title{
width:100%;
margin-bottom: 3%;
}
.sec02-title img{
width:100%;
}

.sec02-midasi{
width:100%;
line-height: 0;
}

.sec02-txt{
width:76%;
margin-left: 17%;
margin-bottom: 5%;
font-size: 1vw;
}

.ao-u{
color:#1044ff;
border-bottom: dashed 2px #1044ff;
}




/***** section 3 ******/
.sec03{
	width:100%;
    display: block;
    height: 0;
    padding-top: 38.38541%;
    background-image:url("../img/top/sec03_bg.png");
   background-repeat: no-repeat;
    background-size: cover;
 margin-bottom: 3%;
}
.sec03-in {
margin-top: -38.38541%;
font-size: 1vw;
height: 100%;
}

.sec03-box{
width:52.083%;
height: 100%;
margin: 0 auto;
position: relative;
}

.sec03-title{
position: absolute;
right: 0;
padding-top: 5%;
width:42.8%;
}
.sec03-title img{
width:100%;
}

.sec03-area{
width:100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.sec03-area-box{
width:33.33%;
padding-top: 3%;
}
.sec03-area-box img{
width:100%;
}

.sec03-area-box#cen{
width:33.33%;
padding-top: 10%;
}

.sec03-area-box#rig{
width:33.33%;
padding-top: 17%;
}

.btn-sec03 a{
width:29.4%;
margin: 0 auto;
background-color: #000000;
line-height: 170%;
font-size: 1.1vw;
text-align: center;
display: block;
text-decoration: none;
border-radius: 0.9vw;
color: #ffffff;
}

/***** section 4 ******/
.sec04{
	width:100%;
    display: block;
    height: 0;
    padding-top: 24.01%;
    background-image:url("../img/top/sec04_bg.png");
   background-repeat: no-repeat;
    background-size: cover;
 margin-bottom: 3%;
}
.sec04-in {
margin-top: -24.01%;
font-size: 1vw;
height: 100%;
}

.sec04-box{
width:52.083%;
height: 100%;
margin: 0 auto;
position: relative;
}

.btn-sec04 a{
width:29.4%;
margin: 32% 0 0 0;
line-height: 170%;
font-size: 1.1vw;
text-align: center;
display: block;
text-decoration: none;
border-radius: 0.9vw;
color: #ffffff;
border: 2px solid #ffffff;
}



/***** section 5 ******/
.sec05{
	width:100%;
    display: block;
    height: 0;
    padding-top: 35%;
    background-image:url("../img/top/sec05_bg.png");
   background-repeat: no-repeat;
    background-size: cover;
 margin-bottom: 5%;
}
.sec05-in {
margin-top: -35%;
font-size: 1vw;
height: 100%;
}

.sec05-box{
width:52.083%;
height: 100%;
margin: 0 auto;
position: relative;
}

.btn-sec05 {
width:30%;
margin: 0 auto;
display: block;
}

.sec05-txt{
margin: 40% auto 3%;
text-align: center;
font-size: 1.2vw;
font-weight: bold;
letter-spacing: 0.2rem;
}

.sec05-txt-u{
border-bottom: 2px dotted #1044ff;
}

.btn-sec05 img{
width: 100%;
}

/***** section 6 ******/
.sec06{
	width:100%;
    display: block;
 margin-bottom: 5%;
 position: relative;
 background-color: #fff5cc;
}

.sec06-title{
position: absolute;
left: 23.9585%;
top:-1.5%;
width:52.083%;
}
.sec06-title img{
width:100%;
}

.sec06-bg-l{
position: absolute;
left: 0;
top:0;
width: 20.9375%;
}
.sec06-bg-l img{
width:100%;
}

.sec06-bg-r{
position: absolute;
right: 0;
top:0;
width: 20.98958%;
}
.sec06-bg-r img{
width:100%;
}

.sec06-in{
width:52.083%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 3% 0;
}

.sec06-box1{
width:32%;
margin-bottom: 1%;
}
.sec06-box1 img{
width:100%;
}

.sec06-box2{
width:100%;
margin-bottom: 1%;
}
.sec06-box2 img{
width:100%;
}


/***** section 7 ******/
.sec07{
	width:100%;
    display: block;
    height: 0;
    padding-top: 13.541666%;
    background-image:url("../img/top/sec07-bg.png");
   background-repeat: no-repeat;
    background-size: cover;
 margin-bottom: 5%;
}

.sec07-in{
width:100%;
height: 100%;
margin-top: -13.541666%;
}

.sec07-btnarea{
width:71.5625%;
margin: 11% auto 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.sec07-btn a{
display: block;
width:12em;
background-color: #000000;
font-size: 1.4vw;
color: #ffffff;
text-decoration: none;
text-align: center;
font-weight: bold;
line-height: 170%;
}

/***** section 8 ******/
.sec08{
	width:100%;
    display: block;
    height: 0;
    padding-top: 46.8229%;
    background-image:url("../img/top/sec08_bg.png");
   background-repeat: no-repeat;
    background-size: cover;
 margin-bottom: 5%;
}

.sec08-in{
width:100%;
height: 100%;
margin-top: -46.8229%;
}

.sec08-title{
width:52.083%;
margin: 2% auto;
}
.sec08-title img{
width:100%;
}

.message{
width: 78.645%;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.m-box{
width:32.45%;
position: relative;
box-shadow: 5px 5px 5px rgba(16, 68, 255, 0.5);
background-color: #ffffff;
border-radius: 7px;
padding: 10px;
text-align: left;
font-size: 1vw;
}

.m-box-pic{
margin: -20% 0 0;
}
.m-box-pic img{
width:100%;
}

.m-box-name{
text-align: center;
font-size: 1.2vw;
line-height: 140%;
margin-bottom: 2%;
font-weight: bold;
}



/***** section 9 ******/
.sec09{
	width:100%;
    display: block;
 margin-bottom: 5%;
}

.sec09-in{
width:52.083%;
height: 100%;
margin: 0 auto;
}

.sec09-title{
width:100%;
margin-bottom: 3%;
}
.sec09-title img{
width:100%;
}

.sec09-btn a{
width:24.4%;
margin: 0 auto ;
display: block;
background-color: #000000;
color: #ffffff;
font-size: 1.2vw;
text-align: center;
border-radius: 1vw;
line-height: 170%;
font-weight: bold;
text-decoration: none;
}

.ai1ec-agenda-widget-view {
    max-width: 100% !important;
}

.sec09-box{
width:100%;
margin-bottom: 5%;
}

/***** section 10 ******/

.sec10{
	width:100%;
    display: block;
 display: flex;
 flex-wrap: wrap;
}

.sec10-w50{
width:50%;
line-height: 0;
}
.sec10-w50 img{
width:100%;
}

.sec10-w100{
width:100%;
line-height: 0;
}
.sec10-w50 img{
width:100%;
}


/*********************************************************************************************************************************************
ipad
*******************************************************************************************************************************************/
@media only screen and (max-width: 1024px) {





}
/*********************************************************************************************************************************************
スマホ
*******************************************************************************************************************************************/
@media only screen and (max-width: 699px) {
#header {
  /*display: none;*/
}
.sm-header {
  display: block;
}	

.pc-only{
	 display: none;
}
	
.sm-only{
	display: block;
}	

.drawer-hamburger {
    position: fixed;
    z-index: 3000;
    top: 0;
    display: block;
    box-sizing: content-box;
    width: 3rem;
    }

#navi {
	height: 50px;
	padding-top: 10px;
}
	
#navi.naka {
	height: 50px;
	padding-top: 10px;
}		
	
.navi_l {
        width: 75%;
    float: left;
    margin-left: 3%;
    margin-top: 3%;
}

.main-image {
    padding-bottom: 10%;
}

.osirase-bar {
    bottom: 15%;
}
    
.bar-txt {
    margin-top: -6%;
    font-size: 13px;
    line-height: 200%;
    color: #fff;
    padding-left: 37%;
}    

	
#top-image {
    width: 100%;
    margin: 60px auto 0;
    z-index: -100;
    position: relative;
    /* padding-top: 0; */
    height: auto;
}
	
.sec01 {
    background-image: url(../img/top/sec01_bg_sm.png);
    background-repeat: no-repeat;
    background-size: cover;
    /* margin-bottom: 5%; */
        padding-top: 53.7142%;
}

.sec01-in {
    margin-top: -53.7142%;
    font-size: 14px;
}

.sec01-box {
    width: 90%;
    margin: 0 auto;
    padding: 3% 0;
}

.sec01-title {
    width: 100%;
    margin: 3% 0;
}

.sec01-txt {
    text-align: center;
    font-size: 14px;
    line-height: 170%;
    }
    
.sec02-in {
    width: 90%;
    }
    
.sec02-txt {
    width: 76%;
    margin-left: 17%;
    margin-bottom: 5%;
    font-size: 14px;
}
    
.sec03 {
    width: 100%;
    display: block;
    padding: 0 0 5%;
    height: auto;
background: -moz-linear-gradient(left, #ffca00, #ffffae);
  background: -webkit-linear-gradient(left, #ffca00, #ffffae);
  background: linear-gradient(to right, #ffca00, #ffffae);
    margin-bottom: 3%;
}    
    
.sec03-in {
    margin-top: 0;
    font-size: 1vw;
    height: 100%;
}
    
.sec03-box {
    width: 90%;
    }
    
.sec03-title {
    position: relative;
    padding-top: 5%;
   width: 80%;
    margin: 0 auto;
}

.sec03-area {
    width: 80%;
    margin: 0 auto;
    }

.sec03-area-box {
    width: 100%;
    padding-top: 3%;
}

.sec03-area-box#cen {
    width: 100%;
    padding-top: 0;
}
    
.sec03-area-box#rig {
    width: 100%;
    padding-top: 0;
} 

.btn-sec03 a {
    width: 80%;
    margin: 0 auto;
    background-color: #000000;
    line-height: 200%;
    font-size: 14px;
    text-align: center;
    display: block;
    text-decoration: none;
    border-radius: 14px;
    color: #ffffff;
    padding: 3px 0;
}

.sec04 {
    width: 100%;
    display: block;
    height: 0;
    padding-top: 38.4166%;
    background-image: url(../img/top/sec04_bg_sm.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 3%;
}

.sec04-in {
    margin-top: -38.4166%;
    font-size: 14px;
    height: 100%;
}

.sec04-box {
    width: 80%;
    }

.btn-sec04 a {
    width: 90%;
    margin: 32% auto 0;
    line-height: 200%;
    font-size: 14px;
    text-align: center;
    display: block;
    text-decoration: none;
    border-radius: 14px;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.sec05 {
    width: 100%;
    display: block;
    height: 0;
    padding-top: 47.8543%;
    background-image: url(../img/top/sec05_bg_sm.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 5%;
}

.sec05-in {
    margin-top: -47.8543%;
    font-size: 1vw;
    height: 100%;
}

.sec05-txt {
    margin: 46% auto 3%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 130%;
}

.sec05-txt-u {
    border: none;
}

.btn-sec05 {
    width: 70%;
}

.sec06-title {
    position: absolute;
        left: 0;
    top: -2%;
    width: 100%;
}

.sec06-in {
    width: 90%;
    padding: 5% 0;
}

.sec07{
margin-bottom:10%;
}

.sec07-btnarea {
    width: 80%;
    margin: 11% auto 0;
}

.sec07-btn a {
    width: 7rem;
    font-size: 13px;
    }

.sec08 {
    width: 100%;
    display: block;
    padding: 0;
    height: auto;
background: -moz-linear-gradient(left, #005eaa, #84a0e9);
  background: -webkit-linear-gradient(left, #005eaa, #84a0e9);
  background: linear-gradient(to right, #005eaa, #84a0e9);
    margin-bottom: 5%;
} 

.sec08-in {
    margin-top: 0;
    font-size: 1vw;
    height: 100%;
    padding: 5% 0 0;
}

.sec08-title {
    width: 100%;
    margin: 0 auto 5%;
}

.message {
    width: 80%;
    margin: 0 auto;
    }

.m-box {
    width: 100%;
    font-size: 14px;
    margin-bottom: 10%;
}

.m-box-name {
    text-align: center;
    font-size: 16px;
}

.sec09-in {
    width: 94%;
    height: 100%;
    margin: 0 auto;
}

.sec09-btn a {
    width: 70%;
    font-size: 14px;
    border-radius: 14px;
    line-height: 200%;
}

.sec10 {
    margin-bottom: 5%;
}

.sec10-w50 {
    width: 100%;
    line-height: 0;
}


}