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

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

mainhead

--------------------------------------------------------------------*/
.mainhead{position: relative;}
.mainhead section{background: #1130ae; padding-top: 30px; margin: 0 1%; border-radius: 10px}
.mainhead li a{position: relative; line-height: 1.2; color: #1130ae; margin: 0 2% ; display: block ; box-shadow: 0 0 8px #15266b; border-radius: 10px; background: #fff; padding: 10px 10px 20px }
.mainhead li a:hover{box-shadow: none; background:#c9d7f5 }
.mainhead li a img{border-radius: 10px}
.mainhead li h2{padding-top: 20px; font-weight: 600; font-size:clamp(1.5rem, 0.583rem + 4.58vw, 2.188rem) }/*24-35*/
.mainhead li h2.minm{padding: 23px 0 10px; font-weight: 600; font-size:clamp(1.125rem, 0.125rem + 5vw, 1.875rem)}/*18-30*/
.mainhead li p{padding-top: 10px;font-weight: 700; font-size:clamp(0.813rem, 0.563rem + 1.25vw, 1rem)   }/*13-16*/
.mainhead li p .f18{font-size:clamp(1.125rem, 0.792rem + 1.67vw, 1.375rem) }/*18-22*/

.mainhead li a .ya{width:34px; position: absolute; right: 10px; bottom: 8px}

.mainhead .first{ color: #fff; padding: 20px 0px 40px; text-align: center}
.mainhead .first h3{display: inline-block; padding: 10px 20px; line-height: 1.5; background: url("../img/top/elle.png") no-repeat; background-size: contain; font-size:clamp(0.813rem, 0.229rem + 2.92vw, 1.25rem) }/*13-20*/
.mainhead .first .waku{padding: 0 15px; display: inline-block; background: #fff; border-radius: 80px; color: #1130ae }
.mainhead .first .waku span{font-size:clamp(0.688rem, 0.271rem + 2.08vw, 1rem) }/*11-16*/
.mainhead .first .come {margin-top: 15px;  font-size:clamp(1.25rem, 0.25rem + 5vw, 2rem) }/*20-32*/
.mainhead .first .come span{font-size:clamp(1rem, 0.5rem + 2.5vw, 1.375rem) }/*16-22*/


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

.keigen

--------------------------------------------------------------------*/
.keigen{text-align: center; padding: 50px 0 0}
.keigen .li{ color: #fff;}
.keigen .li li{background:#1130ae; padding: 5px 15px; display: inline-block;; border-radius: 80px; margin-right: 10px }
.keigen .li li:last-child{margin-right: 0}
.keigen h2{font-weight: 600; color: #1130ae; margin-top: 10px; font-size: clamp(1.875rem, 1.042rem + 4.17vw, 2.5rem)}/*30-40*/
.keigen .fi{position: relative; margin: 20px 8% 40px;}
.keigen .fi li{position: absolute; left: 0; top: 0}


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

.peace

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

.peace { background:#f2efe9; padding-bottom: 100px }
.peace .peace1 p{ line-height: 2; padding-bottom: 50px; margin:0px auto 0; text-align: left; color: #1130ae; font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem)}/*20-26*/

.antit{color: #1130ae; border-left: 10px solid #1130ae ; line-height: 1.4; margin-bottom: 70px}
.antit h2{padding-left: 10px; font-size:clamp(0.813rem, 0.396rem + 2.08vw, 1.125rem) }/*13-18*/
.antit .text01{padding-left: 20px; font-size:clamp(1.5rem, 1rem + 2.5vw, 1.875rem)}/*24-30*/


.anshin{padding:80px 0 0 0 ; margin-top: -80px; background: url("../img/top/peace.png") no-repeat right top; background-size:241px 207px }
.anshin dl{margin: 0 6% 0 0 ; display: flex; justify-content: space-between}
.anshin dt{width:78%; max-width:409px}
.anshin dt img{border-radius: 0 10px 0 0}
.anshin dd{max-height: 600px; padding-right: 1%; letter-spacing: 2px; margin-top: -70px; width: 20%; color: #1130ae; font-size:clamp(1.75rem, 1.25rem + 2.5vw, 2.125rem)}/*28-34*/
.anshin h3{font-weight: 700;  margin-bottom: 20px; color: #1130ae; font-size:clamp(1.125rem, 0.125rem + 5vw, 1.875rem)}/*18-30*/
.anbox{margin: 40px 0 0 8%;}
.anbox:nth-of-type(2){margin-right: 8%; border-top: 1px solid #d2cec6; padding-top: 30px}
.anbox .text01{line-height: 1.8}
.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  190px; 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{margin-top: -60px; 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}

.serviceBox{padding: 160px 0 40px; text-align: center; background:#f3f0ea url("../img/top/ser.png")no-repeat center 150px; background-size: contain}
.serviceBox h2{margin-bottom: 30px; color: #1130ae; font-size:clamp(2.125rem, 1.625rem + 2.5vw, 2.5rem)}/*34-40*/
.serviceBox .them{font-weight: 500; border-radius: 80px; display: inline-block; color: #fff; background:#1130ae; padding: 0 30px; margin: 0px 0px 0;  font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem)}/*20-26*/

.serviceBox ul{margin: 30px 3% 60px; background: #fff; padding: 20px 15px; border-radius: 20px;}
.serviceBox li a{ padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #d2cec6 ; display: block; position: relative; text-align: left; color:#242424 }
.serviceBox li:last-child a{border: none; margin-bottom: 0}
.serviceBox li a .servflex{display: flex; justify-content: space-between; align-items: center}
.serviceBox li a .servflex img{width: 28%; max-width:106px; border-radius: 10px }
.serviceBox li a .servflex h3{color: #1130ae ; width: 69%; font-size:clamp(1.375rem, 0.708rem + 3.33vw, 1.875rem)}/*22-30*/
.serviceBox li a .sub{padding: 15px 0 10px}
.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:0px; bottom: 30px; width: 28px}
.serviceBox li a:hover{background:#f3f0ea }

.serviceBox .seizen li a .servflex h3{color: #0089c2 ;}

.seizen .them{ background:#0089c2 }
.seizen .pri{padding-top: 10px}

.serviceBox .daiko{margin: 0 1%; text-align: right}
.serviceBox .daiko span{ display: inline-block; width: 48%; text-align: right; font-size: 11px; position: relative; top: -30px; padding-right: 5%}

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

.aboutBox

--------------------------------------------------------------------*/
.aboutBox{position: relative; background: url("../img/top/about.png") no-repeat center top #f3f0ea; background-size: contain}
.aboutBox .img{padding-top: 75px}
.aboutBox .tate{height:450px; position: absolute; left: 1%; top: 110px; color: #1130ae; font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem)}/*20-26*/ 
.aboutBox .tate span{display: inline-block; background:#f3f0ea; padding: 20px 0 20px; border-radius: 10px; margin-left: 5px }

.abBox{  margin: -20px 0 0 8%; position: relative; z-index: 1; padding-bottom: 80px}
.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:0 8% 30px 0}
.abBox .linkbox a{ color: #1130ae; display: block ; box-shadow: 0 0 4px gray; position: relative; border: 1px solid #1130ae; background: #fff; padding: 10px; margin: 0 8% 0px 0}
.abBox .linkbox a:hover{box-shadow: none;  }
.abBox .linkbox a img{position: absolute; right: 10px; top: 40%; width: 18px}