@charset "utf-8";
/* CSS Document 320-560*/



.serviceBox .seslice{position: relative; top: -70px}
.serviceBox ul{position: relative;}
.serviceBox li a{box-shadow: 0 0 8px #80747d; background: #f2efe9; color: #1130ae; display: block; position: relative; text-align: left; margin: 10px 3%; border-radius: 10px; padding:15px 10px;  }
.serviceBox li a:hover{box-shadow: none}
.serviceBox li a .servflex{display: flex; justify-content: space-between; align-items: center}
.serviceBox li a .servflex img{width: 26%; max-width:106px; border-radius: 10px }
.serviceBox li a .servflex h3{line-height: 1.4; color: #1130ae ; width: 69%; font-size:clamp(1.125rem, 0.125rem + 5vw, 1.875rem)}/*18-30*/
.serviceBox li a .servflex h3.minim{font-size:clamp(0.75rem, -0.083rem + 4.17vw, 1.375rem)}/*12-22*/
.serviceBox li a .pri span{display: inline-block; padding-right: 10px; font-size: clamp(0.75rem, 0.583rem + 0.83vw, 0.875rem)}/*12-14*/
.serviceBox li a .ya{position: absolute; right:10px; bottom: 18px; width: 28px}
.serviceBox li a:hover{background:#f3f0ea }


/*--------------------------------------------------------------------

.keigen

--------------------------------------------------------------------*/
.keigen{text-align: center; color: #1130ae; margin-top: -20px}
.keigen h2{padding: 10px 0; display: block; background: url(../img/top/f_elle.png) no-repeat center top; background-size: contain; font-weight: 600; margin-bottom: 10px; font-size: clamp(1.875rem, 1.042rem + 4.17vw, 2.5rem)}/*30-40*/
.keigen .text02{margin: 30px 0; font-size:clamp(1.25rem, 0.417rem + 4.17vw, 1.875rem) }
.keigen ul{display: flex;justify-content:space-between; margin: 20px 8% 80px}
.keigen li{width: 31%}


/*--------------------------------------------------------------------

.peace

--------------------------------------------------------------------*/
.no{color:#1130ae }

.peace {padding: 80px 0 80px; background:#f1eee8 url("../img/profire/mert.png") no-repeat right 60px; background-size: 70%; text-align: center}

.anzen{color: #1130ae; margin: -10px 0 30px; font-size:clamp(2.125rem, 1.625rem + 2.5vw, 2.5rem)}/*34-40*/

.anshin dl{margin-left: 2%; display: flex; justify-content: space-between ; flex-direction: row-reverse}
.anshin dt{width:78%; max-width:409px}
.anshin dt img{border-radius: 10px 0 0 10px}
.anshin dd{text-align: left ;max-height: 600px;letter-spacing: 2px; width: 26%; color: #1130ae; font-size:clamp(1.75rem, 1.25rem + 2.5vw, 2.125rem)}/*28-34*/
.anshin dd p{line-height: 1.4}
.anshin h3{font-weight: 700;  margin-bottom: 20px; color: #1130ae; font-size:clamp(1.125rem, 0.125rem + 5vw, 1.875rem)}/*18-30*/
.anbox{margin: 20px 0 0 8%; text-align: left}
.anbox:nth-of-type(2){margin-right: 8%; border-top: 1px solid #d2cec6; padding-top: 30px}
.anbox .text01{line-height: 1.8; margin-right: 5%}
.anbox .text01 .line{font-size: clamp(1.125rem, 0.958rem + 0.83vw, 1.25rem)}/*18-20*/
.anbox .text01 .syultutyou{line-height: 1.7; display: block; padding-right: 5%; font-size: clamp(0.75rem, 0.417rem + 1.67vw, 1rem)}/*12-16*/
.anbox .mado{padding: 0 0 20px 0; border-radius: 10px}

.anbox a{margin-top: 50px; display: block;}

.anbox a img{  transition: opacity 0.3s ease; box-shadow: 0 0 4px gray; border-radius: 10px}
.anbox a:hover img{opacity: 0.8; box-shadow: none}


/*--------------------------------------------------------------------

.voice

--------------------------------------------------------------------*/
.voice{ padding: 50px 0  130px; text-align: center; background:#1130ae url("../img/top/voice.png") no-repeat top center; background-size: contain; color: #fff}
.voice h2{margin-top: -10px; font-size:clamp(2.125rem, 1.625rem + 2.5vw, 2.5rem)}/*34-40*/
.voice .suv{margin-bottom: 30px; font-size:clamp(1.125rem, 0.125rem + 5vw, 1.875rem)}/*18-30*/
.voice .no{color:#fff }
.voice li {
    box-sizing: border-box;
    background: #fff;
    color: #242424;
    padding: 20px;
    text-align: left;
    border-radius: 20px;
    margin: 0 5px; /* 左右に5pxの隙間 */
}
.dopen .slick-slide {
    padding: 0 5px; /* スライド自体にpadding */
}
 /* 矢印の共通スタイル */
.dopen .slick-prev,
.dopen .slick-next {
    position: absolute;
    top: 50%; /* 上から50% */
    transform: translateY(-50%); /* 中央に配置 */
    z-index: 10;
    font-size: 30px;
    color: #fff;
    background: rgba(17, 48, 174, 0.8);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all 0.3s; 
}

/* 左矢印 */
.dopen .slick-prev {
    left: 2%; /* 左端から2% */
}

/* 右矢印 */
.dopen .slick-next {
    right: 2%; /* 右端から2% */
}

/* ホバー時のスタイル */
.dopen .slick-prev:hover,
.dopen .slick-next:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.voice dl{display: flex; justify-content: space-between; margin-bottom: 20px}
.voice dt{width: 75}
.voice dt .hoshi{color: #ffc601;}
.voice dt .cate{ font-weight: 700}
.voice dd{padding-top: 5px; width: 23% ;font-size:clamp(0.688rem, 0.438rem + 1.25vw, 0.875rem) }/*11-14*/
/*--------------------------------------------------------------------

.scl

--------------------------------------------------------------------*/
.scl{ position: relative ; }
.scl p{line-height: 1.5; position: absolute; left: 5%; bottom: -100px ; color: #1130ae; font-size:clamp(1.875rem, 1.375rem + 2.5vw, 2.25rem)}/*30-36*/

/*--------------------------------------------------------------------

.scl

--------------------------------------------------------------------*/
.bg{background: #f3f0ea}



/*--------------------------------------------------------------------

l02

--------------------------------------------------------------------*/
#l02{padding: 120px 0 0px; background:#f1eee8 url("../img/top/about.png") no-repeat center 100px; background-size:contain; text-align: center}
#l02 h2{color: #1130ae; margin-top: -10px; font-size:clamp(1.875rem, 1.208rem + 3.33vw, 2.375rem)}/*30-38*/

.aboutBox{position: relative;}
.aboutBox .img{padding-top: 75px}
.aboutBox .tate{text-align: left; height:580px; position: absolute; left: 1%; top:15px; color: #1130ae; font-size: clamp(1.125rem, 0.292rem + 4.17vw, 1.75rem)}/*18-28*/ 
.aboutBox .tate span{display: inline-block; background:#f3f0ea; padding: 0px 0 20px; border-radius: 10px; margin-left: 5px }

.abBox{text-align:left; margin: -20px 0 0 8%; position: relative; z-index: 1; padding-bottom: 50px}
.abBox h2{color: #1130ae; font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem)}/*20-26*/
.abBox .name{line-height: 1.1; color: #1130ae;  font-size:clamp(2.125rem, 1.625rem + 2.5vw, 2.5rem)}/*34-40*/
.abBox .name span{font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem)}/*20-26*/
.abBox .cata{margin: 10px 0 30px; font-size:clamp(0.688rem, 0.438rem + 1.25vw, 0.875rem) }/*11-14*/

.abBox .come{margin:40px 8% 50px 0px; line-height: 1.8}

.abBox .waku{background:#e8e4dd; padding:20px 15px 10px; font-size:clamp(0.938rem, 0.854rem + 0.42vw, 1rem)  }/*15-16*/
.abBox .waku .en{margin-bottom: 10px}
.abBox .waku li{margin-bottom: 10px; line-height: 1.3}


#bgf{background:#f1eee8; padding: 130px 8% 100px }
#bgf .anbox{margin: 0}
#bgf h3{font-weight: 700;  margin-bottom: 20px; color: #1130ae; font-size:clamp(1.125rem, 0.125rem + 5vw, 1.875rem)}/*18-30*/
#bgf img{border-radius: 10px}




.svbox{padding: 80px 5% 100px; text-align: center; background:url("../img/top/ser.png")no-repeat center 80px; background-size: contain}
.svbox h2{margin-bottom: 30px; color: #1130ae; font-size:clamp(2.125rem, 1.625rem + 2.5vw, 2.5rem)}/*34-40*/
.svbox .sv0{background: #fff; border-radius: 10px; text-align: left}
.svbox .sv0 a{display: block ;border-radius: 0 0 10px 10px; box-shadow: 0 0 8px #80747d;}
.svbox .sv0 a:hover{box-shadow: none}
.svbox .sv0 img{border-radius: 10px 10px 0 0}
.svbox .sv0 h3{ color:#1130ae ; font-size: clamp(1.375rem, 1.042rem + 1.67vw, 1.625rem)}/*22-26*/
.svbox .sv0 .text01{color:#1130ae ; position: relative}
.svbox .sv0 .text01 img{width: 30px; position: absolute; right: 0; top: 1px}
.svbox .inbox{padding: 20px }
.svbox ul{background:#f1eee8; padding: 20px; border-radius: 10px; margin-top: 20px}
.svbox li{ color:#242424 ; font-size:clamp(0.875rem, 0.375rem + 2.5vw, 1.25rem) }/*14-20*/

#a02, #a03{margin-top: 40px}
#a02 .text01{color:#242424; padding-top: 10px}

/*--------------------------------------------------------------------

.heart

--------------------------------------------------------------------*/
.heart{padding: 50px 8%;}
.heart .text{ color: #1130ae; margin-bottom: 20px ;font-size:clamp(1.25rem, 0.583rem + 3.33vw, 1.75rem); }/*20-28*/
.heart .text1{line-height: 1.8; font-size:clamp(0.938rem, 0.854rem + 0.42vw, 1rem)  }/*15-16*/


/*--------------------------------------------------------------------

.heart

--------------------------------------------------------------------*/
#l03{padding: 80px 0; background:#f2efe9 url("../img/profire/about.png") no-repeat left top; background-size: 78%}
#l03 h2{padding-bottom: 90px; text-align: center; color: #1130ae; font-size:clamp(1.25rem, -0.083rem + 6.67vw, 2.25rem)}/*20-36*/
#l03 .tit{margin: 0 8%; font-weight: 700; font-size: clamp(1.125rem, 0.958rem + 0.83vw, 1.25rem)}/*18-20*/
#l03 .kai{margin:0 8% 20px}
#l03 ul{margin: 0 8% 20px}
#l03 ul img{width: 25px}
#l03 .mai{margin-bottom: 30px}


@media screen and (max-width: 1100px) {
.headl .sub{font-size: clamp(0.625rem, 0.125rem + 2.5vw, 1rem)}/*10-16*/
}

@media screen and (min-width: 1100px) {
.cont-right .min{ font-size:clamp(1.75rem, 0.375rem + 2vw, 2.125rem)}/*28-34 1100-1400*/

#l01a .an1 .text{min-height: 360px;}
#l03{padding-top: 110px}

}