@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

html,
body {height: 100%;}

body {
font-family: 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-size: 100%;
line-height: 1.8;
letter-spacing: normal;
background-color: #fff;
color: #212121;
}

img {
width: auto;
max-width: 100%;
height: auto;
vertical-align: bottom;
}

a:link,a:hover,a:visited {
color: #231815;
text-decoration: none;
}
#container{
margin-top: 20px;
padding-top: 30px;
}
h1{
font-size: 130%;
font-weight:550;	
letter-spacing: 0.1rem;
line-height: 2em;
text-align: center;
}
h2{
	font-size: 100%;
	line-height: 2rem;
}
h3{
font-size: 90%;
font-weight: 600;
letter-spacing: 0.1rem;
text-align: center;
padding-top: 60px;
color: #e2808d;
}
h4{
font-size: 100%;
font-weight: 500;
}
/*--------------------
common
---------------------*/
.inner {
padding: 0 15px;
width: 100%;
}

a {
transition: .3s all;
}
a.btn01 {
color: #fff;
background: #e2808d;
display: block;
font-weight: 500;
text-align: center;
width: 60%;
padding: 10px 0;
border-radius: 40px;
margin: 0 auto;
position: relative;
letter-spacing: 0.2rem;
}

a.btn01::after {
position: absolute;
content:"";
display: block;
background: url("../img/arrow.svg") right center no-repeat;
background-size: 100%;
width: 10px;
height:10px;
right: 20%;
top: 50%;
transform: translate(0,-50%);
}
a.btn02{
color: #fff;
background: #4aa298;
display: block;
font-weight: 500;
text-align: center;
width: 60%;
padding: 10px 0;
border-radius: 40px;
margin: 0 auto;
position: relative;
letter-spacing: 0.2rem;
}
a.btn02::after {
position: absolute;
content:"";
display: block;
background: url("../img/arrow.svg") right center no-repeat;
background-size: 100%;
width: 10px;
height:10px;
right: 10%;
top: 50%;
transform: translate(0,-50%);
}
a.btn03 {
color: #fff;
background: #e2808d;
display: block;
font-weight: 500;
text-align: center;
width: 60%;
padding: 10px 0;
border-radius: 40px;
margin: 0 auto;
position: relative;
letter-spacing: 0.2rem;
}

a.btn03::after {
position: absolute;
content:"";
display: block;
background: url("../img/arrow.svg") right center no-repeat;
background-size: 100%;
width: 10px;
height:10px;
right: 10%;
top: 50%;
transform: translate(0,-50%);
}

a img {
transition: .3s all;
}
a:hover img {
opacity: .9;
}

.pc {
display: none;
}
.sp {
display: block;
}
.border{
	 background-image: linear-gradient(transparent 60%, #fff583 60%);
}

/*--------------------
header
---------------------*/
header{
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #fff;
z-index: 90;
}
header .inner-wide{
	background: #f2dcda;	
}
header .inner {
    display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 20px 15px 10px;
}
.logo {
	width: 45vw;
}

.line {
	width: 45vw;
	max-width: 95px;
}

.sentence{
padding-top: 10px;
}


/*--------------------
mv
---------------------*/

.main_visual .inner-wide {
background: url("../img/mv_bg_sp.jpg") center right no-repeat;
background-size: cover;
}

.main_visual .main_pic{
	width: 80vw;
	margin: 0 auto;
	position: relative;
	padding-top: 30px;
}

.main_visual .mv_logo{
	position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 30vw;
}
/*--------------------
main contents
---------------------*/
/* concept--------------------*/
#concept h1{
	padding:10px 0;
}

#concept .concept_sentence{
text-align: center;
line-height: 2em;	
}
#concept .concept_sentence{
	position: relative;
}
#concept .concept_title{
	position: relative;
}
#concept .concept_title p{
	font-weight: 600;
	text-align: center;
}
.concept_pic01{
	position: absolute;
    top: -30%;
    left:70%
}
.concept_pic01 img{
	width: 35vw;
}
.concept_pic02{
	position: absolute;
    top: 43%;
    left: 0%;
z-index: 20;
}
.concept_pic02 img{
	width: 15vw;
}
.concept_sentence{
	margin-bottom: 30px;
}

#concept{
	position: relative;
}

#concept:after{
	content: "";
  position: absolute;
  top: 100%;
  box-sizing: border-box;
  border-right: 50vw solid transparent;
  border-left: 50vw solid transparent;
  border-top: 50px solid #fff;
z-index: 10;
}
/* effort--------------------*/

#effort .inner-wide{
	background: #f2dcda;
	padding-bottom: 60px;
}
.effort_title{
	position: relative;
	padding-top:25px;
}
.effort_title:before{
	content: "";
  position: relative;
  top: 50%;
  box-sizing: border-box;
  border-bottom: 53px solid #fff;
 border-right: calc(50vw - 15px) solid transparent;
  border-left: calc(50vw - 15px) solid  transparent;

}
.effort_title h3{
	padding-top: 100px;
	position: relative;
	background: linear-gradient(180deg, transparent 0%, transparent 40%, #fff 40%,  #fff 100%);
}
.effort_title p{
background: #fff;
text-align: center;
font-weight: 600;
}
.effort_copy{
	padding-top: 40px;
	text-align: center;
	background: #fff;
}
.effort_explanation{
	background: #fff;
	padding-top: 40px;
}
.point{
width: 300px;
margin: 0 auto;	
}
.point_explanation{
background: #dde9e7;
padding: 30px 10px 20px;
position: relative;
margin-bottom: 120px;
}
.point_explanation h4{
	text-align: center;
}
.title_line{
 position: relative;
  text-align: center;
}
.title_line::before{
background-color: #4aa298; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  bottom: -20px; /* 線の位置 */
  content: "";
  height: 3px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 40px; /* 線の長さ */
}
.point_explanation p{
	padding-top: 40px;
	font-size: 90%;
}
.point_01{
	position: absolute;
	left: 60%;
	bottom:-65px;
}

.point_img{
	position: relative;
}
.point_img img{
	display: block;

    height: auto;
}
.point_img img:nth-of-type(2){
    position: absolute;
    right: 0%;
    bottom: 50%;
    width: 20vw;
    height: auto;
}
.effort_explanation{
	padding-bottom: 10px;
}

.line_entry{
margin-top: -20px;
	background: #fff;
	padding: 0 20px 60px;
}
.line_entry h4{
	padding-bottom: 30px;
}

/* access--------------------*/
.access{
	padding-top: 40px;
}
.add_logo{
	width: 60vw;
	padding-bottom: 10px;
	padding-left: 10px;
}
.add_adress{
	padding: 0 10px ;
}
.add_line{
	width: 35vw;
	padding: 10px 10px 20px;
}

.open_time{
	margin-bottom: 20px;}
.open_time h3{
	font-size: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #f2dcda;
	color: #212121;
	margin-bottom: 10px;
	letter-spacing: 0.5rem;
}

/* footer--------------------*/
footer{
	text-align: center;
	padding: 10px 0;
}

/*-------------------
PSの表示切替
-------------------*/
@media screen and (min-width:768px){

.pc {
display: block;
}
.sp {
display: none;
}
h1{
	font-size: 200%;
}
h3{
font-size: 130%;
}

a.btn01 {
width: 30%;
}
a.btn02 {
width: 30%;
}
a.btn03 {
width: 30%;
}
.inner{
		max-width: 1280px;
		margin: 0 auto;
	}
/*--------------------
header
---------------------*/
header .inner{
		max-width: 980px;
		margin: 0 auto;
	padding: 20px 20px 5px;
	}
.logo {
	width: 200px
}

.line {
	width: 200px;
}

	
/*--------------------
mv
---------------------*/
.main_visual .inner-wide {
background: url("../img/mv_bg_pc.jpg") center bottom no-repeat;
background-size: cover;
padding: 60px 0 0px;
}
.main_visual .main_pic{
	width: 70vw;
	padding-bottom: 30px;
}

.main_visual .mv_logo{
	position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 30vw;
}

/*--------------------
main contents
---------------------*/
/* concept--------------------*/

.concept_pic01 img{
	width: 15vw;
}
.concept_pic02{
    left: 5%;
    top: 95%;
}
.concept_pic02 img{
	width: 10vw;
}
.concept_sentence{
	margin-bottom: 60px;
}

/* effort--------------------*/
.effort_title:before {
	    border-bottom: 85px solid #fff;
	}
	
	.effort_title h3{
	padding-top: 110px;
	position: relative;
    background: linear-gradient(180deg, transparent 0%, transparent 55%, #fff 55%, #fff 100%);
	}

	.effort_copy{
		padding-top: 20px;
	}
.effort_copy .sentence{
	padding-bottom: 40px;
	}
.effort_explanation{
	display: flex;
	}
.point{
	max-width: 30vw;
	}
	.point_explanation{
		height: 300px;
	}
.point_img img:nth-of-type(2){
    position: absolute;
    right: 0%;
    bottom: 50%;
    width: 8vw;
    height: auto;
}
	.point_01{
		bottom:-50px;
	}
.line_entry h4{
	text-align: center;
	line-height: 2rem;
	padding: 20px 0 60px;
}
/* add--------------------*/
.add{
	display: flex;
	max-width: 980px;
	margin: 0 auto;
	justify-content: space-between;
	}
.add_logo{
	width: 30vw;
	}
.add_line{
	width: 20vw;
	}
}
@media screen and (min-width:1280px) {

.effort_title:before{
	content: "";
  position: relative;
  top: 50%;
  box-sizing: border-box;
  border-bottom: 100px solid #fff;
 border-right: calc(640px - 15px) solid transparent;
  border-left: calc(640px - 15px) solid  transparent;
}
.effort_copy .sentence{
	padding-bottom: 80px;
	}
	.effort_title h3{
	padding-top: 160px;
	position: relative;
    background: linear-gradient(180deg, transparent 0%, transparent 48%, #fff 48%, #fff 100%);
	}
.point_01{
		bottom:-64px;
	}
.add_logo{
	width: 20vw;
}

.add_line{
	width: 10vw;
}
}