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

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: #407034;
    text-decoration-line: none;
}
a:hover { 
    color: #407034;
}

/*ヘッダー
-------------------------------------*/
.header {
	display: flex;
    flex-direction: row;
    padding: 2rem 0 0 0;

}



h1 {
   width: 300px;
margin-bottom: 15px;
}


@media screen and (max-width: 768px){
h1 {
   width: 230px;
}

}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.header {
	flex-direction: column;
    margin-bottom: 10px;
}
.header #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
}

.header li {
	padding-top: 0;
}

/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}


    
/*メイン画像
-------------------------------------*/
.mainimg {
    width: 100vw;
    height: 500px;
	margin: 0 0 -5rem 0;
background-color: #fff;
background-image: url(../img/top.png);    /* 背景画像指定 */
background-repeat:;
background-position: center;
background-size: 100%;

}


.midashi {
 padding: 0.2em 0.5em;
margin: 20px auto 0;
position: relative;
font-size: 75px;
text-align: center;
font-weight: bold; 
color:#595757;
}

.after {
 padding: 0.5em 0.5em;
margin-top:  20px;
display: block;
font-size: 60px;
position: relative;
margin: 60px auto 0;

}
 

@media screen and (max-width: 1024px){
.mainimg {
    width: 100vw;
    height: 400px;
background-size: 100%;
	margin: 0 0 -18rem 0;


}
.midashi {
 padding: 0.5em 0.5em;
margin: 50px auto 0;
position: relative;
font-size: 45px;
text-align: center;

}

.after {
margin-top:  5px;
display: block;
font-size: 20px;
position: relative;
margin: -50px auto 0;

}

}






/*メインコンテンツ
-------------------------------------*/
main {
    margin: 5rem 0 0 0;
}


section {
	margin:  5rem 0;
	padding: 3rem 0;
}

.backimg {
    width: 100%;
height: 500px;
background-color: #f8f3e1;
position: relative;
background-image: url(../img/sec03.png);    /* 背景画像指定 */
background-repeat: 繰り返しの指定;
background-size: 650px;
background-position: right bottom;

}




.gray-back {
	background-color: #f4f4f4;
}

/*改行*/

@media screen and (min-width: 768px){   
  .br-pc { display:inline; }
  .br-sp { display:none; }
}
@media screen and (max-width: 768px){   
  .br-pc { display:none; }
  .br-sp { display:inline; }
}

/*section1の四角*/

.title-box1 {
    margin-left: auto;
    margin-right: auto;
width: 100%;
    padding: 1em 0em;
    margin: 7em 0;
    background: #FFFFFF;/*背景色*/
  border-radius: 30px;
opacity: 0.8;
}


.title-box1-title {
 padding: 0em 1em;
	margin: 0 0 2rem 0;

position: relative;
font-size: 45px;
text-align: center;
color:#727171;
}

.title-box1-p {
 padding: 0.5em 0.5em;
width: 90%;
margin-top:  10px;
display: block;
font-size: 20px;
position: relative;
margin: -10px auto 0;
}


.list04 {
  border: solid 2px #407034;
  border-radius: 20px;
  padding: 1em 3em 0.5em 7em;
  position: relative;
}

.list04 li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
font-size: 35px;
font-weight: bold; 
color:#407034;
}

.list04 li:before {

  font-family: "Font Awesome 5 Free";
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 2em;/*左端からのアイコンまでの距離*/
  color: #407034;/*アイコン色*/
}

.list04 p {
  line-height: 1.5;
  padding: 0.5em 0;
font-size: 20px;

}





@media screen and (max-width: 1024px){

.backimg {
    width: 100%;
height: 500px;
background-size: 350px;



}

.title-box1 {
    padding: 2.0em 0em;
    margin: 3em 0;
    background: #FFFFFF;/*背景色*/
}
.title-box1-title {
font-size: 35px;
}

.list04 {
  border-radius: 20px;
  padding: 0.5em 1.5em 0.5em 3em;
  position: relative;
}

.list04 p {
font-size: 10px;

}

}

/*section2
-------------------------------------*/
.backimg02 {
    width: 100%;
	margin: 0 0 5rem 0;
background-color: #FFFFFF;
position: relative;

}


.border-radius {
padding: 35px;
	margin-bottom: 3rem;
  width: 100%;
  height: 120px;
  line-height: 25px;
  background-color: #DDDC96;
  border-radius: 30px;
  text-align: center;
font-size: 1.2em
}

.midashi03 {
   padding: 1rem 0 2rem;
    margin-bottom: 3rem;
    background: linear-gradient(90deg, #407034 0% 100%);
    background-repeat: no-repeat;
    background-size: 4rem 0.4rem;
    background-position: center bottom;
    font-weight: bold;
    font-size: 35px;
    text-align: center;
}
@media screen and (max-width: 768px){

.backimg02 {
    width: 100%;
background-size: 250px;
}
.midashi03 {
margin bottom: 3em;
position: relative;
font-size: 25px;
text-align: center;
}
.border-radius {
padding: 15px;
	margin-bottom: 4rem;
  width: 100%;
  height: 120px;
  line-height: 25px;
  background-color: #DDDC96;
  border-radius: 30px;
  text-align: center;
font-size: 1.2em
}

}
/*section3
-------------------------------------*/
.backimg03 {
width: 100%;

margin: 0 0 5rem 0;
position: relative;
background-size: 400px;
background-image: url(../img/sec04.png);    /* 背景画像指定 */

}

.border-radius02 {
padding: 50px;
	margin-bottom: 3rem;
  width: 100%;
  height: 120px;
  line-height: 25px;
  background-color: #FFFFFF;
  border-radius: 30px;
  text-align: center;
  color:#9FA0A0;
  font-weight: bold;
  font-size: 35px
}



.tableSample {
width: 100%;
border-collapse: collapse;
}

.tableSample th,td {
padding: 15px 20px;
border: 8px solid #fff;

}

.tableSample th {
background: #f9f4e2;
width: 25%;
text-align: center;
color:#407034;
border-radius: 25px;
  font-size: 25px

}

@media only screen and (max-width:479px) {
.tableSample th,td {
width: auto;
display: block;
border-top: none;
}

.tableSample th {
border-radius: 15px;
  font-size: 25px
}

.tableSample tr:first-child {

}

}



@media screen and (max-width: 768px){

.backimg03 {
width: 100%;
}

.border-radius02 {
padding: 35px;
	margin-bottom: 3rem;
  width: 100%;
  height: 120px;
  line-height: 25px;
  background-color: #FFFFFF;
  border-radius: 30px;
  text-align: center;
  color:#9FA0A0;
  font-weight: bold;
  font-size: 25px
}

}


.anet_gif {
width:70%;
display: block;
margin: 0 auto; 
}
@media only screen and (max-width:740px){
.anet_gif  {
width:100%;
}
}
/*キャッチコピー
-------------------------------------*/
.catch {
    text-align: center;
}
.catch h2 {
    padding-bottom: 1rem;
}

.center {
	text-align: center;
	margin-bottom: 4rem;
}

/*申し込みの流れ
-------------------------------------*/
.flow.row {
	margin-bottom: 3rem;
}

/*テーブル*/

/*フッター
-------------------------------------*/
footer {
    background-color: #fff8ee;
    padding: 6rem 0;
    font-size: 0.8em;
}

footer a {
    font-size: 1.0em;
text-decoration: none;
color: #248BB2;
}

@media screen and (max-width: 768px){


}

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    font-size: 0.8em;
    padding: 1rem 0;
    background-color: #407034;
}
.copyright a {
    color: #8ba028;
    text-decoration: none;
	display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #8ba028;
  opacity: 0.6;
  border-radius: 50%;
}
#pagetop a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#pagetop a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#pagetop a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}



/*レスポンシブ設定*/

@media screen and (max-width: 768px) {
 p, ol, li, th, td, dl {
	font-size: 1em !important; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
}
header {
	height: 90px; /*領域の高さ指定*/
}

table{
  width: 100%;
 font-size:1.0em;
}



}
/*ヘッダー
-------------------------------------*/
.header-box {
	display: none;
}	

}