@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 {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  }
body {background-color: #ffffff; font-size: 16px; line-height: 2.5; color: #121212; position: relative; font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; background-image: url(images/bg-body.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; 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: #000000;
	text-decoration: none!important;
}
a:visited {m
	text-decoration: none; 
}
a:hover {
	/*color: #34A7E0;*/
	text-decoration: none!important;
}
a:active {
	text-decoration: none!important;
}

/*----------------------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:#121212;}
.fcor {color:#f19f58;}
.fcgr {color:#999999;}

.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; bottom:0; max-width:430px;}
@media print, screen and (min-width: 1200px) {.three { left:15%; width:50%;}}
@media only screen and (min-width: 901px) and (max-width: 1199px) {.three { left:10%; width:35%;}}
@media only screen and (max-width: 900px) {.three { left:0%; width:0%;}}

.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: #f1e6dd; position:relative; z-index:3;}
@media print, screen and (min-width: 901px) {.flex-body-r {width: 450px; margin: 0; padding: 40px;}}
@media only screen and (max-width: 900px) {.flex-body-r {width: 90%; margin: 0; padding: 5%;}}

@media print, screen and (min-width: 701px) {
header  {height: 120px;}
}
@media only screen and (max-width: 700px) {
header  {height: 92px;}
}

.logo-copy {background-color: #f19f58; color: #ffffff; font-weight: 700; position: relative; line-height: 2;}
@media print, screen and (min-width: 701px) {.logo-copy {font-size:85%; padding: 3px 10px 2px; width: 150px;}}
@media only screen and (max-width: 700px) {.logo-copy {font-size:70%;  padding: 2px 10px; width: 120px;}}
.logo-copy:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 0px;
  border: 12px solid transparent;
  border-top: 12px solid #f19f58;
  width: 0;
  height: 0;
}

.logo {font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700;}
@media print, screen and (min-width: 701px) {.logo {font-size:170%;}}
@media only screen and (max-width: 700px) {.logo {font-size:130%;}}


.mainimage-over {overflow: hidden; position: relative; margin: 0 auto 30px; background-size: cover;}
@media screen and (min-width: 701px) {.mainimage-over {height: 550px;}}
@media screen and (max-width: 700px) {.mainimage-over {height: 550px;}}

.mainimage {border-radius: 10px; overflow: hidden; position: relative; z-index: 1;}
@media screen and (min-width: 701px) {.mainimage {height: 520px;}}
@media screen and (max-width: 700px) {.mainimage {height: 520px;}}

/*スクロールダウン全体の場所*/
.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: #f19f58;}
@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 {border-radius: 10px; padding: 10px 10px; margin: 0 0 50px; background-color:#ffffff;}
.bg-box-second {border-radius: 10px; padding: 10px 10px; margin: 0 0; background-color:#fef5ee;}
.bg-box-third {border-radius: 10px; padding: 10px 10px; margin: 0 0 30px; border:1px solid #ffffff;}
.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; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; font-style: normal;}
.title-first p{font-size: 240%; color: #ffffff; font-weight: 900;}

.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; line-height: 1.5; text-align: center;}
@media print, screen and (min-width: 1200px) {.title-third {font-size: 180%;}}
@media only screen and (max-width: 700px) {.title-third {font-size: 150%;}}

.title-fourth {font-weight: 700; color:#f19f58; font-size: 120%; margin: 0 0 10px; padding: 0; line-height: 1.5;}
.title-fifth {font-weight: 700; font-size: 150%; 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;}
.box-staff {position: relative;}

.img-radius {border-radius: 10px}
.img-radius-top {border-radius: 10px 10px 0 0; /* 左上、右上、右下、左下 */}

.button {border-radius: 10px; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; 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 #f19f58;}
.button-tel {font-size: 215%; background-color: #ffffff; border: 3px solid #f19f58;}
.button-home {font-size: 120%; background-color: #ffffff; border: 3px solid #f19f58; 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: 50%;
    transform: translateX(-50%);
    width: 100%; /* .flex-body-r からはみ出さないように */
    padding: 0px;
    background-color: #f19f58;
    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;
	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% / 5); 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: #f19f58; 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; /* 枠線の色 */
}