@charset "utf-8";
/*-- 準備中テキスト--------------------------------------------------------------*/
.junbiTxt {
    text-align: center;
    font-size: 5vw;
    color: #c96e6e;
    text-shadow: 3px 0px #00000040;
}
.iCovWr:after {
    content: "";
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 5vw;
    text-align: center;
    color: #c96e6e;
    text-shadow: 3px 0px #00000040;
}
/* .Training.iCovWr:after {
    content: "現在サイト準備中です";
} */
/*-- 準備中テキスト--------------------------------------------------------------*/
body {
    width: 100%;
    color: #303030;
    font-size: 16px;
    overflow-x: hidden;
   color: #333333;
  font-family: 'Noto Sans JP', sans-serif;
  background: #121212;
}
.bdR {
	border-radius:20px; 
}
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
.carousel-indicators .active {
    border-radius: 100%;
}
.cursol-pointer.indicator.active>.coverPoint {
     background: #DBC5B0;
}
.carousel-indicators {
    bottom: -10px;
    /* max-width: 84px; */
    width: 100%;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;
    /* left: -5px; */
}
.cursol-pointer.indicator {
        padding: 0 5px;
}
.coverPoint {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: #F0F3F5;
}


.pageTop {
    z-index: 99999;
    max-width: 55px;
    width: 100%;
}
.pageTop>img {
    width: 100%;
  max-width: 55px;
}
.pdf{
    max-width: 160px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px 8px 10px;
    position: relative;
    border: 1px solid rgb(51 51 51);
    color: #333;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Noto Sans JP', sans-serif;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.pdf:hover {
    background: rgb(51 51 51);
    color: #fff;
}
.cmnMsk01 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgb(0 0 0 / 25%);
    transition: .5s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}

/*-- ヘッダー--------------------------------------------------------------*/
.hContactBnTxt {
    writing-mode: vertical-lr;
}
.hWrap {
    display: none!important;
}
/*-- top--------------------------------------------------------------*/
.topCover:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #54F892,#23ABE3 30%,#8922F2 80%);/*グラデーションを定義*/
    background-size: 200% 200%;/*サイズを大きくひきのばす*/
    animation: bggradient 20s ease infinite;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: .7;
}
.topWr02Bg:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #54F892,#23ABE3 30%,#8922F2 80%,#AF0AC4);/*グラデーションを定義*/
    background-size: 200% 200%;/*サイズを大きくひきのばす*/
    animation: bggradient 20s ease infinite;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: .7;
}
.topWr05LinkMsk {
    background: linear-gradient(to bottom right, rgb(84 248 146 / 70%),rgb(35 171 227 / 70%) 30%,rgb(137 34 242 / 70%) 80%,rgb(175 10 196 / 70%));/*グラデーションを定義*/
}
@keyframes bggradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.scrollBx:after {
  content: "";
    /*描画位置*/
  position: absolute;
  /* top: 30px; */
    /*線の形状*/
  width: 1px;
  /* height: 30px; */
  background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
  left:0;
  right:0;
  margin:
  auto;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:15px;
    opacity: 0;
  }
  30%{
    height:20px;
    opacity: 1;
  }
  100%{
    height:0;
    top:60px;
    opacity: 0;
  }
}

.topWr01 canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
/*高さ・位置・透過が変化して線が上から下に動くここまで*/
.topWr02Ar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.topWr02Num {
    color: #20232C;
    -webkit-text-stroke: 1px #FFF;
}
.topWr03Ar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.topWr05Ar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: flex-start;
}
.topCoverTxt {
	clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%)
}
.topWr05LinkMsk {
    outline: 1px solid #ffffff;
    outline-offset: -10px;
}
.topWr05Link {
    overflow: hidden;
}
.topWr05Link>img {
    transition-duration: .5s;
}

.topWr05Link:hover>img {
    transform: scale(1.2);
}
/*-- フッター--------------------------------------------------------------*/

/*-- 共通--------------------------------------------------------------*/
.topMap>div {
    width: 100%;
    height: 100%;
}

.topMap>div>iframe {
    width: 100%;
    height: 100%;
}

.italic {
  font-style: italic;
}
.fontA {
  font-family: 'Raleway', sans-serif;
}
.mt-20 {
    margin-top: 15px!important;
}
.mt-40 {
    margin-top: 20px!important;
}
.mt-30 {
    margin-top: 15px!important;
}
.mt-50 {
    margin-top: 30px!important;
}
.mt-60 {
    margin-top: 40px!important;
}
.mt-70 {
    margin-top: 50px!important;
}
.mt-80 {
    margin-top: 60px!important;
}
.mt-110 {
    margin-top: 80px!important;
}
.color01 {
	color: #009D80!important;
}
.bgColor01 {
	background: #fff!important;
}
.black {
	color: #333333!important;
}

.white {
	color: #fff!important;
}

.tit01 {
    font-size: 36px;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: #fff;
    font-family: 'Raleway', sans-serif;
}
.subTit01 {
    font-size: 20px;
    color: #fff;
    letter-spacing: 0.1em;
    font-weight: 300;
    margin: 8px 0 0 0;
    font-family: "Noto sans Jp";
}
.tit02 {
    font-size: 20px;
    letter-spacing: 0.2em;
    line-height: 2em;
    font-weight: 700;
    color: #2DA6DC;
}
.txt01{
    font-size: 14px;
    font-weight: 300;
    line-height: 2em;
    color: #fff;
    letter-spacing: 0.1em;
}
.txt02 {
    letter-spacing: 0.1em;
    font-size: 20px;
    font-family: 'Raleway', sans-serif;
    color: #fff;
}
/*-- ボタン--------------------------------------------------------------*/
.btn01 {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.1em;
  position: relative;
  font-size: 16px;
  display: flex;
  align-items: center;
  max-width: 280px;
  justify-content: center;
  padding: 17px 15px 16px;
  background: linear-gradient(to right, #54F892,#23ABE3 30%,#8922F2 80%,#AF0AC4);
  width: 100%;
  font-family: 'Raleway', sans-serif;
 }
.btn01:hover {
    color: #121212;
}
.btn01:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-right: solid 1px #FFFFFF;
    border-bottom: solid 1px #FFFFFF;
    position: absolute;
    top: 8px;
    right: -8px;
    transition: all .5s;
    pointer-events: none;
}
.btn01:before {
    content: "";
    width: 10px;
    height: 11px;
    background: url(https://hanada-sekkei.com/system_panel/uploads/images/arrow01.svg)no-repeat center;;;;;;;;;;;
    background-size: cover;
    right: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.btn01:hover:before {
    background: url(https://hanada-sekkei.com/system_panel/uploads/images/arrow01_h.svg)no-repeat center;;;;;;;;;;;
    background-size: cover;
}
/*
.btn01:hover:after {
    top: 0px;
    right: 0px;
}
*/
.btn01Slid {
    display: block;
    position: relative;
}

.btn01Slid {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
}

.btn01:hover>.btn01Slid {
    transform: scale(1, 1);
}
/*============
nav
=============*/
.hamBx {
    max-width: 41px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333!important;
    font-size: 12px;
    z-index: 9999999;
    position: relative;
}
.toggle_btn {
    display: flex;
    position: relative;
    width: 32px;
    height: 22.75px;
    transition: all .5s;
    cursor: pointer;
    z-index: 999999999;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}
.toggle_btnIn {
    width: 100%;
    height: 100%;
    position: relative;
}

.toggle_btnIn div {
	display: block;
	position: absolute;
	left: 0;
	height: 2px;
	background-color: #fff;
	transition: all .5s;
}

.toggle_btnIn div:nth-child(1) {
	top: 0%;
	width: 100%;
}

.toggle_btnIn div:nth-child(2) {
	top: 44%;
	width: 100%;
}

.toggle_btnIn .hamBd:nth-child(3) {
	bottom: 0%;
	width: 100%;
}

.hamBx.open .hamBd:nth-child(1) {
	-webkit-transform: translateY(10px) rotate(-315deg);
	transform: translateY(10px) rotate(-315deg);
	background: #fff;
	top: 5px;
}

.hamBx.open .hamBd:nth-child(2) {
	opacity: 0;
}

.hamBx.open div:nth-child(3) {
	-webkit-transform: translateY(10px) rotate(315deg);
	transform: translateY(10px) rotate(315deg);
	background: #fff;
	top: 5px;
}

.navConte {
	display: block;
	position: fixed;
	top: 0;
	width: 300px;
	background: #222222;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: all .5s;
	z-index: 3;
	opacity: 0;
	height: 100vh;
	top: -1000px;
	width: 100%;
}

.open .navConte {
	top: 0;
	opacity: 1;
	z-index: 999999;
	position: fixed;
	right: 0;
	left: 0;
	width: 100%;
}
.navConte .navBx {
    /* padding: 25px 0 0 85px; */
}

.navConte .navBx .navIt {
	list-style: none;
	margin: 135px 0 0;
	padding: 0;
}

.navConte .navBx .navIt .navPt {
	position: relative;
	margin: auto;
	max-width: 600px;
	width: 100%;
	text-align: center;
}

.navConte .navBx .navIt .navPt a {
	display: block;
	font-size: 18px;
	font-weight: 500;
	padding: 10px 5px;
	text-decoration: none;
	color: #fff;
	/* font-family: 'Noto Sans JP'; */
}

.navConte .navBx .navIt .navPt a:hover {
	/* color: #fff; */
	opacity: .7;
}

.navArea {
	position: absolute;
    top: -1000px;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:375px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 375px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:414px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
.topWr03Ar {
    grid-template-columns: 1fr 1fr;
}
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 414px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:544px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
.topCoverTit01 {
    font-size: 40px!important;
    margin: 20px 0 0 0!important;
}
.scrollBx {
    margin: 12% auto 0 auto!important;
    height: 80px!important;
}
 /*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:15px;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:80px;
    opacity: 0;
  }
}
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 544px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:768px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */  
.tit01 {
    font-size: 48px;
}
.txt01{
    font-size: 16px;
}
.txt02 {
    font-size: 24px;
}
.subTit01 {
    font-size: 24px;
}
/*-- ヘッダー　--------------------------------------------------------------*/

.mt-20 {
    margin-top: 20px!important;
}
.mt-40 {
    margin-top: 40px!important;
}
.mt-30 {
    margin-top: 30px!important;
}
.mt-50 {
    margin-top: 50px!important;
}
.mt-60 {
    margin-top: 60px!important;
}
.mt-70 {
    margin-top: 70px!important;
}
.mt-80 {
    margin-top: 80px!important;
}
.mt-110 {
    margin-top: 110px!important;
}
/*-- フッター　--------------------------------------------------------------*/

/*-- top　--------------------------------------------------------------*/  
.scrollBx {
    margin: 2% auto 0 auto!important;
    height: 80px!important;
}
.topCoverTit01 {
    font-size: 35px!important;
    margin: 10px 0 0 0!important;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:25px;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:75px;
    opacity: 0;
  }
}
/*高さ・位置・透過が変化して線が上から下に動くここまで*/
  .topWr02Ar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
  .topWr03Ar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
  .topWr05Ar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
/*-- 準備中テキスト--------------------------------------------------------------*/
.junbiTxt {
    text-align: center;
    font-size: 3vw;
    color: #c94343;
}
.iCovWr:after {
    content: "";
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 2.7vw;
    text-align: center;
    color: #c94343;
}
/* .Training.iCovWr:after {
    content: "現在サイト準備中です";
} */
/*-- 準備中テキスト--------------------------------------------------------------*/
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 768px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:992px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 992px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1024px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/*-- ヘッダー　--------------------------------------------------------------*/
  .topWr02Ar {
    gap: 40px;
}
   .topWr03Ar {
    gap: 40px;
}
  .topWr05Ar {
    gap: 40px;
}
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1024px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1200px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
.topCoverLogo {
    max-width: 154px!important;
}
.scrollBx {
    margin: 8% auto 0 auto!important;
    height: 120px!important;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:25px;
    opacity: 0;
  }
  30%{
    height:50px;
    opacity: 1;
  }
  100%{
    height:0;
    top:110px;
    opacity: 0;
  }
}
/*☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1200px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1400px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/*-- ヘッダー　--------------------------------------------------------------*/

/*--トップ　--------------------------------------------------------------*/

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1400px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1500px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1500px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1600px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
.topCoverTit01 {
    margin: 40px 0 0 0!important;
}
.topCoverTit02 {
    margin: 16px 0 0 0!important;
}
.topCoverTxtMt {
    margin: 40px 0 0 0!important;
}
.scrollTxt {
    font-size: 24px!important;
}
.scrollBx {
    margin: 15.7% auto 0 auto!important;
    height: 165px!important;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:30px;
    opacity: 0;
  }
  30%{
    height:80px;
    opacity: 1;
  }
  100%{
    height:0;
    top:155px;
    opacity: 0;
  }
}
.topCoverTit01 {
    font-size: 64px!important;
}
.topCoverTit02 {
    font-size: 32px!important;
}
.topCoverTxt {
    font-size: 18px!important;
}
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1600px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1800px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1800px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */