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


.bgfff{background: #fff}
/*--------------------------------------------------------------------

first

--------------------------------------------------------------------*/
.first{ position: relative}
.first .text{letter-spacing: normal ; line-height: 2.1;}
.first .text span{letter-spacing: 2px;}
.first section{position: absolute; top: 10vw; z-index: 5; margin:0 6%}
.first .img{margin: 50px 0 0; text-align: center}
.first .img img{max-width: 481px}
.first h1{text-align: center; margin-top: 10px; letter-spacing: 3px}

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

well

--------------------------------------------------------------------*/
.well{text-align: center; padding: 40px 0 140px}
.well .text span{letter-spacing: -1px}
.well .text01{line-height: 1.5;  margin:20px 0 40px; font-size: clamp(1.625rem, 1.352rem + 1.36vw, 2.375rem) }/*26-38*/

.well dl{display: flex; justify-content: space-between; position: relative}
.well dt{width: 50%; margin-bottom: 40px}
.well dt img{border-radius: 0 10px 10px 0}
.well .f01 dd{position: relative; line-height: 1.6; text-align: left; width: 50% ; font-size:clamp(1.313rem, 0.875rem + 2.19vw, 1.75rem)}/*21-28*/
.well .f01 dd p{position: absolute; right: 8%; top:-10px}
.well dd span{display: inline-block; margin-top: 80px; font-size:clamp(1.063rem, 0.75rem + 1.56vw, 1.375rem) }/*17-22*/

.well dl.f02{flex-direction: row-reverse;}
.well dl.f02 dt{width: 45%}
.well dl.f02 dt img{border-radius: 10px 0 0 10px}
.well dl.f02 dd{width: 80%; position: absolute; left: 8%; text-align: left; top: 3vw}

.well .text02{text-align: left; margin-left: 8%; margin-bottom: 40px}
.well .text03{text-align: left; margin-left: 8%;}

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

.h-menuBox

--------------------------------------------------------------------*/
.h-menuBox{background: url("../img/bg.png") repeat; background-size:25px 25px; padding: 80px 5%; text-align: center ;}
.h-menuBox .titimg img{max-width:385px; width: 80% }
.h-menuBox h2{margin-top: -90px; margin-bottom: 40px}
.h-menuBox h2 span{font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/


.h-menuBox dl{position: relative; display: flex; justify-content: space-between}
.h-menuBox .nov{position: relative; text-align: left; z-index: 5; }
.h-menuBox .nov img{width:60% ; max-width:114px }
.h-menuBox .nov span{position: absolute; left:0; top: 3vw }
.h-menuBox dt{width: 75%}
.h-menuBox dt ul{margin-top: -20px; position: relative}
.h-menuBox dd{width: 20%; text-align: left}
.h-menuBox dd p{position: absolute; right:0; top: 20px ; font-size:clamp(1.063rem, 0.75rem + 1.56vw, 1.375rem) }/*17-22*/

.h-menuBox .ser01, .h-menuBox .ser02{padding-bottom: 90px}
.h-menuBox .ser02 dl{flex-direction: row-reverse }
.h-menuBox .ser01 dt img , .h-menuBox .ser03 dt img{border-radius: 0 10px 10px 0}
.h-menuBox .ser02 dt img{border-radius: 10px 0 0 10px}
.h-menuBox .come{text-align: left; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.h-menuBox h3{margin: 15px 0 10px; text-align: left; font-size:clamp(1.625rem, 1.352rem + 1.36vw, 2.375rem)}/*26-38*/
.h-menuBox h3 span{font-size:clamp(1.063rem, 0.75rem + 1.56vw, 1.375rem) }/*17-22*/
.h-menuBox a{padding-top: 20px}

.h-menuBox .ser02 h3{margin-top: 5px}
.h-menuBox .ser02 .nov{text-align: right}
.h-menuBox .ser02 .nov span{left: auto; right: 0}
.h-menuBox .ser02 dd p{right: auto; left: 0}
.h-menuBox .ser02 .come img.waka {
    width: 17px; height: auto;
    vertical-align: middle;
    position: relative;
    top: -3px; margin-right: 8px
}

.h-menuBox .ser03 dt ul{ margin-bottom: 30px}
.h-menuBox .ser03 dt li:last-child{width:222px; max-width: 60%; position: absolute; left: -1%; bottom: -40px}
.h-menuBox .ser03 .nov{white-space: nowrap; letter-spacing: normal;}
.h-menuBox .ser03 dd p.tatea{writing-mode: vertical-rl; top: 50px}
.h-menuBox .ser03 dd p.tatea span{transform: rotate(90deg);}
.h-menuBox .ser03 .come{padding-top: 30px}

.h-menuBox .ser03 .hosoku{ text-align: left; margin: 20px -5% 0 0; background: url("../img/top/hana.png") no-repeat right bottom; background-size: 50%}
.h-menuBox .ser03 .hosoku li{margin-bottom: 20px; background: url("../img/top/icon.png") no-repeat left 8px; background-size: 19px 18px; padding-left: 30px}
.h-menuBox .ser03 .hosoku li .midashi{margin-bottom: 5px; font-size:clamp(1.063rem, 0.75rem + 1.56vw, 1.375rem) }/*17-22*/
.h-menuBox .ser03 .hosoku li .sub{font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/

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

.other

--------------------------------------------------------------------*/
.other{background: url("../img/bg.png") repeat; background-size:25px 25px; padding: 0 3% 80px}
.otherin{background: url("../img/bg2.png") repeat; background-size:25px 25px; padding: 50px 0 80px; border-radius: 10px}
.otherin .me01 a.sqya{width: 200px; display: inline-block}
.otherin .me01 a{position: relative}
.otherin .me01 a img{position: absolute; right: 0; top: 10px}

.otherin dl{display: flex; justify-content: space-between ;}
.otherin .me02{padding-top: 60px}
.otherin .me01 dl{flex-direction: row-reverse;}
.otherin dt{width: 72%; padding-bottom: 20px}
.otherin dt img{border-radius:0 0 0 10px;}
.otherin .me02 dt img{border-radius:0 0 10px 0;}
.otherin dd{width: 25%; line-height: 1.5; margin-right: -2%}
.otherin .me01 dd{margin: 0 0 0 5%}
.otherin dd .tate{letter-spacing: normal; text-align: left; font-size:clamp(1.313rem, 1rem + 1.56vw, 1.625rem) }/*21-26*/
.otherin .li{padding: 0 8%}

.otherin .me02 .li img{width: 20px}
.otherin .me02 .li a:first-child{margin-right: 8% ; font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}/*14-15*/
.asbgfff{display: none}


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

.new

--------------------------------------------------------------------*/
.new{background: #fff; padding: 100px 5% 20px; position: relative}
.new .li{position: absolute; right:5%; top: 100px ; font-size: 13px}
.new .li .sqya{padding-bottom: 10px}
.new h2 img{max-width: 350px; width: 65%; margin-bottom: 50px}

.listtit li{text-align: left; list-style: none; margin-left: 0 ; font-size: clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.listtit li a{display: block; margin-bottom: 20px; padding-bottom: 10px;color: #5d5d5d }
.listtit li a dl{display: flex; justify-content: space-between}
.listtit li a dt{width: 18%}
.listtit li a dt .images img{ border: 1px solid #ccc; border-radius: 5px}
.listtit li a dd{width: 77%; margin-top: -8px ; text-align: right}
.listtit li a dd .category{ display: inline-block; font-size: 12px; text-align: right; border: 1px solid #ccc; padding: 0 10px}
.listtit li a:hover{color:#e6a6a5}
.listtit li a dd h3{text-align: left}
/*--------------------------------------------------------------------

.voice

--------------------------------------------------------------------*/
.voice{padding: 0px 0 50px; position: relative; text-align: center;  background: url( "../img/top/hep2.png") repeat-y center top #fff; background-size:333px auto}
.voice h2{margin-top: -20px; margin-bottom: 20px; font-size:clamp(1.375rem, 0.563rem + 4.06vw, 2.188rem) }/*22-35*/
.voice .img img{width: 333px; }
.voice li a{display: block;}
.voice li{text-align: left; border: 1px solid #ccc; border-radius: 5px; padding:20px 15px; background:#fff }
.voice .slider .slick-slide{padding: 0 10px}
.voice dl{display: flex; justify-content: space-between; margin-bottom: 20px;align-items: center}
.voice dt{width:45% }
.voice dd{width:50% ;font-size:clamp(1.063rem, 0.75rem + 1.56vw, 1.375rem) }/*17-22*/
.voice dd .tit{line-height: 1.6; padding-top: 10px; font-size: clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.voice .come{font-size: clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.voice .li{position: absolute; right:5%; bottom: 10px ; font-size: 13px}
.voice .li .sqya{padding-bottom: 10px}
/*--------------------------------------------------------------------

proBOx

--------------------------------------------------------------------*/
.proBOx{text-align: center; background: #fff; position: relative; padding-top: 140px}
.proBOx .img{z-index: 3; padding: 0 13%; box-sizing: border-box; text-align: center; width: 100%; max-width: 402px; position: absolute; top: 200px;  left: 50%; transform: translate(-50%, -50%);}
.proBOx .img img{margin-left: 3%}

.proBOx h2{text-align: left; margin: 30px 6% 20px; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/
.proBOx .cata{text-align: left; letter-spacing: normal; margin:0 6% 20px; font-size:clamp(0.75rem, 0.688rem + 0.31vw, 0.813rem)}/*12-13*/

.proBOx h3{margin: 0 6% ; text-align: left; position: relative; z-index: 5}
.proBOx h3 img{max-width:141px ; width: 50% }
.proBOx ul{margin-top: -10px}
.proBOx .slick-slide img{padding: 0 10px}
.proBOx .btn-container { width: 70% ; text-align: center; margin: 0 auto}
.proBOx .sqya{display: block ; text-align: left; position: relative}
.proBOx .sqya img{position: absolute; right: 0; top: 8px}

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

serectBox

--------------------------------------------------------------------*/
.serectBox{background: #fff; padding: 160px 0 120px 5% ; display:flex; justify-content: space-between}
.serectBox .serectleft{width: 45%; }
.serectBox .serectb{width: 48%; position: relative}
.serectBox .serectb .tate{ color: #393939; position: absolute; top: -50px; right:5%; z-index: 5 ; mix-blend-mode:hard-light}
.serectBox .serectb img{border-radius: 5px 0 0 5px}
.serectBox h2{margin: -10px 0 20px ; line-height: 1.6; letter-spacing: normal; font-size:clamp(1.25rem, 0.625rem + 3.13vw, 1.875rem)}/*20-30*/

.serectBox .sqya{display: block ; text-align: left; position: relative}
.serectBox .sqya img{position: absolute; right: 0; top: 8px}



@media (min-width: 640px){
.well .text01{margin-bottom: 60px}
.well .text02{margin-bottom: 60px}

.h-menuBox .nov span{top: 1vw;}

.h-menuBox h2{margin-top: -110px; margin-bottom: 60px}
.h-menuBox .ser01, .h-menuBox .ser02{padding-bottom: 110px}
.h-menuBox .ser03 .hosoku{ text-align: left; margin: 20px -5% 0 0; background: url("../img/top/hana.png") no-repeat right bottom; background-size: 250px 389px}
.h-menuBox .ser03 .hosoku{background: url(../img/top/hana.png) no-repeat right bottom; background-size: 40%;}
.h-menuBox .ser03 .hosoku li{ background: url(../img/top/icon.png) no-repeat left 12px; background-size: 19px 18px;}

.proBOx{padding-top: 200px}
.proBOx .img{padding: 0; top: 280px}
}



@media (min-width: 1100px){
.contBoxFlaxr{border: none}
.contBoxFlaxr .first h1 img{width:  487px}
.first .scroll-container{bottom: -20px}
.first section{position: absolute; top: 12%; }
.first .fade1{ margin-top: -50px;}

.cps li:first-child{padding-bottom: 66%}


}