@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);


html{
scroll-behavior: smooth;
}

body{
margin:0px;
width:100%; 
    margin-left: 0;
    margin-right: 0;
    -webkit-text-size-adjust: 100%;
}


a:link{
    color:#595757; 
    font-style:normal;
    text-decoration:none;

}
a:visited{
    color:#595757; 
    text-decoration:none;
}

a:hover{
opacity:0.85;
}

a:active{
    text-decoration:none;
}


a:hover img { 
opacity:0.7;
filter:alpha(opacity=70);
}



p.main-big { 
font-size:2.8rem;
font-weight:600;
text-align:center; 
font-family: "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
letter-spacing: 0.2em;
color:#727171; 
}
    @media screen and (min-width: 1200px){
		p.main-big { 
		font-size:2rem;
		line-height: 2;
		}
	}

p.main-sub { 
font-size:1.8rem;
line-height: 30px;
font-weight:500;
text-align:center; 
font-family:"Noto Sans JP";
letter-spacing: 0.4em;
color:#727171; 
}
    @media screen and (min-width: 1200px){
		p.main-sub { 
		font-size:1.4rem;
    	}
    }	


p.main-strong{ 
font-size:40px;
line-height: 23px;
font-weight:600;
text-align:center; 
font-family:"Noto Sans JP";
color:#595757; 
line-height: 1.5;
}

p.main { 
font-size:1.2rem;
font-weight:400;
text-align:center; 
font-family:"Noto Sans JP";
color:#727171; 
line-height: 2.5;
}



p.contents-main { 
font-size:2rem;
font-weight:400;
text-align:center; 
font-family:"Noto Sans JP";
color:#727171; 
padding:0px;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
    @media screen and (min-width: 1200px){
    	p.contents-main { 
		font-size:1.5rem;
    	}
    }	

p.contents-small  { 
font-size:1.5rem;
font-weight:400;
text-align:center; 
font-family:"Noto Sans JP";
color:#727171; 
padding:0px;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
    @media screen and (min-width: 1200px){
    	p.contents-small { 
		font-size:1.3rem;
    	}
    }	


p.kodawari-sub { 
font-size:2.5rem;
line-height: 0px;
font-weight:600;
text-align:center; 
font-family:"Noto Sans JP";
letter-spacing: 0em;
color:#727171; 
}
    @media screen and (min-width: 1200px){
    	p.kodawari-sub { 
		font-size:1.8rem;
    	}
    }	

p.kodawari-title{ 
font-size:2.3rem;
line-height: 1.3em;
font-weight:500;
text-align:center; 
font-family:"Noto Sans JP";
letter-spacing: 0em;
color:#727171; 
-webkit-text-size-adjust: 100%;
}
    @media screen and (min-width: 1200px){
    	p.kodawari-title{ 
		font-size:1.8rem;
    	}
    }	

p.kodawari-main { 
font-size:2rem;
font-weight:400;
text-align:center; 
font-family:"Noto Sans JP";
color:#727171; 
padding:0px;
line-height: 1.5;
letter-spacing: 0em;
}
    @media screen and (min-width: 1200px){
    	p.kodawari-main { 
		font-size:1.5rem;
		letter-spacing: 0em;

    	}
    }	


p.bigtitle { 
font-size:2.7rem;
font-weight:600;
font-style:italic;
text-align:center; 
font-family:"Noto Sans JP";
letter-spacing: 0.1em;
-webkit-text-size-adjust: 100%;
}


p.footer-big { 
font-size:2rem;
font-weight:500;
text-align:center; 
font-family:"Noto Sans JP";
letter-spacing: 0.3em;
color:#fff; 
}
    @media screen and (min-width: 1200px){
    	p.footer-big { 
		font-size:1.5rem;
		line-height: 2.5em;

    	}
    }	


p.footer-main { 
font-size:1.5rem;
font-weight:300;
text-align:center; 
font-family:"Noto Sans JP";
letter-spacing: 0.1em;
color:#fff; 
}
    @media screen and (min-width: 1200px){
    	p.footer-main { 
		font-size:1.2rem;
    	}
    }	


p.copy { 
font-size:1rem;
font-weight:300;
text-align:center; 
font-family:"Noto Sans JP";
letter-spacing: 0.1em;
color:#fff; 
}
    @media screen and (min-width: 1200px){
    	p.footer-main { 
		font-size:0.9rem;
    	}
    }	




#page-top {
    position: fixed;
    bottom: 85px;
    right: 15px;
    z-index: 1;
    opacity:0.8;
}
    @media screen and (min-width: 1200px){
        #page-top{
        bottom: 0px;
        }
    }
    
#page-top a {
    padding: 30px 0;
    display: block;
}





.header {
        width:100%;
        height:110px;
        margin-left:auto;
        margin-right:auto;
        background-color:white; 
        position: fixed; 
        z-index: 1; 
        opacity:0.9; 
        border-bottom-style: solid; 
        border-color:#D7D8D8;
        border-width:2px;
}
    @media screen and (min-width: 1200px){
        .header {
        height:60px;
        }
    }


.headeradjust{
width:100%;
height:110px;
margin-left:auto;
margin-right:auto;  
}
    @media screen and (min-width: 1200px){
        .headeradjust{
		height:60px;
        }
    }

.headlogo{
        width:226px;
        height:110px; 
        margin-top:40px; 
        margin-left: 30px;
        position: relative; 
}
    @media screen and (min-width: 1200px){
        .headlogo{
        width:150px;
        margin-top:20px; 
        }
    }

.pcmenu{
        width:900px;
        height:30px; 
        margin-top:0px; 
        margin-right:30px; 
        float:right;
        position: relative; 
        font-family:"Noto Sans JP";
        color: #6ABF93;
        letter-spacing: 0.1em;
        font-size:1rem;
        font-weight:3400;
        background:;
        text-align:right;
}
    @media screen and (max-width: 1200px){
        .pcmenu{display:none}
    }





/*==================================================
スライダーtopのためのcss　↓↓↓↓↓↓↓
===================================*/
slider1{
	width:100%; 
	height:px; 
	margin-left:auto; 
	margin-right:auto;  
	text-align: center; 
}

/*メイン画像下に余白をつける*/
.gallery1{
	margin:0 0 25px -40px;
}

.gallery1 li{
list-style:none;
}

.gallery1 img{
	width:100%; 
	margin-left:auto; 
	margin-right:auto;  
}
    @media screen and (min-width: 1200px){
		.gallery1 img{
	width:60%; 
	margin-left:auto; 
	margin-right:auto;  
        }
    }

.choice-btn1 {
	margin-left: 156px; 
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 2;
    top: 47%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 4px solid #000;/*矢印の色*/
    border-right: 4px solid #000;/*矢印の色*/
    height: 50px;
    width: 50px;
    opacity: 0.4;
}

@media screen and (min-width: 1200px){
		.slick-prev, .slick-next {
    border-top: 3px solid #000;/*矢印の色*/
    border-right: 3px solid #000;/*矢印の色*/
    height: 20px;
    width: 20px;
        }
    }

.slick-prev {/*戻る矢印の位置と形状*/
    left:7.5%;
    transform: rotate(-135deg);
}
@media screen and (min-width: 1200px){
.slick-prev {
    left:20%;
	}
}

.slick-next {/*次へ矢印の位置と形状*/
    right:3.5%;
    transform: rotate(45deg);
}
@media screen and (min-width: 1200px){
.slick-next {
    right:16%;
	}
}

/*選択するサムネイル画像の設定*/

.choice-btn1 li{
	cursor: pointer;
	outline: none;
	background:#fff;
	width:109px !important;
	margin-right:16px;
    list-style:none;
}

.choice-btn1 li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn1 li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}
/*==================================================
スライダーtopのためのcss　↑↑↑↑↑↑
===================================*/





/*==================================================
スライダーDRESSのためのcss　↓↓↓↓↓↓↓
===================================*/

slider2{
	width:100%; 
	height:px; 
	margin-left:auto; 
	margin-right:auto;  
	text-align: center; 
}


/*メイン画像下に余白をつける*/
.gallery2 {
	margin:0 0 25px -40px;
}

.gallery2 li{
list-style:none;
}


.gallery2 img{
	width:100%; 
	margin-left:auto; 
	margin-right:auto;  
}
    @media screen and (min-width: 1200px){
		.gallery2 img{
	width:60%; 
	margin-left:auto; 
	margin-right:auto;  
        }
    }


/*選択するサムネイル画像の設定*/
.choice-btn2 {
	margin-left: 80px; 
}
    @media screen and (min-width: 1200px){
		.choice-btn2 {
	margin-left: 100px; 
        }
    }


.choice-btn2 li{
	cursor: pointer;
	outline: none;
	background:#fff;
	width:109px !important;
	margin-right:16px;
    list-style:none;
}

.choice-btn2 li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
	
}

.choice-btn2 li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}
/*==================================================
スライダーDRESSのためのcss　↑↑↑↑↑↑
===================================*/






/*ボタン*/
a.btn-border {
border: 4px solid #6ABF93;
border-radius: 0;
background: #fff;
font-family:"Noto Sans JP";
color: #6ABF93;
letter-spacing: 0.1em;
font-size:2rem;
font-weight:500;
padding: 25px 70px;
}
    @media screen and (min-width: 1200px){
    	a.btn-border {
		font-size:1.5rem;
    	}
    }	


a.btn-border:hover {
  color: #fff;
  background: #9FD6BD;
}
/*ボタン　↑↑↑↑↑↑*/


/*ーーーー固定フッターーーー　↓↓↓↓↓↓↓*/
/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   min-width: 1000px;
   height:115px;
   bottom: 0px;
   font-size: 0;
   opacity: 1;
   z-index: 99;
}
    @media screen and (min-width: 1200px){
        #sp-fixed-menu{
            display:none
        }
    }

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   border-left: 1px solid #fff;
   border-right: 1px solid #fff;
   font-family:"Noto Sans JP";
   color: #6ABF93;
   letter-spacing: normal;
   font-size:1.7rem;
   font-weight:500;
}


/*メニューを緑色に*/
#sp-fixed-menu {
   background: #6ABF93;
}


/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:39px 0px;
}


 #sp-fixed-menu li a:hover { 
   background:#9FD6BD;
}
/*ーーーー固定フッターーーー　↑↑↑↑↑↑*/


.footeradjust{
width:100%;
height:115px;
margin-left:auto;
margin-right:auto;  
margin-top:px;
}
    @media screen and (min-width: 1200px){
        .footeradjust{
            display:none
        }
    }



/*ーーーーハンバーガーーーー　↓↓↓↓↓↓↓*/
/*----------------------------
* メニュー本体
*----------------------------*/
/* アニメーション前のメニューの状態 */
.menu{
  position: fixed;
  top: -50px;
  right: 0;
  z-index: 3;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  background: #7C6859;
    pointer-events: none;
  opacity: 0;
  transition: opacity .3s linear;
}

/* アニメーション後のメニューの状態 */
.menu.is-active{
  pointer-events: auto;
  opacity: 1;
}

.menu__item{
  width: 100%;
  height: auto;
  padding: 1.5em 1em;
  text-align: left;
  color: #fff;
  box-sizing: border-box;
  font-family:"Noto Sans JP";
   letter-spacing: normal;
   font-size:2.2rem;
   font-weight:500;
   border-bottom-style: solid;
}

/*----------------------------
* アニメーション部分
*----------------------------*/

.burger-btn.close .bar_mid{      
  opacity: 0;       
  transition: opacity .3s;    
}    

/*ーーーーハンバーガーーーー　↑↑↑↑↑↑*/





/*==================================================
　5-2-1 3本線が×に　↓↓↓↓↓↓↓
===================================*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.menu-btn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
    position: absolute;
	top:-15px;
	right:50px;
	cursor: pointer;
    width: 60px;
    height:70px;
	border-radius: 5px;
	 z-index: 4;
}
@media screen and (min-width: 1200px){
.menu-btn {display:none }
}


/*ボタン内側*/
.menu-btn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 6px;
    border-radius: 5px;
	background: #727171;
  	width: 100%;
  }
  
.menu-btn span:nth-of-type(1) {
	top:0px;	
}

.menu-btn span:nth-of-type(2) {
	top:20px;
}

.menu-btn span:nth-of-type(3) {
	top:40px;
}

.menu-btn span:nth-of-type(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	top:25px;
	color: #727171;
	font-size: 1.1rem;
	text-transform: uppercase;
	position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family:"Noto Sans JP";
}


/*activeクラスが付与されると線が回転して×に*/

.menu-btn.active span {
    	background: #fff;
}

.menu-btn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 100%;
}

.menu-btn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

.menu-btn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 100%;
}

.menu-btn.active span:nth-of-type(3)::after {
	content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
	top:19px;
	left:30px;
	color: #fff;
	font-family:"Noto Sans JP";
}
/*==================================================
　5-2-1 3本線が×に　↑↑↑↑↑↑
===================================*/



/*==================================================
ふわっと
===================================*/
/* fadeUp */
.box{
	opacity: 0;
}

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(0px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}



/*==================================================
form
===================================*/
p.form { 
font-size:1.3rem;
font-weight:400;
text-align:left; 
font-family:"Noto Sans JP";
color:#727171; 
margin-top:50px;
}

input.form {
width: 100%; /*親要素いっぱい広げる*/
padding: 15px 15px; /*ボックスを大きくする*/
font-size:1.2rem;
border: 1px solid #808080; /*枠線*/
box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
border-radius: 5px; /*ボックス角の丸み*/
color:#727171; 
}

input.form:focus {
    border: 1px solid #6ABF93; 
    z-index: 10;
    outline: 0;
}

textarea.form {
width: 100%; /*親要素いっぱい広げる*/
padding: 10px 10px; /*ボックスを大きくする*/
font-size:1rem;
border: 1px solid #808080; /*枠線*/
box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
color:#727171; 
border-radius: 5px; /*ボックス角の丸み*/
}
textarea.form:focus {
    border: 1px solid #6ABF93; 
    z-index: 10;
    outline: 0;
}


input.btn {
border: 4px solid #6ABF93;
border-radius: 0;
background: #fff;
font-family:"Noto Sans JP";
color: #6ABF93;
letter-spacing: 0.1em;
font-size:2rem;
font-weight:500;
padding: 25px 70px;
margin-top:50px;
}
    @media screen and (min-width: 1200px){
		input.btn {
		font-size:1.5rem;
    	}
    }	

input.btn:hover {
  color: #fff;
  background: #9FD6BD;
}

.btn-default {
border: 4px solid #6ABF93;
border-radius: 0;
background: #fff;
font-family:"Noto Sans JP";
color: #6ABF93;
letter-spacing: 0.1em;
font-size:2rem;
font-weight:500;
padding: 25px 70px;
margin-top:50px;
}
/*==================================================
form
===================================*/



/*==================================================
Q&A
===================================*/
.qanda-out{
width: 940px;
padding: 0px; 
border-radius: 20px; /*ボックス角の丸み*/
background-color:#ECECEC; 
margin-top:50px;
}

.qanda-in{
padding: 10px 30px; 
display: flex;
}

.qanda-left{
width: 45px;
}
@media screen and (min-width: 1200px){
.qanda-left{
margin-top:-10px;
	}
}

.qanda-right{
width: 820px;
font-family:"Noto Sans JP";
color: #727171;
letter-spacing: 0em;
font-size:2rem;
font-weight:400;
text-align:left;
padding-left:20px;
}
@media screen and (min-width: 1200px){
.qanda-right {
font-size:1.5rem;
	}
}

/*==================================================
Q&A
===================================*/


/*==================================================
FLOW
===================================*/
.flow-top{
font-family:"Noto Sans JP";
color: #727171;
font-size:1.8rem;
font-weight:400;
text-align:center;
margin-top: 50px; 
}
@media screen and (min-width: 1200px){
.flow-top {
font-size:1.5rem;
	}
}

.flow-out{
width: 940px;
padding: 0px; 
margin-top:50px;
border: 7px solid #6ABF93; /*枠線*/
}

.flow-in{
width: 780px;
margin: 40px 90px; 
}

.flow-big{
font-family: "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
color: #6ABF93;
font-size:2.8rem;
letter-spacing: 0.2em;
font-weight:600;
margin: 0px; 
}
@media screen and (min-width: 1200px){
.flow-big {
font-size:2.2rem;
	}
}

.flow-sub{
font-family:"Noto Sans JP";
color: #727171;
font-size:1.8rem;
letter-spacing: 0.2em;
font-weight:400;
margin-top: 0px; 
margin-bottom: 0px; 
}

.flow-main{
font-family:"Noto Sans JP";
color: #727171;
font-size:1.6rem;
letter-spacing: 0em;
font-weight:400;
margin-top: 30px; 
margin-bottom: 0px; 
}
@media screen and (min-width: 1200px){
.flow-main {
font-size:1.5rem;
	}
}

.flow-main-left{
font-family:"Noto Sans JP";
color: #727171;
font-size:1.6rem;
letter-spacing: 0em;
font-weight:400;
margin-top: 30px; 
margin-bottom: 0px; 
text-align:left;
line-height: 1.8em;
}
@media screen and (min-width: 1200px){
.flow-main-left {
font-size:1.5rem;
	}
}
/*==================================================
FLOW
===================================*/


/*==================================================
PLAN
===================================*/
.plan-top{
font-family:"Noto Sans JP";
color: #727171;
font-size:2.2rem;
letter-spacing: 0.2em;
font-weight:400;
text-align:center; 
}
@media screen and (min-width: 1200px){
.plan-top {
font-size:1.6rem;
margin: 35px; 
	}
}

.plan-out{
width: 926px;
padding: 0px; 
margin-top:50px;
border: 7px solid #6ABF93; /*枠線*/
border-radius: 20px; /*ボックス角の丸み*/
}

.plan-in{
width: 820px;
margin: 40px 55px; 
}

.plan-big{
font-family:"Noto Sans JP";
color: #727171;
font-size:2.2rem;
letter-spacing: 0.4em;
font-weight:400;
text-align:center; 
}
@media screen and (min-width: 1200px){
.plan-big {
font-size:1.6rem;
margin: 35px; 
	}
}


.plan-main{
font-family:"Noto Sans JP";
color: #727171;
font-size:1.6rem;
letter-spacing: 0em;
font-weight:400;
margin-top: 30px; 
margin-bottom: 0px; 
text-align:left; 
}
@media screen and (min-width: 1200px){
.plan-main {
font-size:1.3rem;
	}
}


.plan-price{
border-radius: 0;
background: #7F756E;
font-family:"Noto Sans JP";
color: #fff;
letter-spacing: 0.1em;
font-size:2.2rem;
font-weight:200;
padding: 20px 0px;
width:250px;
text-align:center;
margin-left:auto; 
margin-right:auto; 
margin-top:50px; 
font-style: oblique; 
}
    @media screen and (min-width: 1200px){
    	.plan-price {
		font-size:2rem;
    	}
    }	

.plan-contents{
width: 900px;
padding: 0px; 
margin-top:50px;
margin-left:auto; 
margin-right:auto; 
line-height: 2.5em;
}

/*ボタン1*/
a.planbtn {
border: 4px solid #9AD4BA;
border-radius: 0;
background: #67BD8F;
font-family:"Noto Sans JP";
color: #fff;
letter-spacing: 0.1em;
font-size:2rem;
font-weight:500;
padding: 25px 70px;
}
    @media screen and (min-width: 1200px){
    	a.planbtn {
		font-size:1.5rem;
    	}
    }	

a.planbtn:hover {
  color: #fff;
  background: #9FD6BD;
  border: 4px solid #67BD8F;
}
/*ボタン1　↑↑↑↑↑↑*/

.pcsmaller {
	width:1000px; 
	margin-left:auto;
	margin-right:auto; 
	margin-top:50px;
	}
    @media screen and (min-width: 1200px){
    	.pcsmaller {
		width:600px; 
		margin-left:200px;
    	}
    }	

.pcsmaller800{
	width:940px;
	margin-left:auto;
	margin-right:auto; 
}

    @media screen and (min-width: 1200px){
    	.pcsmaller800 {
		width:700px; 
    	}
    }	

    @media screen and (min-width: 1200px){
    	.pcsmaller-wide {
		width:1000px; 
		height:500px;
    	}
    }	

/*==================================================
PLAN
===================================*/