@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Zen+Maru+Gothic:wght@400;500;700');
@import url('https://fonts.googleapis.com/css?family=Zen+Maru+Gothic');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
figure {
	padding: 0; margin: 0;
}
img {
	border: none;width: 100%;height: auto;
	vertical-align: top;
}
html,body {
  margin: 0;
  padding: 0;
  text-align: center;
  }
body {font-size: 16px; line-height: 2.5; color: #333333; position: relative; font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; text-align: left;}
@media print, screen and (min-width: 701px) {body {letter-spacing: 0.09em;}}
@media only screen and (max-width: 700px) {body {letter-spacing: 0.1em;}}

button {margin: 0; padding: 0; font-size: 100%;
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
p {margin: 0; padding: 0;}
figure {margin: 0; padding: 0;}
/* リンク部分
----------------------------------------------------------------------------------------------------------------------*/

a {
	color: #333333;
	text-decoration: none!important;
}
a:visited {
	text-decoration: none; 
}
a:hover {
	/*color: #34A7E0;*/
	text-decoration: none!important;
}
a:active {
	text-decoration: none!important;
}
p {padding: 0;margin: 0;}

/*----------------------textstyle------------------------------*/

.fs50 {font-size:50%;}
.fs70 {font-size:70%;}
.fs80 {font-size:80%;}
.fs85 {font-size:85%;}
.fs90 {font-size:90%;}
.fs95 {font-size:95%;}
.fs100 {font-size:100%;}
.fs105 {font-size:105%;}
.fs110 {font-size:110%;}
.fs115 {font-size:115%;}
.fs120 {font-size:120%;}
.fs125 {font-size:125%;}
.fs130 {font-size:130%;}
.fs135 {font-size:135%;}
.fs140 {font-size:140%;}
.fs145 {font-size:145%;}
.fs150 {font-size:150%;}
.fs155 {font-size:155%;}
.fs180 {font-size:180%;}
.fs200 {font-size:200%;}
.fs250 {font-size:250%;}
.fs280 {font-size:280%;}
.fs300 {font-size:300%;}
.fs350 {font-size:350%;}

.fw400 {font-weight: 400;}
.fw700 {font-weight: 700;}
.fw900 {font-weight: 900;}


.lh10 {line-height:1;}
.lh12 {line-height:1.2;}
.lh15 {line-height:1.5;}
.lh20 {line-height:2;}
.lh25 {line-height:2.5;}
.lh30 {line-height:3;}

.ls01 {letter-spacing: 0.05em;}
.ls02 {letter-spacing: 0.01em;}
.ls0001 {letter-spacing: 0.001em;}
.ls03 {letter-spacing: 0.2em;}
.ls04 {letter-spacing: 0.1em;}

.fcwh {color:#ffffff;}
.fcbk {color:#333333;}
.fcor {color:#f8b94d;}
.fcgr {color:#999999;}

.bg01 {background-color:#f8b94d;}
.bg02 {background-color:#ffffff;}

.tac {text-align:center;}
.tal {text-align:left!important;}
.tar {text-align:right!important;}

h1,h2,h3,h4,h5 {line-height: 2;font-size: 100%;
  font-weight: 400;
  }
@media print, screen and (min-width: 1000px) {
.pc {display: block;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.pc {display: none;}
}
@media only screen and (max-width: 700px) {
.pc {display: none;}
}
@media print, screen and (min-width: 1000px) {
.pco {display: none;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.pco {display: block;}
}
@media only screen and (max-width: 700px) {
.pco {display: block;}
}
@media print, screen and (min-width: 1000px) {
.sp {display: none;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.sp {display: none;}
}
@media only screen and (max-width: 700px) {
.sp {display: block;}
}
@media print, screen and (min-width: 1000px) {
.spo {display: block;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.spo {display: block;}
}
@media only screen and (max-width: 700px) {
.spo {display: none;}
}

.wide-outer {overflow:hidden; position:relative;}
@media print, screen and (min-width: 1000px) {.wide-outer {width: 1100px; margin:0 auto;}}
@media only screen and (min-width: 701px) and (max-width: 999px) {.wide-outer {width: 90%; margin:0 auto;}}
@media only screen and (max-width: 700px) {.wide-outer {width: 100%; margin:0;}}

.three {position:fixed; z-index:1; top:21%; max-width:530px; font-size:300%; font-weight:700; text-align:left; line-height:1.5;}
@media print, screen and (min-width: 1200px) {.three { left:8%; width:50%;}}
@media only screen and (min-width: 901px) and (max-width: 1199px) {.three { left:8%; width:35%;}}
@media only screen and (max-width: 900px) {.three { left:0%; width:0%;}}

.ex-text {position:fixed; z-index:1; left:10%; top:20%; font-size:400%; font-weight:700; text-align:left; line-height:1.5; color: rgb(0 0 0 / 0.1);}

.flex-body {display:flex; flex-wrap:wrap; position:relative;}

flex-body-l {position:relative; z-index:1;}
@media print, screen and (min-width: 901px) {.flex-body-l {width: calc(100% - 530px); margin: 0;}}
@media only screen and (max-width: 900px) {.flex-body-l {width: 0%; margin: 0;}}
.flex-body-r {background-color: #ffffff; position:relative; z-index:6; overflow:hidden;}
@media print, screen and (min-width: 901px) {.flex-body-r {width: 530px; margin: 0; padding: 0 0;}}
@media only screen and (max-width: 900px) {.flex-body-r {width: 100%; margin: 0; padding: 5% 0;}}
header  {width: 90%; margin: 20px auto 20px; position: relative; z-index: 7;}

.logo-copy {color: #f8b94d; font-weight: 700; position: relative; line-height: 2; letter-spacing: 0.12em; margin: 0 0 25px;}
@media print, screen and (min-width: 701px) {.logo-copy {font-size:110%;}}
@media only screen and (max-width: 700px) {.logo-copy {font-size:110%;}}
.logo-copy-pd {padding:17px 28px 15px; border-radius:30px;}

.logo {font-weight: 700; line-height: 2; letter-spacing: 0.12em; }
@media print, screen and (min-width: 701px) {.logo {font-size:130%;}}
@media only screen and (max-width: 700px) {.logo {font-size:130%;}}

section  {position: relative; z-index: 7;}

.wide01 {width: 90%; margin: 0 auto; position: relative; z-index: 7;}

.circle01 {
  width: 1200px;
  height: 1200px;
  border-radius: 50%;
	background-color: #fff7e0;
	position: absolute; z-index: 1; top: -120px; right: -100px;
}
.circle02 {
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
	background-color: #f8b94d;
	position: absolute; z-index: 2; top: 320px; right: -300px;
}
.circle03 {
  width: 900px;
  height: 900px;
  border-radius: 50%;
	background-color:rgba(255,255,255,0.1);
	position: absolute; z-index: 3; top: 200px; left: 160px;
}
.circle04 {
  width: 3000px;
  height: 3000px;
  border-radius: 50%;
	background-color:rgba(255,255,255,1);
	position: absolute; z-index: 3; top: 50px; left: -1100px;
}
.circle05 {
  width: 1400px;
  height: 1400px;
  border-radius: 50%;
	background-color: #f8b94d;
	position: absolute; z-index: 2; top: 0px; right: -300px;
}

.section-adj {padding: 200px 0 0 0;}

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute; z-index:5;
  left:50%;
    /*全体の高さ*/
  height:50px;
 animation-name: scrolldown1a;animation-duration: 6.5s;
}
@keyframes scrolldown1a {
0% {opacity: 0; transform: translateY(0);}
72% {opacity: 0; transform: translateY(0);}
100% {opacity: 1; transform: translateY(0);}
}
/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
  position: absolute;
  left:-15px;
  top: -15px;
    /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}

@media print, screen and (min-width: 701px) {
.scrolldown1 {bottom:80px;}
}
@media only screen and (max-width: 700px) {
.scrolldown1 {bottom:50px;}
}


.cls {position: absolute; z-index: 10; color: #000000; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; font-style: normal;}
@media print, screen and (min-width: 701px) {.cls {font-size: 180%; left: 9%;}}
@media only screen and (max-width: 700px){.cls {font-size: 155%; left: 3%;}}

.cls span{background-color:#ffffff; padding:5px 7px;}

.cls01 {animation-name: clsa01;animation-duration: 3.1s; letter-spacing: 0.02em; line-height: 1.7;}
@keyframes clsa01 {
0% {opacity: 0; transform: translateX(-40px);}
72% {opacity: 0; transform: translateX(-40px);}
100% {opacity: 1; transform: translateX(0);}
}
@media print, screen and (min-width: 701px) {.cls01 {bottom: 250px;}}
@media only screen and (max-width: 700px) {.cls01 {bottom: 220px;}}

.cls02 {animation-name: clsa02; animation-duration: 3.5s; letter-spacing: 0.02em; line-height: 1.5;}
@keyframes clsa02 {
0% {opacity: 0; transform: translateX(-40px);}
72% {opacity: 0; transform: translateX(-40px);}
100% {opacity: 1; transform: translateX(0);}
}
@media print, screen and (min-width: 701px) {.cls02 {bottom: 190px;}}
@media only screen and (max-width: 700px) {.cls02 {bottom: 160px;}}

.cls03 {animation-name: clsa03; animation-duration: 4.5s; line-height: 1.2!important; position: absolute; z-index: 10; color: #fff; text-align:right ;font-weight: 700; font-family: 'M PLUS Rounded 1c', sans-serif; color: #f8b94d;}
@keyframes clsa03 {
0% {opacity: 0; transform: translateY(-40px);}
72% {opacity: 0; transform: translateY(-40px);}
100% {opacity: 1; transform: translateY(0);}
}
@media print, screen and (min-width: 1200px) {.cls03 {bottom: 0%; font-size: 400%; right: 0%;}}
@media only screen and (max-width: 700px) {.cls03 {bottom: 0%; font-size: 360%; right: 0%;}}

.bg-box-first {margin: 0 0 50px;}
.bg-box-second {border-radius: 10px; padding: 10px 10px; margin: 0 0; background-color:#fef5ee;}
.bg-box-third {padding: 10px; margin: 0 0 30px; border:1px solid #eeeeee;}
.bg-box-fourth {border-radius: 10px; margin: 0 0 50px; background-color:#ffffff;}
.bg-box-fourth-in {padding: 0px 10px 20px;}

.title-first {line-height: 1.5; text-align: left; font-size: 140%; margin: 0 0 30px; padding: 0 0 0 20px; font-weight: 700; font-style: normal; border-left: 8px solid #f8b94d;}
.title-first p{font-size: 240%; color: #ffffff; font-weight: 900;}
.title-first-wh {border-left: 8px solid #ffffff!important;}

.title-second {font-weight: 700; color: #cccccc; text-align: right; font-size: 140%; margin: 0 0 20px; padding: 0;font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700; font-style: normal;}
.title-second span{font-size: 70%;}

.title-third {font-weight: 700; margin: 0; padding: 0;}
@media print, screen and (min-width: 1200px) {.title-third {font-size: 140%;}}
@media only screen and (max-width: 700px) {.title-third {font-size: 125%;}}

.title-fourth {font-weight: 700; color:#f8b94d; font-size: 120%; margin: 0 0 10px; padding: 0; line-height: 1.5;}
.title-fifth {font-weight: 700; font-size: 110%; margin: 0; padding: 0;}
.title-sixth {font-weight: 700; color:#ffffff; font-size: 150%; position: absolute; right: 0; top: 0; -ms-writing-mode: tb-rl;writing-mode: vertical-rl;}
.title-seventh {font-weight: 700; color:#eeeeee; font-size: 200%; margin: 0 0 10px; padding: 0; text-align: center; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; line-height: 1.2;}
.title-eigth {font-weight: 700; font-size: 115%; margin: 0 0 15px; padding: 0;font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; text-align: center; line-height: 1.2;}
.title-nineth {font-weight: 700; font-size: 130%; margin: 0 0 30px; padding: 0; font-weight: 700;  line-height: 1.8;}
.title-ten {font-weight: 700; margin: 0 0 30px; padding: 0; font-weight: 700; }
.title-eleventh {font-weight: 700; font-size: 150%; margin: 0 0 30px; padding: 0;font-family: 'M PLUS Rounded 1c', sans-serif; text-align: center; line-height: 1.2;}
.img-staff {margin: 0 auto; width: 85%;}

.space-first {margin-bottom: 30px;}
.space-second {margin-bottom: 60px;}

.wide-icon {width: 78%; margin: 0 auto 30px; max-width: 350px;}

.box {padding: 0; margin: 0 0 30px;}
.box2 {padding: 0; margin: 0 0 50px;}
.box3 {padding: 0; margin: 0 0 10px;}
.box4 {padding: 0; margin: 0 0 100px;}
.box-staff {position: relative;}

ul.bglist {padding: 0; margin: 0 0 30px; list-style-type: none; line-height: 1.8;}
ul.bglist li{padding: 10px 18px 8px; margin: 0 0 10px;}

.button {border-radius: 10px; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: start; align-items: center; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; height: 120px; box-sizing: border-box; line-height: 1;}
.button p {font-size: 50%; margin: -20px 0 0 0; padding: 0;}
.button-mail {font-size: 140%; background-color: #ffffff; border: 3px solid #f8b94d;}
.button-tel {font-size: 215%;}
.button-home {font-size: 120%; background-color: #ffffff; border: 3px solid #f8b94d; height: 70px!important;}
.button-dx {font-size: 120%; position: relative; line-height: 1.5; justify-content: start!important;}
.button-dx::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.iframe-content {   position: relative; width: 100%;}
@media print, screen and (min-width: 701px) {.iframe-content {padding: 120% 0 0 0;}}
@media only screen and (max-width: 700px) {.iframe-content {padding: 120% 0 0 0;}}
.iframe-content iframe {position: absolute; top: 0; left: 0;width: 100%;    height: 100%; border-radius: 10px;}

.instagram {width: 100px; margin: 0 auto 10px; }

.copyright {font-size:60%;  text-align: center; margin: 30px 0 30px;}

#Fto {
    z-index: 50;
    position: fixed;
    bottom: 0;
    left: 0%;
    width: 100%; /* .flex-body-r からはみ出さないように */
    padding: 0px;
    background-color: #f8b94d;
    letter-spacing: 0em;
    display: none; /* 初期状態は非表示 */
}

ul#Fclast {list-style-type: none; line-height: 1.2; text-align: center; margin: 0 auto; padding: 0; 
	display: flex; width: 100%;
	flex-flow: row nowrap;
	align-items: center; font-size: 80%;
		justify-content: center;
		box-sizing: border-box;
}
@media print, screen and (min-width: 601px) {
ul#Fclast {width: 700px; border-left: 1px solid #fff; border-right: 1px solid #fff;}
}
@media print, screen and (max-width: 600px) {
ul#Fclast {width: 100%; border-left: none; border-right: none;}
}

ul#Fclast li {border-right: 1px solid #ffffff; justify-content: center; align-items: center;
		padding: 0; margin: 0;
		width: auto;
}
ul#Fclast li {width: calc(100% / 4); display: flex;}
ul#Fclast li:last-child {border-right: none;}
ul#Fclast li a {color:#ffffff;}

@media print, screen and (min-width: 601px) {ul#Fclast li{height: 60px;}}
@media print, screen and (max-width: 600px) {ul#Fclast li{height: 56px;}}


@media screen and (min-width: 1100px) {
.cb-slideshow {height: 520px;}
}
@media only screen and (min-width: 701px) and (max-width: 1099px) {
.cb-slideshow {height: 520px;}
} 
@media screen and (max-width: 700px) {
.cb-slideshow {height: 520px;}
}
@media screen and (min-width: 1100px) {
.cb-slideshow li span {height: 520px;}
}
@media only screen and (min-width: 701px) and (max-width: 1099px) {
.cb-slideshow li span {height: 520px;}
} 

@media screen and (max-width: 700px) {
.cb-slideshow li span {height: 520px;}
}

.cb-slideshow,
.cb-slideshow:after {
    position: relative;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: ;
  margin: 0;
}
.cb-slideshow li {list-style:none;}

.cb-slideshow li span {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}

.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
   left: 0%;
	top: 30%;
    width: 100%;
    opacity: 0;
    color: #fff;
	 -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}


.cb-slideshow li:nth-child(1) span {background-image: url(images/slide01.jpg);}

.cb-slideshow li:nth-child(2) span {
	-webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(2) span {background-image: url(images/slide02.jpg);}

.cb-slideshow li:nth-child(3) span {
	-webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 	
}

.cb-slideshow li:nth-child(3) span {background-image: url(images/slide03.jpg);}
.cb-slideshow li:nth-child(4) span {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

.cb-slideshow li:nth-child(4) span {background-image: url(images/slide01.jpg);}

.cb-slideshow li:nth-child(5) span {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}

.cb-slideshow li:nth-child(5) span {background-image: url(images/slide02.jpg);}

.cb-slideshow li:nth-child(6) span {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(6) span {background-image: url(images/slide03.jpg);}


.cb-slideshow li:nth-child(2) div {
	-webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) div {
	-webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 	
}

.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}

.cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

@-webkit-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -webkit-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -webkit-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -moz-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -moz-transform: scale(1.05);
	    -moz-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -moz-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -moz-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -o-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -o-transform: scale(1.05);
	    -o-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -o-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -o-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -ms-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -ms-transform: scale(1.05);
	    -ms-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -ms-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -ms-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.05);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    transform: scale(1.1);
	}
	100% { opacity: 0 }
}

@keyframes titleAnimation {
    0% { opacity: 0 }
    4% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

.bg-txt-first {background-color: #f8b94d; color: #ffffff; font-weight: 700; padding: 4px 7px;}

ol.cr-number {
  list-style-type: none; /* 通常のリスト番号を無効にする */
  counter-reset: item; /* カウンターをリセット */
margin: 0;
padding: 0;
}

ol.cr-number li {margin: 0 0 0 0;
  position: relative; margin: 0; padding: 0 0 10px 30px;
}

ol.cr-number li::before {
  content: counter(item); /* 番号を表示 */
  counter-increment: item; /* 番号をインクリメント */
  position: absolute;
  left: 0;
  top: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%; /* 丸くする */
  background-color: none; /* 背景色 */
  text-align: center;
font-size: 85%;
  line-height: 1.38; /* 数字を中央に配置 */
  font-weight: 400; /* 数字を太字にする */
  border: 1px solid #333; /* 枠線の色 */
}






body {
    background: -moz-linear-gradient(45deg, #ffffff 0%, #fff5e6 29%, #ffeacc 66%, #ffbc32 100%);
    background: -webkit-linear-gradient(45deg, #ffffff 0%, #fff5e6 29%, #ffeacc 66%, #ffbc32 100%);
    background: linear-gradient(45deg, #ffffff 0%, #fff5e6 29%, #ffeacc 66%, #ffbc32 100%);
    background-size: 400% 400%;
    -webkit-animation: Gradient 8s ease infinite;
    -moz-animation: Gradient 8s ease infinite;
    animation: Gradient 8s ease infinite;
    position: relative; 
}

body::before, 
body::after {
    content: "";
    width: 70vmax;
    height: 70vmax;
    position: fixed; /* Fixed position to keep it on screen */
    background: rgba(255, 255, 255, 0.48);
    left: -20vmin;
    top: -20vmin;
    animation: morph 15s linear infinite alternate, spin 20s linear infinite;
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 55% 55%;
    pointer-events: none; 
}
    
body::after {
    width: 70vmin;
    height: 70vmin;
    left: auto;
    right: -10vmin;
    top: auto;
    bottom: 0;
    animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
    transform-origin: 20% 20%; 
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@keyframes morph {
  	0% {
    	border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
  	}
  	100% {
    	border-radius: 40% 60%; 
  	} 
}

@keyframes spin {
  	to {
    	transform: rotate(1turn); 
  	} 
}

ul.radio-bt {list-style: none; margin: 0; padding: 0;}
ul.radio-bt li{margin: 0; padding: 0;}

.sndbtn {width: 100%!important;border-radius: 5px; background: linear-gradient(#f19f58, #f19f58);
font-size: 16px; color: #ffffff!important; border: 1px solid #f9f9f9;
padding: 20px;
cursor: pointer;}
.sndbtn2 {width: 100%!important;border-radius: 5px; background: linear-gradient(#ffffff, #ffffff);
font-size: 16px; color: #000000!important; border: 1px solid #f19f58;
padding: 20px;
cursor: pointer;}
.w-contact {overflow: hidden;}
@media screen and (min-width: 581px) {
.w-contact {margin: 50px auto; width: 320px;}
}
@media screen and (max-width: 580px) {
.w-contact {margin: 50px auto; width: 90%;}
}

.frmt {
min-height: 40px;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 5px;
font-size: 16px;
padding: 5px;
cursor: pointer;
}
.frmta {
min-height: 100px;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 5px;
font-size: 16px;
padding: 5px;
cursor: pointer;
}
.frm-w {width: calc(100% - 2px); box-sizing: border-box;}

ul.cpt {margin: 0 0 30px 1px; padding: 0;}

/* ラジオボタン */
ul.radio-bt {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.radio-bt li {
  margin: 0;
  padding: 0;
}

/* ラジオボタン */
input[type="radio"] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  border-radius: 50%;
  vertical-align: middle; /* テキストとの位置を合わせるために変更 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ラジオボタンが選択されたときのスタイル */
input[type="radio"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #000;
  content: '';
}

/* ラベルのスタイル */
label::before {
  background-color: #fff;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  left: 5px;
  position: relative;
  vertical-align: middle; /* テキストとラジオボタンを中央揃え */
}

/* チェックされていないラジオボタンのスタイル */
label::after {
  background-color: #cccccc;
  border-radius: 50%;
  opacity: 0;
  width: 16px;
  height: 16px;
  left: 7px;
  position: relative;
}

/* チェックされたラジオボタンのスタイル */
input:checked + label::after {
  opacity: 1;
}

/* ラベルのテキストとの位置を調整 */
label {
  display: inline-block;
  line-height: 20px;  /* ラジオボタンとテキストの高さを合わせる */
  vertical-align: middle; /* テキストとラジオボタンを中央揃え */
  padding-left: 10px; /* ラジオボタンとテキストの間隔を確保 */
}

/* 隠すためのクラス */
.visually-hidden {
  position: absolute;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
}

.dpn {
 display: none;
}
.bdb {
 margin: 0 0 30px 0;
}
.mht {
 height: min-height:800px;
}