@charset "utf-8";
h1{padding:12px 0; text-align:center;}
img{ max-width:100%;}
img.img_left{float:left; vertical-align:middle;}

div.read{display:flex; flex-wrap:wrap;}
div.txt{width:76%; margin-right:1%;}
div.photo{width:22%;}

/*連絡先*/
div.contact{display:flex; flex-wrap:wrap; gap:12px; margin:12px 0;}
div.contact div{background-color:#E2EFF1; display:flex; justify-content: center; align-items:center;width:32%; text-align:center; padding:12px 0; border-radius:12px;}
div.contact div p{ text-align:center;}

div.contact div strong{color:#FFFFFF; background-color:#003399; padding:0 6px; font-weight:normal;}
div.contact div a{font-size:1.35em; color:#1D2087;}
div.contact div a:hover{color:#FF0000; text-decoration:none;}
div.contact div a.form{display:flex; align-items:center; justify-content: center;}
div.contact div span.tel{margin:12px auto; display:block; font-size:1.2em;}

/*郵送までの流れ*/
ol.step_list{ margin:0 auto 0 0; list-style: none; counter-reset: number;}
ol.step_list p{margin-bottom:8px;}
ol.step_list strong{ font-size:1.2em;}
ol.step_list li { border:1px solid #CCCCCC; position: relative; padding:12px 12px 12px 36px; margin-bottom:36px;}
ol.step_list li::before {
counter-increment: number; content:counter(number) "."; position:absolute; font-size:1.2em; font-weight:bold; left:0; padding-left:12px;
}
ol.step_list li:after {
	content: ''; position: absolute; top:102%;
	width:155px;
	height:26px;
	background: #009999;
  clip-path: polygon(0 -162.6%, 50% -162.6%, 50% 0, 50% 0, 50% -162.6%, 100% -162.6%, 50% 100%);
}
ol.step_list li:last-child:after{border:none; background:none;}

ol.step_list li ul{margin:0 0 20px; padding:0;}
ol.step_list li ul li{list-style:none; border:0; margin:0; padding-bottom:0;}
ol.step_list li ul li::before{content:"・";}
ol.step_list li ul li:after{content:""; background:none; width:auto; height:auto; margin:0;}

ol.step_list li div.frame{display:flex; flex-wrap:wrap;}
ol.step_list li div.photo{text-align:center; margin:0 auto;}

ol.step_list li a{display:inline-block; background-color:#BCE2E8; padding:8px; border-radius:30px; color:#336600; text-decoration:none;}
ol.step_list li a:hover{background-color:#A5E2CD;}

/*発送についての注意事項*/
dl.notes dt, dl.notes dd{margin-top:4px;}
dl.notes dt{ font-weight:bold; margin-top:30px;}
dl.notes dt:before{ content:"●"; color:#003399;}
dl.notes dd{ margin-left:1em;}

dl.notes dl{margin:0; padding:0;}
dl.notes dl dt:before{content:"";}
dl.notes dl dt{margin-top:0;}

div.box{border:1px solid  #999999; padding:12px;}
div.box div{display:flex;}
div.box dl{display:flex; flex-wrap:wrap; align-items:center;}
div.box dl dt, div.box dl dd{padding:6px; margin-top:4px;}
div.box dl dt{background-color:#003366; color:#FFFFFF; margin-left:12px;}
div.box dl dt:first-child{margin-left:0;}
div.box dl dd{font-weight:bold; padding-left:0; margin-left:8px;}
div.box dl dd.arrow {
  display: inline; margin:0;
  width:16px;
  height:10px; padding-left:0; padding-right:0;
  background: #003366;
  clip-path: polygon(0 50%, 43.4% 50%, 43.4% 0, 100% 50%, 43.4% 100%, 43.4% 50%, 0 50%);
}

dl.notes div.box dl dt:before{content:"";}


@media screen and (max-width:960px) {
div.read{display:block;}
div.txt{width:auto; margin-right:auto;}
div.photo{width:auto; text-align:center;}

ol.step_list li:after{ left:37%;}
}

@media screen and (max-width:720px) {
div.contact{display:block; width:auto;}
div.contact div{ display:block; margin-bottom:18px; width:auto;}
div.box div{display:block;}
}