@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
/*
font-family: "Zen Kaku Gothic New", sans-serif;34579
font-family: "Zen Maru Gothic", serif;34579
*/

#top {
padding-bottom: 200px;/*次の画像表示のため*/
}
#top img{
width: 100%;
}
#top .box{
display: flex;
flex-wrap: wrap;
color: #fff;
}
#top .box p{
width: calc(50% - 30px);
padding: 20px 0 0 107px;
margin: 3rem 15px 0;
height: 76px;
background-position: top left;
background-size: 97px;
background-repeat: no-repeat;
border-bottom: 1px solid #fff;
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.1rem;
}
#top .box p:nth-of-type(1){
background-image: url("/img/i-01.png");
}
#top .box p:nth-of-type(2){
background-image: url("/img/i-02.png");
}
#top .box p:nth-of-type(3){
background-image: url("/img/i-03.png");
}
#top .box p:nth-of-type(4){
background-image: url("/img/i-04.png");
}
@media (max-width: 1160px) {
#top {
padding-bottom: 130px;/*次の画像表示のため*/
}
}
@media (max-width: 920px) {
#top .box p{
padding: 10px 0 0 80px;
height: 55px;
background-size: 70px;
font-size: 1.7rem;
letter-spacing: 0;
}
}
@media (max-width: 768px) {
#top {
padding-bottom: 100px;/*次の画像表示のため*/
}
#top .box{
display: block;
}
#top .box p{
width: 100%;
height: 40px;
background-size: 50px;
padding: 7px 0 0 60px;
margin: 1.5rem 0 0;
font-size: 1.4rem;
}
#top .box p:nth-of-type(1){
margin-top: 0;
}
}
@media (max-width: 500px) {
#top {
padding-bottom: 70px;/*次の画像表示のため*/
}
}


#solve{
position: relative;
background: #ceebfa;
padding: 2rem 0 2rem;
margin-bottom:5rem;
}
#solve .photo{
position: absolute;
top: -150px;
right: 0;
left: 0;
}
#solve .photo img{
width: 100%;
}
#solve .box{
border-top: 8px solid #b0dff8;
border-bottom: 8px solid #b0dff8;
background: #fff url("/img/dot.png") repeat center;
padding: 13rem 0 7rem;
}
#solve .box ul{
list-style: url(/img/solve_i01.png);
list-style-position: inside;
display: inline-block;
width: calc(50% - 20px);
margin-right: 30px;
vertical-align: top;
}
#solve .box ul:nth-of-type(even){
margin-right: 0;
}
#solve .box ul li{
margin-top: 10px;
font-size: 1.9rem;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
}
@media (max-width: 1160px) {
#solve .photo{
position: absolute;
top: -100px;
right: 0;
left: 0;
}
}
@media (max-width: 920px) {
#solve .box{
padding: 8rem 0 7rem;
}
#solve .box ul li{
font-size: 1.6rem;
}
}
@media (max-width: 768px) {
#solve .photo{
position: absolute;
top: -70px;
right: 0;
left: 0;
}
#solve .box ul{
display: block;
width: calc(100% - 20px);
margin-left: 15px;
}
#solve .box ul li{
font-size: 1.4rem;
font-weight: 700;
}
}
@media (max-width: 500px) {
#solve .box{
padding: 5rem 0 3rem;
}
#solve .photo{
position: absolute;
top: -40px;
right: 0;
left: 0;
}
#solve .box ul li{
margin-top: 5px;
}
}
@media (max-width: 400px) {
#solve .box{
padding: 3rem 0 3rem;
}
}


#point{
position: relative;
background: #fafed7;
padding: 2rem 0 2rem;
margin-bottom:5rem;
}
#point .box{
border-top: 8px solid #f2f5b3;
border-bottom: 8px solid #f2f5b3;
background: #fffef0 url("/img/dot2.png") repeat center;
padding: 5rem 0 4rem;
}
#point .box ul{
width: 100%;
display: flex;
flex-wrap: wrap;
list-style: none;
margin-top: 2rem;
}
#point .box ul li{
width: calc( 50% - 20px );
margin-right: 25px;
margin-bottom: 25px;
}
#point .box ul li:nth-of-type(even){
margin-right: 0;
}
#point .box ul li img{
width: 100%;
}
#point .box ul li p{
border-left: 1px solid #000;
padding-left: 15px;
margin-left: 15px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
font-size: 1.9rem;
letter-spacing: 0.1rem;
}
#point .box ul.what{
margin-top: 1rem;
}
#point .box ul.what h3{
text-align: center;
color: #e25f4e;
background: #f1f1f1;
padding: 5px;
font-weight: 700;
font-size: 1.9rem;
border-bottom: 1px solid #000;
letter-spacing: 0.1rem;
}
#point .box ul.what li{
width: calc( 33% - 10px );
margin-right: 15px;
margin-bottom: 25px;
border: 1px solid #000;
background: #fff;
}
#point .box ul.what li:nth-of-type(3){
margin-right: 0;
}
#point .box ul.what li p{
border: none;
margin: 0;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 1.6rem;
padding: 10px;
line-height: 1.5;
}
@media (max-width: 920px) {
#point .box ul li p{
font-size: 1.6rem;
letter-spacing: 0rem;
}
}
@media (max-width: 768px) {
#point .box{
padding: 2rem 0 1rem;
}
#point .box ul{
display: block;
width: 100%;
max-width: 400px;
margin: 1rem auto 0;
}
#point .box ul li{
width: 100%;
margin-bottom: 15px;
}
#point .box ul li p{
font-size: 1.4rem;
}
#point .box ul.what{
margin-top: 0.5rem;
}
#point .box ul.what li{
width: 100%;
margin-bottom: 10px;
}
#point .box ul.what h3{
padding: 3px;
font-size: 1.8rem;
}
#point .box ul.what li p{
font-size: 1.4rem;
}
}


#price{
position: relative;
background: #efefef;
padding: 2rem 0 2rem;
}
#price .box{
border-top: 8px solid #ddd;
border-bottom: 8px solid #ddd;
background: #f1f9fe;
padding: 17rem 0 4rem;
text-align: center;
}
#price .box h2{
max-width: 1100px;
position: absolute;
top:-3px;
left: 0;
right: 0;
margin:0 auto;
}
#price .box h2 img{
width: 100%;
}
#price .box p{
margin: 0 1rem 2rem;
}
#price .box .hyo{
max-width: 800px;
}
@media (max-width: 768px) {
#price .box{
padding: 0 0 2rem;
}
#price .box h2{
position: relative;
top:-10px;
}
}


#plan{
position: relative;
background: #fff url("/img/dot.png") repeat center;
padding: 3rem 0 0;
margin-top: 5rem;
}
#plan h2{
max-width: 1100px;
margin-bottom: 2rem;
}
#plan h2 img{
width: 100%;
}
#plan .box{
background: #d1ecfb;
padding: 4rem 0;
margin: 3rem 0 0;
}
@media (max-width: 768px) {
#plan{
padding: 1.5rem 0 0;
}
#plan h2{
margin-bottom: 1.5rem;
}
#plan .box{
padding: 1.5rem 0;
margin: 1.5rem 0 0;
}
}

#flow{
padding: 3rem 0 5rem;
background: #325882;
}
#flow .inner{
max-width: 720px;
}
#flow p{
color: #fff;
margin-top: 1.5rem;
}
#flow .box{
margin-top: 3rem;
}
@media (max-width: 768px) {
#flow .inner{
padding: 0 1.5rem;
}
}

#design{
padding: 5rem 0 3rem;
background: #fff;
}
#design h2{
width: 200px;
}
#design .box{
margin-top: 3rem;
display: flex;
flex-wrap: wrap;
gap: 25px;
}
#design .box a{
display: block;
width: calc( 33% - 17px );
margin-bottom: 30px;
line-height: 150%;
}
@media (max-width: 768px) {
#design h2{
width: 150px;
}
#design .inner{
padding: 0 1.5rem;
}
#design .box a{
width: calc( 50% - 13px );
margin-bottom: 20px;
}
}

#info{
padding: 5rem 0;
color: #fff;
font-family: "Zen Maru Gothic", serif;
background: #325882;
}
#info .inner{
max-width: 820px;
}
#info h2{
font-size: 3rem;
font-weight: 600;
text-align:center;
letter-spacing: 0.3rem;
}
#info .box{
margin-top: 3rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}
#info .box > div{
width: calc( 50% - 20px );
text-align: center;
border: 1px solid #fff;
position: relative;
}
#info .box > div a{
display: block;
height: 100%;
padding: 15px;
color: #fff;
transition: background-color 0.3s ease;
}
#info .box > div a:hover{
background: rgba(255,255,255,0.3);
}
#info .box > div img{
width: 34px;
display: inline-block;
margin-right: 1rem;
vertical-align:middle;
}
#info .box .form span{
display: block;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
font-size: 130%;
font-weight: 700;
letter-spacing: 0.3rem;
}
#info .box .tel img{
vertical-align:top;
}
#info .box .tel span{
font-size: 3.7rem;
font-weight: 700;
letter-spacing: 0.2rem;
}
#info .box .tel p{
font-family: "Zen Kaku Gothic New", sans-serif;
}
@media (max-width: 768px) {
#info .box{
display: block;
}
#info .box > div{
width: 100%;
margin-top: 1.5rem;
}
#info .box .form{
height: 70px;
}
#info .box .tel span{
font-size: 2.7rem;
}
}




/*---問い合わせフォーム---*/
#form .box{
margin: 30px auto 50px;
padding: 20px;
background: #fff;
border-radius: 20px;
}





.flyer img{
width: 100%;
}





















.pc-dn{
display: none;
}

@media (max-width: 768px) {
.pc-dn{
display: inline;
}
.sp-dn{
display: none;
}
}