.join-block > li {
  position: relative;
  border-radius: 8px;
  background-color: rgba(255,255,255,1.00);
  overflow: hidden;
  margin: 0px 0px 15px;
  border: 1px solid rgba(245,170,0,1.00);
}
.join-block-in {
padding: 15px;
}
.join-catch {
font-size: calc(100vw / 20);
line-height: 1.4em;
text-align: center;
font-weight: bold;
padding: 0px 0px 0.9em;
}
.join-catch span {
font-size: calc(100vw / 25);
line-height: 1.5em;
font-weight: normal;
display: block;
padding: 0.4em 0px 0px;
}

.join-block-in > .corner-txt {
width: 40px;
text-align: center;
background-color: rgba(245,170,0,1.00);
}

img.pc-image-3 {
max-width: 915px;
}
.flow04 em.pink-txt {
  font-weight: bold;
  font-style: normal;
  font-size: 150%;
}
.flow04 .header-table th {
  white-space: nowrap;
}
.flow04 tr td:nth-child(even) {
  background-color: rgba(253,238,204,1.00);
}

#flow .flow04 .normal-table tr td:first-child {
}
#flow .flow04 .normal-table {
width: 120vw;
}



/* #certificate */
#certificate .pink-back-block {
  position: relative;
}
#certificate .block-title {
  text-align: left;
}
#certificate .flex3block {
  width: 70%;
  margin: 0px auto;
}
#certificate .flex3block > li {
-ms-flex-preferred-size: 49%;
flex-basis: 49%;
display: flex;
justify-content: center;
align-items: flex-end;
}
#certificate .flex3block > li .graphic-img {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.certificate-br {
  display: none;
}


.contents-block#certificate {
  padding-top: 5% !important;
}


/*915
<section class="contents-block topzero" id="certificate">
	<div class="contents-block-in">
		<div class="pink-back-block contents-space">
			<ul class="flex3block animation resmab20">
				<li>
					<div class="graphic-img"><img src="../common/images/shokosuke02.svg" alt="ちょこ助" width="130" height="120" loading="lazy"></div>
				</li>
				<li>
					<div class="graphic-img"><img src="../common/images/chokoro02.svg" alt="ちょころ" width="130" height="85" loading="lazy"></div>
				</li>
			</ul>
			<h2 class="block-title animation"><p>見舞金の請求には交通事故(人身)証明書が必要です。</p></h2>
			<div class="contents-txt animation bold-text"><p>自転車の事故などの小さな事故もカバーしますので、事故にあったら必ず最寄りの警察署にお届けください。&lt;ちょこっと共済&gt;は、事故の相手方の損害を賠償する自動車保険・自転車保険ではありません。</p></div>
		</div><!-- pink-out-block -->
	</div>
</section>
*/


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

.join-block > li {
border-radius: 10px;
margin: 0px 0px 15px;
}
.join-block-in {
padding: 15px;
}
.join-catch {
font-size: 19px;
line-height: 1.4em;
}
.join-catch span {
font-size: 15px;
line-height: 1.5em;
}
.join-block-in > .corner-txt {
width: 43px;
text-align: center;
}

}


@media print, screen and (min-width: 768px) {
#flow .flow04 .normal-table {
width: 100%;
}

.join-block > li {
border-radius: 10px;
margin: 0px 0px 25px;
}
.join-block-in {
padding: 25px;
}
.join-catch {
font-size: 24px;
line-height: 1.4em;
}
.join-catch span {
font-size: 16px;
line-height: 1.5em;
}

.join-block-in > .corner-txt {
width: 43px;
text-align: center;
}
#flow .flow01 .contents-lead-txt {
text-align: center;
}


#entry .contents-lead-txt {
text-align: center;
}

/* #certificate */
#certificate .flex3block {
  width: 60%;
  margin: 0px auto;
}
#certificate .block-title {
  text-align: center;
}
.contents-block#certificate {
  padding-top: 3.6% !important;
}

}


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

.join-block > li {
margin: 0px 0px 30px;
}
.join-block-in {
padding: 30px;
}
.join-catch {
font-size: 27px;
line-height: 1.4em;
}
.join-catch span {
font-size: 16px;
line-height: 1.5em;
}

.join-block-in > .corner-txt {
width: 52px;
text-align: center;
}
#flow .flow03 .contents-lead-txt {
text-align: center;
}


/* #certificate */
#certificate .flex3block {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 2em;
}
#certificate .flex3block > li {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
}
#certificate .contents-txt {
  text-align: center;
}
#certificate .block-title {
  position: relative;
}
.certificate-br {
  display: table;
}

}


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

.join-block > li {
margin: 0px 0px 40px;
}
.join-block-in {
padding: 40px;
}
.join-catch {
font-size: 30px;
line-height: 1.4em;
}
.join-catch span {
font-size: 17px;
line-height: 1.5em;
}

.join-block-in > .corner-txt {
width: 60px;
text-align: center;
}

/* #certificate */
#certificate .flex3block {
  width: 96%;
  left: 2%;
}
#certificate .flex3block > li {
-ms-flex-preferred-size: 17%;
flex-basis: 17%;
}
.contents-block#certificate {
  padding-top: 3% !important;
}

}


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

.join-catch {
font-size: 34px;
line-height: 1.4em;
}
.join-catch span {
font-size: 18px;
line-height: 1.5em;
}

}

















/* point-block */
.flex3block.step-block > li {
border: 1px solid rgba(245,170,0,1.00);
border-radius: 8px;
margin: 0px 0px 20px;
position: relative;
background-color: rgba(255,255,255,1.00);
}
.flex3block.step-block > li::after {
content: "";
width: 24px;
height: 24px;
bottom: -22px;
left: calc(50% - 10px);
display: block;
position: absolute;
background-image: url(../images/arrow.svg);
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
transform: rotate(90deg)
}
.flex3block.step-block > li:last-child::after {
display: none;
}
.flex3block.step-block > li:last-child {
margin: 0px;
}
.flex3block.step-block .graphic-img img {
width: 35%;
max-width: 85px;
}

.step-block .corner-txt {
background-color: rgba(245,170,0,1.00);
}

.join4 a.link-button.pink-bt {
font-size: calc(100vw / 27);
line-height: 1.2em;
}


@media print, screen and (min-width: 375px) {
.flex3block.step-block > li {
border-radius: 10px;
margin: 0px 0px 20px;
}
.join4 a.link-button.pink-bt {
font-size: 14px !important;
line-height: 1.2em;
}

}


@media print, screen and (min-width: 768px) {
.flex3block.step-block > li {
border-radius: 10px;
margin: 0px 0px 25px;
}
.flex3block.step-block > li::after {
width: 30px;
height: 30px;
bottom: -25px;
left: calc(50% - 12px);
}
.join4 a.link-button.pink-bt {
font-size: 15px !important;
line-height: 1.2em;
}

}


@media print, screen and (min-width: 1024px) {
.flex3block.step-block > li {
margin: 0px;
}
.flex3block.step-block > li::after {
bottom: auto;
top: calc(50% - 10px);
right: -30px;
left: auto;
transform: rotate(00deg)
}

.join4 a.link-button.pink-bt {
font-size: 17px !important;
line-height: 1.2em;
}

}


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

}

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

.flex3block.step-block > li {
	-ms-flex-preferred-size: 350px;
	flex-basis: 350px;
}

}








.place-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-top: 1px solid rgba(245,170,0,1.00);
border-left: 1px solid rgba(245,170,0,1.00);
font-size: calc(100vw / 25);
line-height: 1.2em;
}
.place-list > li {
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
border-right: 1px solid rgba(245,170,0,1.00);
border-bottom: 1px solid rgba(245,170,0,1.00);
display: flex;
justify-content: center;
align-items: center;
}
.place-list > li p {
padding: 0.7em 0.3em;
}
.place-list > li.empty {
display: none;
border: none;
}

#relief .block-in {
padding-top: 3.5em;
}

#relief .application img {
max-width: 600px;
}
/*
    <div class="join-catch animation"><p>申込書記入例</p></div>
    <div class="graphic-img animation resmab5 application"><img src="./../img/place/kanyumoushikomisho2023.png" alt="申込書記入例　イメージ" width="1199" height="737" loading="lazy"></div>
*/


@media print, screen and (min-width: 375px) {
.place-list {
font-size: 15px;
line-height: 1.2em;
}

}

@media print, screen and (min-width: 768px) {
.place-list::before{
  content:"";
  display: block;
  width:20%;
  order:1;
}
.place-list::after{
  content:"";
  display: block;
  width:20%;
}
.place-list > li {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
}
.place-list {
font-size: 16px;
line-height: 1.2em;
}
.place-list > li p {
padding: 0.9em 0.3em;
}

}


@media print, screen and (min-width: 1024px) {
.place-list::before{
  width:16.66%;
}
.place-list::after{
  display: block;
  width:16.66%;
}
.place-list > li {
-ms-flex-preferred-size: 16.66%;
flex-basis: 16.66%;
}
.place-list {
font-size: 17px;
line-height: 1.2em;
}
.place-list > li.empty {
display: flex;
}
.place-list {
font-size: 17px;
line-height: 1.2em;
}

#place .contents-lead-txt,
#place .white-b-out-block .contents-txt,
#place .white-b-out-block .kome-txt {
text-align: center;
}

}


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

}

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

}



























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

}

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

}


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

}


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

}

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

}